kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

max height for proposal details

Browse Source
This commit is contained in:
Will Chen
2025-04-23 13:07:00 -07:00
parent 3b2fb12def
commit d651a6aa7e
1 changed files with 126 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/components/chat/ChatInput.tsx
View File

@@ -345,6 +345,19 @@ function ChatInputActions({
const otherFilesChanged = const otherFilesChanged =
proposal.filesChanged?.filter((f: FileChange) => !f.isServerFunction) ?? []; proposal.filesChanged?.filter((f: FileChange) => !f.isServerFunction) ?? [];
function formatTitle({
title,
isDetailsVisible,
}: {
title: string;
isDetailsVisible: boolean;
}) {
if (isDetailsVisible) {
return title;
}
return title.slice(0, 60) + "...";
}
return ( return (
<div className="border-b border-border"> <div className="border-b border-border">
<div className="p-2"> <div className="p-2">
@@ -360,7 +373,9 @@ function ChatInputActions({
) : ( ) : (
<ChevronDown size={16} className="mr-1 flex-shrink-0" /> <ChevronDown size={16} className="mr-1 flex-shrink-0" />
)} )}
<span className="font-medium">{proposal.title}</span> <span className="font-medium">
{formatTitle({ title: proposal.title, isDetailsVisible })}
</span>
</div> </div>
<div className="text-xs text-muted-foreground ml-6"> <div className="text-xs text-muted-foreground ml-6">
<ProposalSummary <ProposalSummary
@@ -414,112 +429,120 @@ function ChatInputActions({
</div> </div>
</div> </div>
{isDetailsVisible && ( <div className="overflow-y-auto max-h-[calc(100vh-300px)]">
<div className="p-3 border-t border-border bg-muted/50 text-sm"> {isDetailsVisible && (
{!!proposal.securityRisks.length && ( <div className="p-3 border-t border-border bg-muted/50 text-sm">
<div className="mb-3"> {!!proposal.securityRisks.length && (
<h4 className="font-semibold mb-1">Security Risks</h4> <div className="mb-3">
<ul className="space-y-1"> <h4 className="font-semibold mb-1">Security Risks</h4>
{proposal.securityRisks.map((risk, index) => ( <ul className="space-y-1">
<li key={index} className="flex items-start space-x-2"> {proposal.securityRisks.map((risk, index) => (
{risk.type === "warning" ? ( <li key={index} className="flex items-start space-x-2">
<AlertTriangle {risk.type === "warning" ? (
<AlertTriangle
size={16}
className="text-yellow-500 mt-0.5 flex-shrink-0"
/>
) : (
<AlertOctagon
size={16}
className="text-red-500 mt-0.5 flex-shrink-0"
/>
)}
<div>
<span className="font-medium">{risk.title}:</span>{" "}
<span>{risk.description}</span>
</div>
</li>
))}
</ul>
</div>
)}
{proposal.sqlQueries?.length > 0 && (
<div className="mb-3">
<h4 className="font-semibold mb-1">SQL Queries</h4>
<ul className="space-y-2">
{proposal.sqlQueries.map((query, index) => (
<SqlQueryItem key={index} query={query} />
))}
</ul>
</div>
)}
{proposal.packagesAdded?.length > 0 && (
<div className="mb-3">
<h4 className="font-semibold mb-1">Packages Added</h4>
<ul className="space-y-1">
{proposal.packagesAdded.map((pkg, index) => (
<li
key={index}
className="flex items-center space-x-2"
onClick={() => {
IpcClient.getInstance().openExternalUrl(
`https://www.npmjs.com/package/${pkg}`
);
}}
>
<Package
size={16} size={16}
className="text-yellow-500 mt-0.5 flex-shrink-0" className="text-muted-foreground flex-shrink-0"
/> />
) : ( <span className="cursor-pointer text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
<AlertOctagon {pkg}
size={16} </span>
className="text-red-500 mt-0.5 flex-shrink-0" </li>
/> ))}
)} </ul>
<div> </div>
<span className="font-medium">{risk.title}:</span>{" "} )}
<span>{risk.description}</span>
</div>
</li>
))}
</ul>
</div>
)}
{proposal.sqlQueries?.length > 0 && ( {serverFunctions.length > 0 && (
<div className="mb-3"> <div className="mb-3">
<h4 className="font-semibold mb-1">SQL Queries</h4> <h4 className="font-semibold mb-1">Server Functions Changed</h4>
<ul className="space-y-2"> <ul className="space-y-1">
{proposal.sqlQueries.map((query, index) => ( {serverFunctions.map((file: FileChange, index: number) => (
<SqlQueryItem key={index} query={query} /> <li key={index} className="flex items-center space-x-2">
))} {getIconForFileChange(file)}
</ul> <span
</div> title={file.path}
)} className="truncate cursor-default"
>
{file.name}
</span>
<span className="text-muted-foreground text-xs truncate">
- {file.summary}
</span>
</li>
))}
</ul>
</div>
)}
{proposal.packagesAdded?.length > 0 && ( {otherFilesChanged.length > 0 && (
<div className="mb-3"> <div>
<h4 className="font-semibold mb-1">Packages Added</h4> <h4 className="font-semibold mb-1">Files Changed</h4>
<ul className="space-y-1"> <ul className="space-y-1">
{proposal.packagesAdded.map((pkg, index) => ( {otherFilesChanged.map((file: FileChange, index: number) => (
<li <li key={index} className="flex items-center space-x-2">
key={index} {getIconForFileChange(file)}
className="flex items-center space-x-2" <span
onClick={() => { title={file.path}
IpcClient.getInstance().openExternalUrl( className="truncate cursor-default"
`https://www.npmjs.com/package/${pkg}` >
); {file.name}
}} </span>
> <span className="text-muted-foreground text-xs truncate">
<Package - {file.summary}
size={16} </span>
className="text-muted-foreground flex-shrink-0" </li>
/> ))}
<span className="cursor-pointer text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"> </ul>
{pkg} </div>
</span> )}
</li> </div>
))} )}
</ul> </div>
</div>
)}
{serverFunctions.length > 0 && (
<div className="mb-3">
<h4 className="font-semibold mb-1">Server Functions Changed</h4>
<ul className="space-y-1">
{serverFunctions.map((file: FileChange, index: number) => (
<li key={index} className="flex items-center space-x-2">
{getIconForFileChange(file)}
<span title={file.path} className="truncate cursor-default">
{file.name}
</span>
<span className="text-muted-foreground text-xs truncate">
- {file.summary}
</span>
</li>
))}
</ul>
</div>
)}
{otherFilesChanged.length > 0 && (
<div>
<h4 className="font-semibold mb-1">Files Changed</h4>
<ul className="space-y-1">
{otherFilesChanged.map((file: FileChange, index: number) => (
<li key={index} className="flex items-center space-x-2">
{getIconForFileChange(file)}
<span title={file.path} className="truncate cursor-default">
{file.name}
</span>
<span className="text-muted-foreground text-xs truncate">
- {file.summary}
</span>
</li>
))}
</ul>
</div>
)}
</div>
)}
</div> </div>
); );
} }