Ling0925
/
suna
mirror of https://github.com/kortix-ai/suna.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix chart dark

This commit is contained in:
Adam Cohen Hillel 2025-04-19 13:41:41 +01:00
parent 90c1aba057
commit f06ce14f0a
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/thread/chat-input.tsx
View File

@ -310,8 +310,8 @@ export function ChatInput({
return ( return (
<div <div
className={cn( className={cn(
"w-full border rounded-xl transition-all duration-200 shadow-sm bg-[#1a1a1a] border-gray-800", "w-full border rounded-xl transition-all duration-200 shadow-sm bg-white dark:bg-[#1a1a1a] border-gray-200 dark:border-gray-800",
uploadedFiles.length > 0 ? "border-border" : "border-gray-800", uploadedFiles.length > 0 ? "border-border" : "border-gray-200 dark:border-gray-800",
isDraggingOver ? "border-primary border-dashed bg-primary/5" : "" isDraggingOver ? "border-primary border-dashed bg-primary/5" : ""
)} )}
onDragOver={handleDragOver} onDragOver={handleDragOver}
@ -334,18 +334,18 @@ export function ChatInput({
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }} exit={{ opacity: 0, scale: 0.9 }}
transition={{ duration: 0.15 }} transition={{ duration: 0.15 }}
className="px-2 py-1 bg-gray-800 rounded-full flex items-center gap-1.5 group border border-gray-700 hover:border-gray-600 transition-colors text-sm" className="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center gap-1.5 group border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-colors text-sm"
> >
{getFileIcon(file.name)} {getFileIcon(file.name)}
<span className="font-medium truncate max-w-[120px] text-gray-300">{file.name}</span> <span className="font-medium truncate max-w-[120px] text-gray-700 dark:text-gray-300">{file.name}</span>
<span className="text-xs text-gray-400 flex-shrink-0"> <span className="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
({formatFileSize(file.size)}) ({formatFileSize(file.size)})
</span> </span>
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="icon" size="icon"
className="h-4 w-4 ml-0.5 rounded-full p-0 hover:bg-gray-700" className="h-4 w-4 ml-0.5 rounded-full p-0 hover:bg-gray-200 dark:hover:bg-gray-700"
onClick={() => removeUploadedFile(index)} onClick={() => removeUploadedFile(index)}
> >
<X className="h-3 w-3" /> <X className="h-3 w-3" />
@ -353,7 +353,7 @@ export function ChatInput({
</motion.div> </motion.div>
))} ))}
</div> </div>
<div className="h-px bg-gray-800 my-2 mx-1" /> <div className="h-px bg-gray-200 dark:bg-gray-800 my-2 mx-1" />
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
@ -371,7 +371,7 @@ export function ChatInput({
: placeholder : placeholder
} }
className={cn( className={cn(
"min-h-[50px] py-3 px-4 text-gray-200 resize-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent w-full text-base", "min-h-[50px] py-3 px-4 text-gray-700 dark:text-gray-200 resize-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent w-full text-base",
isDraggingOver ? "opacity-20" : "" isDraggingOver ? "opacity-20" : ""
)} )}
disabled={loading || (disabled && !isAgentRunning)} disabled={loading || (disabled && !isAgentRunning)}
@ -390,7 +390,7 @@ export function ChatInput({
variant="ghost" variant="ghost"
size="icon" size="icon"
className={cn( className={cn(
"h-8 w-8 rounded-full p-0 hover:bg-gray-800", "h-8 w-8 rounded-full p-0 hover:bg-gray-100 dark:hover:bg-gray-800",
selectedModel === "sonnet-3.7" ? "text-purple-400" : selectedModel === "sonnet-3.7" ? "text-purple-400" :
selectedModel === "sonnet-3.7-thinking" ? "text-violet-400" : selectedModel === "sonnet-3.7-thinking" ? "text-violet-400" :
selectedModel === "gpt-4.1" ? "text-green-400" : selectedModel === "gpt-4.1" ? "text-green-400" :
@ -402,30 +402,30 @@ export function ChatInput({
<Cpu className="h-5 w-5" /> <Cpu className="h-5 w-5" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start" className="bg-gray-900 border-gray-800 text-gray-300"> <DropdownMenuContent align="start" className="bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300">
<DropdownMenuItem onClick={() => handleModelChange("sonnet-3.7")} className={cn( <DropdownMenuItem onClick={() => handleModelChange("sonnet-3.7")} className={cn(
"hover:bg-gray-800 flex items-center justify-between", "hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between",
selectedModel === "sonnet-3.7" && "text-purple-400" selectedModel === "sonnet-3.7" && "text-purple-400"
)}> )}>
<span>Sonnet 3.7</span> <span>Sonnet 3.7</span>
{selectedModel === "sonnet-3.7" && <span className="ml-2">✓</span>} {selectedModel === "sonnet-3.7" && <span className="ml-2">✓</span>}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => handleModelChange("sonnet-3.7-thinking")} className={cn( <DropdownMenuItem onClick={() => handleModelChange("sonnet-3.7-thinking")} className={cn(
"hover:bg-gray-800 flex items-center justify-between", "hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between",
selectedModel === "sonnet-3.7-thinking" && "text-violet-400" selectedModel === "sonnet-3.7-thinking" && "text-violet-400"
)}> )}>
<span>Sonnet 3.7 (Thinking)</span> <span>Sonnet 3.7 (Thinking)</span>
{selectedModel === "sonnet-3.7-thinking" && <span className="ml-2">✓</span>} {selectedModel === "sonnet-3.7-thinking" && <span className="ml-2">✓</span>}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => handleModelChange("gpt-4.1")} className={cn( <DropdownMenuItem onClick={() => handleModelChange("gpt-4.1")} className={cn(
"hover:bg-gray-800 flex items-center justify-between", "hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between",
selectedModel === "gpt-4.1" && "text-green-400" selectedModel === "gpt-4.1" && "text-green-400"
)}> )}>
<span>GPT-4.1</span> <span>GPT-4.1</span>
{selectedModel === "gpt-4.1" && <span className="ml-2">✓</span>} {selectedModel === "gpt-4.1" && <span className="ml-2">✓</span>}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => handleModelChange("gemini-flash-2.5")} className={cn( <DropdownMenuItem onClick={() => handleModelChange("gemini-flash-2.5")} className={cn(
"hover:bg-gray-800 flex items-center justify-between", "hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-between",
selectedModel === "gemini-flash-2.5" && "text-blue-400" selectedModel === "gemini-flash-2.5" && "text-blue-400"
)}> )}>
<span>Gemini Flash 2.5</span> <span>Gemini Flash 2.5</span>
@ -434,7 +434,7 @@ export function ChatInput({
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top" className="bg-gray-900 text-gray-300 border-gray-800"> <TooltipContent side="top" className="bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-800">
<p>Model: {modelDisplayNames[selectedModel as keyof typeof modelDisplayNames] || selectedModel}</p> <p>Model: {modelDisplayNames[selectedModel as keyof typeof modelDisplayNames] || selectedModel}</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
@ -450,7 +450,7 @@ export function ChatInput({
variant="ghost" variant="ghost"
size="icon" size="icon"
className={cn( className={cn(
"h-8 w-8 rounded-full p-0 text-gray-400 hover:bg-gray-800", "h-8 w-8 rounded-full p-0 text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
isUploading && "text-blue-400" isUploading && "text-blue-400"
)} )}
disabled={loading || (disabled && !isAgentRunning) || isUploading} disabled={loading || (disabled && !isAgentRunning) || isUploading}
@ -463,7 +463,7 @@ export function ChatInput({
)} )}
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top" className="bg-gray-900 text-gray-300 border-gray-800"> <TooltipContent side="top" className="bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-800">
<p>Attach files</p> <p>Attach files</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
@ -487,7 +487,7 @@ export function ChatInput({
size="icon" size="icon"
className={cn( className={cn(
"h-10 w-10 rounded-full", "h-10 w-10 rounded-full",
!isAgentRunning && "bg-gray-700 hover:bg-gray-600 text-gray-200", !isAgentRunning && "bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200",
isAgentRunning && "bg-red-600 hover:bg-red-700" isAgentRunning && "bg-red-600 hover:bg-red-700"
)} )}
disabled={((!inputValue.trim() && uploadedFiles.length === 0) && !isAgentRunning) || loading || (disabled && !isAgentRunning)} disabled={((!inputValue.trim() && uploadedFiles.length === 0) && !isAgentRunning) || loading || (disabled && !isAgentRunning)}
@ -502,7 +502,7 @@ export function ChatInput({
)} )}
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent side="top" className="bg-gray-900 text-gray-300 border-gray-800"> <TooltipContent side="top" className="bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-800">
<p>{isAgentRunning ? 'Stop agent' : 'Send message'}</p> <p>{isAgentRunning ? 'Stop agent' : 'Send message'}</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
@ -514,15 +514,15 @@ export function ChatInput({
<motion.div <motion.div
initial={{ opacity: 0, y: -10 }} initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
className="py-2 px-3 flex items-center justify-center bg-gray-800 border-t border-gray-700 rounded-b-xl" className="py-2 px-3 flex items-center justify-center bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 rounded-b-xl"
> >
<div className="text-xs text-gray-400 flex items-center gap-2"> <div className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-2">
<span className="inline-flex items-center"> <span className="inline-flex items-center">
<Loader2 className="h-3 w-3 animate-spin mr-1.5" /> <Loader2 className="h-3 w-3 animate-spin mr-1.5" />
Agent is thinking... Agent is thinking...
</span> </span>
<span className="text-gray-500 border-l border-gray-700 pl-2"> <span className="text-gray-400 dark:text-gray-500 border-l border-gray-300 dark:border-gray-700 pl-2">
Press <kbd className="inline-flex items-center justify-center p-0.5 mx-1 bg-gray-700 border border-gray-600 rounded text-xs"><Square className="h-2.5 w-2.5" /></kbd> to stop Press <kbd className="inline-flex items-center justify-center p-0.5 mx-1 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded text-xs"><Square className="h-2.5 w-2.5" /></kbd> to stop
</span> </span>
</div> </div>
</motion.div> </motion.div>