lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve canvas chat dark mode
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-04-24 16:49:02 +08:00
parent 5b7d6a6e89
commit f9b6cfdc0d
1 changed files with 87 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
components/canvas/CanvasChatPanel.tsx
View File

@ -9018,7 +9018,7 @@ export function CanvasChatPanel({
"w-[238px] max-h-[340px] overflow-hidden p-1.5",
isVideoWorkspace
? "rounded-[18px] border border-border/60 bg-background/95 shadow-[0_18px_40px_-24px_rgba(15,23,42,0.35)] backdrop-blur-xl"
: "rounded-[18px] border border-[#cfd4dc] bg-[#f3f4f6]/90 shadow-[0_8px_20px_rgba(15,23,42,0.13)]"
: "rounded-[18px] border border-[#cfd4dc] bg-[#f3f4f6]/90 shadow-[0_8px_20px_rgba(15,23,42,0.13)] dark:border-white/10 dark:bg-zinc-900/95"
)}
>
<div className="max-h-[312px] space-y-0.5 overflow-y-auto pr-1">
@ -9030,7 +9030,7 @@ export function CanvasChatPanel({
"h-[34px] rounded-xl px-2.5 [&>span:first-child]:hidden [&>span:last-child]:block [&>span:last-child]:w-full",
isVideoWorkspace
? "text-foreground focus:bg-background focus:text-foreground data-[state=checked]:bg-background data-[state=checked]:text-foreground"
: "text-[#2f3640] focus:bg-[#e7ebf0] focus:text-[#1f2937] data-[state=checked]:bg-[#e7ebf0] data-[state=checked]:text-[#1f2937]"
: "text-[#2f3640] focus:bg-[#e7ebf0] focus:text-[#1f2937] data-[state=checked]:bg-[#e7ebf0] data-[state=checked]:text-[#1f2937] dark:text-zinc-100 dark:focus:bg-white/10 dark:focus:text-white dark:data-[state=checked]:bg-white/10 dark:data-[state=checked]:text-white"
)}
>
<span className="flex w-full items-center justify-between gap-2">
@ -9040,7 +9040,7 @@ export function CanvasChatPanel({
"h-5 w-5 overflow-hidden rounded-full",
isVideoWorkspace
? "border border-border/60 bg-background"
: "border border-[#d4d9df] bg-white"
: "border border-[#d4d9df] bg-white dark:border-white/10 dark:bg-white/10"
)}
>
{model.avatarUrl ? (
@ -9473,9 +9473,9 @@ export function CanvasChatPanel({
</div>
{canvasSkillTags.length > 0 && (
<div className="mb-8 rounded-3xl border border-[#eceef2] bg-white/90 p-4">
<div className="mb-8 rounded-3xl border border-[#eceef2] bg-white/90 p-4 dark:border-white/10 dark:bg-zinc-900/75">
<div className="mb-3 text-center">
<h3 className="text-[16px] font-semibold text-[#1f2937]">{canvasSkillTagsTitle}</h3>
<h3 className="text-[16px] font-semibold text-[#1f2937] dark:text-zinc-100">{canvasSkillTagsTitle}</h3>
</div>
<div className="grid grid-cols-3 gap-2">
{canvasSkillTags.map((tag) => {
@ -9493,8 +9493,8 @@ export function CanvasChatPanel({
className={cn(
"inline-flex min-w-0 items-center justify-center gap-1.5 rounded-2xl border px-2 py-1.5 text-[13px] font-medium transition-colors",
isActive
? "border-[#6d7fff] bg-[#eef1ff] text-[#3341a9]"
: "border-[#e4e7ec] bg-white text-[#30343b] hover:border-[#d6dae3] hover:bg-[#fafbfc]"
? "border-[#6d7fff] bg-[#eef1ff] text-[#3341a9] dark:border-blue-400/40 dark:bg-blue-500/15 dark:text-blue-200"
: "border-[#e4e7ec] bg-white text-[#30343b] hover:border-[#d6dae3] hover:bg-[#fafbfc] dark:border-white/10 dark:bg-white/5 dark:text-zinc-200 dark:hover:border-white/20 dark:hover:bg-white/10"
)}
>
{tag.iconUrl ? (
@ -9790,7 +9790,7 @@ export function CanvasChatPanel({
? renderPlainText(analysisSection.before, `before-${i}`)
: null}
<Collapsible
className="my-2 rounded-[20px] bg-[#f4f5f7] px-5 py-4"
className="my-2 rounded-[20px] bg-[#f4f5f7] px-5 py-4 ring-1 ring-black/5 dark:bg-zinc-900/70 dark:ring-white/10"
open={analysisOpen}
onOpenChange={(open) =>
setAnalysisCollapseState((prev) => ({
@ -9801,7 +9801,7 @@ export function CanvasChatPanel({
>
<CollapsibleTrigger className="flex w-full items-center justify-between gap-3 text-left">
<span className="inline-flex items-center gap-2">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white text-[#9aa1ad] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.42)]">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white text-[#9aa1ad] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.42)] dark:bg-white/10 dark:text-zinc-300 dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.12)]">
<svg
viewBox="0 0 24 24"
fill="currentColor"
@ -9813,20 +9813,20 @@ export function CanvasChatPanel({
/>
</svg>
</span>
<span className="text-base font-semibold tracking-tight text-[#9aa1ad]">
<span className="text-base font-semibold tracking-tight text-[#9aa1ad] dark:text-zinc-300">
图片分析
</span>
</span>
<ChevronDown
className={cn(
"h-4 w-4 text-[#9aa1ad] transition-transform duration-200",
"h-4 w-4 text-[#9aa1ad] transition-transform duration-200 dark:text-zinc-400",
analysisOpen ? "rotate-180" : "rotate-0"
)}
/>
</CollapsibleTrigger>
<CollapsibleContent
className={cn(
"pt-3 text-[15px] font-medium leading-7 text-[#2f3640]",
"pt-3 text-[15px] font-medium leading-7 text-[#2f3640] dark:text-zinc-200",
"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",
"outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in"
)}
@ -9916,7 +9916,7 @@ export function CanvasChatPanel({
))}
</div>
{shouldShowDoneSummary ? (
<p className="text-[14px] font-medium leading-6 text-[#2f3640]">
<p className="text-[14px] font-medium leading-6 text-[#2f3640] dark:text-zinc-300">
{CANVAS_IMAGE_DONE_SUMMARY}
</p>
) : null}
@ -9927,7 +9927,7 @@ export function CanvasChatPanel({
{videoUrls.map((url, idx) => (
<div
key={`video-${idx}`}
className="overflow-hidden rounded-2xl border border-black/10 bg-black/5 p-2"
className="overflow-hidden rounded-2xl border border-black/10 bg-black/5 p-2 dark:border-white/10 dark:bg-white/5"
>
<video
src={url}
@ -9939,7 +9939,7 @@ export function CanvasChatPanel({
href={url}
target="_blank"
rel="noreferrer"
className="mt-2 inline-flex text-xs text-blue-600 hover:underline"
className="mt-2 inline-flex text-xs text-blue-600 hover:underline dark:text-blue-300"
>
下载视频
</a>
@ -9966,8 +9966,9 @@ export function CanvasChatPanel({
<button
type="button"
className={cn(
"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/5",
currentVote?.isUpvoted && "text-[#22a06b] bg-emerald-50/80"
"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/5 dark:hover:bg-white/8",
currentVote?.isUpvoted &&
"bg-emerald-50/80 text-[#22a06b] dark:bg-emerald-500/15 dark:text-emerald-300"
)}
title="点赞"
disabled={isVotingCurrentMessage}
@ -9978,8 +9979,10 @@ export function CanvasChatPanel({
<button
type="button"
className={cn(
"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/5",
currentVote && !currentVote.isUpvoted && "text-[#d94848] bg-rose-50/80"
"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/5 dark:hover:bg-white/8",
currentVote &&
!currentVote.isUpvoted &&
"bg-rose-50/80 text-[#d94848] dark:bg-rose-500/15 dark:text-rose-300"
)}
title="点踩"
disabled={isVotingCurrentMessage}
@ -10111,7 +10114,7 @@ export function CanvasChatPanel({
{isDetailGenerationMode && (
<div
className={cn(
"order-3 mx-3 mb-11 overflow-y-auto rounded-2xl border border-black/10 bg-white p-3 pr-2",
"order-3 mx-3 mb-11 overflow-y-auto rounded-2xl border border-black/10 bg-white p-3 pr-2 dark:border-white/10 dark:bg-zinc-950/85",
"mt-1",
renderableVisibleMessages.length === 0 ? "max-h-[62vh]" : "max-h-[54vh]"
)}
@ -10252,8 +10255,8 @@ export function CanvasChatPanel({
"rounded-lg border px-3 py-2 text-left transition-all duration-150",
isDetailGenerating && "cursor-not-allowed opacity-60",
selected
? "border-[#5b7cff] bg-[#eef3ff] text-[#2f57d8] shadow-[0_0_0_1px_rgba(91,124,255,0.28)]"
: "border-border/60 bg-background text-muted-foreground hover:border-[#9fb3ff] hover:bg-[#f8faff] hover:text-foreground"
? "border-[#5b7cff] bg-[#eef3ff] text-[#2f57d8] shadow-[0_0_0_1px_rgba(91,124,255,0.28)] dark:border-[#8ea2ff] dark:bg-[#23305f]/60 dark:text-[#dbe4ff]"
: "border-border/60 bg-background text-muted-foreground hover:border-[#9fb3ff] hover:bg-[#f8faff] hover:text-foreground dark:border-white/10 dark:bg-white/5 dark:text-zinc-300 dark:hover:border-[#8ea2ff]/70 dark:hover:bg-[#23305f]/40 dark:hover:text-zinc-50"
)}
aria-pressed={selected}
>
@ -10862,7 +10865,7 @@ export function CanvasChatPanel({
<div className="mb-2 flex">
<button
type="button"
className="inline-flex items-center gap-2 rounded-full bg-[#f3f4f6] px-3 py-1.5 text-sm font-medium text-[#4b5563] transition-colors hover:bg-[#e9ebef]"
className="inline-flex items-center gap-2 rounded-full bg-[#f3f4f6] px-3 py-1.5 text-sm font-medium text-[#4b5563] transition-colors hover:bg-[#e9ebef] dark:bg-white/8 dark:text-zinc-200 dark:hover:bg-white/12"
onClick={() => setSelectedSkillTagId(null)}
title="点击移除标签"
>
@ -10875,10 +10878,10 @@ export function CanvasChatPanel({
decoding="async"
/>
) : (
<SelectedSkillTagIcon className="h-4 w-4 text-[#8b5cf6]" />
<SelectedSkillTagIcon className="h-4 w-4 text-[#8b5cf6] dark:text-violet-300" />
)}
<span>{selectedSkillTag.name}</span>
<X className="h-3.5 w-3.5 text-[#9ca3af]" />
<X className="h-3.5 w-3.5 text-[#9ca3af] dark:text-zinc-400" />
</button>
</div>
)}
@ -10888,19 +10891,19 @@ export function CanvasChatPanel({
"mb-2 rounded-2xl px-3 py-2",
isVideoWorkspace
? "border border-border/60 bg-background/72 shadow-sm"
: "border border-[#dbe3ff] bg-[#f6f8ff]"
: "border border-[#dbe3ff] bg-[#f6f8ff] dark:border-blue-400/20 dark:bg-blue-500/10"
)}
>
<div
className={cn(
"flex items-center gap-2 text-sm font-medium",
isVideoWorkspace ? "text-foreground" : "text-[#334155]"
isVideoWorkspace ? "text-foreground" : "text-[#334155] dark:text-zinc-100"
)}
>
<Sparkles
className={cn(
"h-4 w-4",
isVideoWorkspace ? "text-primary" : "text-[#4f46e5]"
isVideoWorkspace ? "text-primary" : "text-[#4f46e5] dark:text-blue-300"
)}
/>
<span>当前工作流设定</span>
@ -10908,7 +10911,7 @@ export function CanvasChatPanel({
<div
className={cn(
"mt-1 text-xs leading-5",
isVideoWorkspace ? "text-muted-foreground" : "text-[#5b6472]"
isVideoWorkspace ? "text-muted-foreground" : "text-[#5b6472] dark:text-zinc-300"
)}
>
{workflowContext.summaryText}
@ -10963,8 +10966,8 @@ export function CanvasChatPanel({
className={cn(
"inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
!isPresetAgentSelection
? "bg-[#eef2ff] text-[#4338ca]"
: "bg-[#f4f5f7] text-[#5b6472] hover:bg-[#eceef2]"
? "bg-[#eef2ff] text-[#4338ca] dark:bg-blue-500/15 dark:text-blue-200"
: "bg-[#f4f5f7] text-[#5b6472] hover:bg-[#eceef2] dark:bg-white/8 dark:text-zinc-300 dark:hover:bg-white/12"
)}
>
<Sparkles className="h-4 w-4" />
@ -10976,8 +10979,8 @@ export function CanvasChatPanel({
className={cn(
"inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
isPresetAgentSelection
? "bg-[#eef2ff] text-[#4338ca]"
: "bg-[#f4f5f7] text-[#5b6472] hover:bg-[#eceef2]"
? "bg-[#eef2ff] text-[#4338ca] dark:bg-blue-500/15 dark:text-blue-200"
: "bg-[#f4f5f7] text-[#5b6472] hover:bg-[#eceef2] dark:bg-white/8 dark:text-zinc-300 dark:hover:bg-white/12"
)}
>
<Sparkles className="h-4 w-4" />
@ -10985,21 +10988,21 @@ export function CanvasChatPanel({
</button>
</>
) : (
<div className="inline-flex items-center gap-2 rounded-full bg-[#eef2ff] px-3 py-1.5 text-sm font-medium text-[#4338ca]">
<div className="inline-flex items-center gap-2 rounded-full bg-[#eef2ff] px-3 py-1.5 text-sm font-medium text-[#4338ca] dark:bg-blue-500/15 dark:text-blue-200">
<Sparkles className="h-4 w-4" />
<span>Auto Agent</span>
</div>
)}
{!isPresetAgentSelection ? (
<div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472]">
<div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472] dark:bg-white/8 dark:text-zinc-300">
直接对话即可，也可上传图片让我分析、修图或继续生成
</div>
) : selectedAgentPreset?.type === "text" ? (
<div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472]">
<div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472] dark:bg-white/8 dark:text-zinc-300">
可上传图片做分析，也可直接输入文案需求
</div>
) : hasAgentUploadSlots ? (
<div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472]">
<div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472] dark:bg-white/8 dark:text-zinc-300">
{isWorkspacePresentation ? "请确认产品图1、产品图2、模特图槽位" : "请上传产品图1、产品图2、模特图"}
</div>
) : null}
@ -11010,10 +11013,10 @@ export function CanvasChatPanel({
className={cn(
"mb-2 rounded-2xl border px-3 py-3 shadow-sm",
activeAgentProgress.stage === "failed"
? "border-rose-200 bg-rose-50/80"
? "border-rose-200 bg-rose-50/80 dark:border-rose-500/25 dark:bg-rose-500/10"
: activeAgentProgress.stage === "clarify"
? "border-amber-200 bg-amber-50/80"
: "border-sky-200 bg-sky-50/75"
? "border-amber-200 bg-amber-50/80 dark:border-amber-500/25 dark:bg-amber-500/10"
: "border-sky-200 bg-sky-50/75 dark:border-sky-500/25 dark:bg-sky-500/10"
)}
>
<div className="flex items-start gap-3">
@ -11021,10 +11024,10 @@ export function CanvasChatPanel({
className={cn(
"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl",
activeAgentProgress.stage === "failed"
? "bg-rose-100 text-rose-700"
? "bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300"
: activeAgentProgress.stage === "clarify"
? "bg-amber-100 text-amber-700"
: "bg-sky-100 text-sky-700"
? "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
: "bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300"
)}
>
{activeAgentProgress.stage === "failed" ? (
@ -11039,16 +11042,16 @@ export function CanvasChatPanel({
</span>
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-center gap-2">
<span className="text-sm font-medium text-[#243041]">
<span className="text-sm font-medium text-[#243041] dark:text-zinc-100">
{agentProgressTitle}
</span>
<span className="inline-flex items-center rounded-full bg-white/70 px-2 py-0.5 text-[11px] text-[#5b6472]">
<span className="inline-flex items-center rounded-full bg-white/70 px-2 py-0.5 text-[11px] text-[#5b6472] dark:bg-white/10 dark:text-zinc-300">
{AGENT_PROGRESS_STEPS.find(
(step) => step.key === activeAgentProgress.currentStep
)?.label || "处理中"}
</span>
</div>
<div className="mt-1 text-xs leading-5 text-[#5b6472]">
<div className="mt-1 text-xs leading-5 text-[#5b6472] dark:text-zinc-300">
{agentProgressMessage}
</div>
<div className="mt-3 grid grid-cols-5 gap-2">
@ -11058,12 +11061,12 @@ export function CanvasChatPanel({
className={cn(
"rounded-xl border px-2 py-2 text-center",
step.state === "completed"
? "border-emerald-200 bg-emerald-50/80"
? "border-emerald-200 bg-emerald-50/80 dark:border-emerald-500/25 dark:bg-emerald-500/10"
: step.state === "current"
? "border-sky-200 bg-white/90"
? "border-sky-200 bg-white/90 dark:border-sky-500/25 dark:bg-sky-500/10"
: step.state === "failed"
? "border-rose-200 bg-rose-50/80"
: "border-white/70 bg-white/55"
? "border-rose-200 bg-rose-50/80 dark:border-rose-500/25 dark:bg-rose-500/10"
: "border-white/70 bg-white/55 dark:border-white/10 dark:bg-white/5"
)}
>
<div className="flex items-center justify-center">
@ -11074,10 +11077,10 @@ export function CanvasChatPanel({
) : step.state === "current" ? (
<Loader2 className="h-3.5 w-3.5 animate-spin text-sky-600" />
) : (
<span className="h-2.5 w-2.5 rounded-full bg-[#cbd5e1]" />
<span className="h-2.5 w-2.5 rounded-full bg-[#cbd5e1] dark:bg-zinc-600" />
)}
</div>
<div className="mt-1 text-[10px] font-medium leading-4 text-[#52606d]">
<div className="mt-1 text-[10px] font-medium leading-4 text-[#52606d] dark:text-zinc-300">
{step.label}
</div>
</div>
@ -11092,8 +11095,8 @@ export function CanvasChatPanel({
className={cn(
"mb-2 rounded-2xl border px-3 py-3 shadow-sm",
activeAgentTargetLock.stage === "clarify"
? "border-amber-200 bg-amber-50/80"
: "border-[#dbe3ff] bg-[#f6f8ff]"
? "border-amber-200 bg-amber-50/80 dark:border-amber-500/25 dark:bg-amber-500/10"
: "border-[#dbe3ff] bg-[#f6f8ff] dark:border-blue-500/25 dark:bg-blue-500/10"
)}
>
<div className="flex items-start gap-3">
@ -11101,8 +11104,8 @@ export function CanvasChatPanel({
className={cn(
"mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl",
activeAgentTargetLock.stage === "clarify"
? "bg-amber-100 text-amber-700"
: "bg-[#e8eeff] text-[#4f46e5]"
? "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
: "bg-[#e8eeff] text-[#4f46e5] dark:bg-blue-500/15 dark:text-blue-300"
)}
>
{activeAgentTargetLock.stage === "clarify" ? (
@ -11115,14 +11118,14 @@ export function CanvasChatPanel({
</span>
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-center gap-2">
<span className="text-sm font-medium text-[#243041]">
<span className="text-sm font-medium text-[#243041] dark:text-zinc-100">
{agentTargetLockTitle}
</span>
<span className="inline-flex items-center rounded-full bg-white/70 px-2 py-0.5 text-[11px] text-[#5b6472]">
<span className="inline-flex items-center rounded-full bg-white/70 px-2 py-0.5 text-[11px] text-[#5b6472] dark:bg-white/10 dark:text-zinc-300">
{agentTargetResolutionLabel}
</span>
{Number(activeAgentTargetLock.confidence || 0) > 0 ? (
<span className="text-[11px] text-[#6b7280]">
<span className="text-[11px] text-[#6b7280] dark:text-zinc-400">
置信度 {Math.max(0, Math.round(Number(activeAgentTargetLock.confidence || 0)))}%
</span>
) : null}
@ -11131,14 +11134,14 @@ export function CanvasChatPanel({
className={cn(
"mt-1 whitespace-pre-wrap text-xs leading-5",
activeAgentTargetLock.stage === "clarify"
? "text-[#8a5a14]"
: "text-[#5b6472]"
? "text-[#8a5a14] dark:text-amber-200"
: "text-[#5b6472] dark:text-zinc-300"
)}
>
{agentTargetLockPrimaryMessage}
</div>
{agentTargetLockSecondaryMessage ? (
<div className="mt-1 text-[11px] leading-5 text-[#6b7280]">
<div className="mt-1 text-[11px] leading-5 text-[#6b7280] dark:text-zinc-400">
系统依据：{agentTargetLockSecondaryMessage}
</div>
) : null}
@ -11156,7 +11159,7 @@ export function CanvasChatPanel({
: item.positionLabel || `第${index + 1}张`
}
>
<div className="overflow-hidden rounded-xl border border-white/70 bg-white shadow-sm">
<div className="overflow-hidden rounded-xl border border-white/70 bg-white shadow-sm dark:border-white/10 dark:bg-white/5">
<img
src={buildPreviewImageUrl(item.url, 160)}
alt={item.title || item.positionLabel || `目标图 ${index + 1}`}
@ -11446,12 +11449,12 @@ export function CanvasChatPanel({
isVideoWorkspace
? "border border-border/60 bg-background text-foreground hover:bg-background/90"
: activeComposerMode === "video"
? "border border-blue-500 bg-blue-50 text-blue-600 hover:bg-blue-100"
? "border border-blue-500 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:border-blue-400/40 dark:bg-blue-500/15 dark:text-blue-200 dark:hover:bg-blue-500/20"
: activeComposerMode === "detail"
? "border border-violet-500 bg-violet-50 text-violet-700 hover:bg-violet-100"
? "border border-violet-500 bg-violet-50 text-violet-700 hover:bg-violet-100 dark:border-violet-400/40 dark:bg-violet-500/15 dark:text-violet-200 dark:hover:bg-violet-500/20"
: activeComposerMode === "image"
? "border border-purple-500 bg-purple-50 text-purple-700 hover:bg-purple-100"
: "border border-[#9eb3ff] bg-white text-zinc-700 hover:bg-zinc-50"
? "border border-purple-500 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:border-purple-400/40 dark:bg-purple-500/15 dark:text-purple-200 dark:hover:bg-purple-500/20"
: "border border-[#9eb3ff] bg-white text-zinc-700 hover:bg-zinc-50 dark:border-white/10 dark:bg-white/8 dark:text-zinc-200 dark:hover:bg-white/12"
)}
>
<span className="flex items-center">
@ -11496,7 +11499,7 @@ export function CanvasChatPanel({
"w-[156px] rounded-xl p-1.5",
isVideoWorkspace
? "border border-border/60 bg-background/95 shadow-[0_18px_36px_-24px_rgba(15,23,42,0.35)] backdrop-blur-xl"
: "border border-[#d6d9df] bg-[#f4f5f7]/90 shadow-[0_8px_18px_rgba(15,23,42,0.14)]"
: "border border-[#d6d9df] bg-[#f4f5f7]/90 shadow-[0_8px_18px_rgba(15,23,42,0.14)] dark:border-white/10 dark:bg-zinc-900/95"
)}
>
{effectiveAgentEnabled ? (
@ -11506,14 +11509,14 @@ export function CanvasChatPanel({
"h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium",
isVideoWorkspace
? "text-foreground"
: "text-[#2e3238]",
: "text-[#2e3238] dark:text-zinc-100",
activeComposerMode === "agent"
? isVideoWorkspace
? "bg-background"
: "bg-white/80"
: "bg-white/80 dark:bg-white/10"
: isVideoWorkspace
? "hover:bg-background/80"
: "hover:bg-white/70"
: "hover:bg-white/70 dark:hover:bg-white/8"
)}
>
<CanvasToolbarIcon
@ -11536,14 +11539,14 @@ export function CanvasChatPanel({
"h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium",
isVideoWorkspace
? "text-foreground"
: "text-[#2e3238]",
: "text-[#2e3238] dark:text-zinc-100",
activeComposerMode === "detail"
? isVideoWorkspace
? "bg-background"
: "bg-white/80"
: "bg-white/80 dark:bg-white/10"
: isVideoWorkspace
? "hover:bg-background/80"
: "hover:bg-white/70"
: "hover:bg-white/70 dark:hover:bg-white/8"
)}
>
<CanvasToolbarIcon
@ -11565,14 +11568,14 @@ export function CanvasChatPanel({
"h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium",
isVideoWorkspace
? "text-foreground"
: "text-[#2e3238]",
: "text-[#2e3238] dark:text-zinc-100",
activeComposerMode === "image"
? isVideoWorkspace
? "bg-background"
: "bg-white/80"
: "bg-white/80 dark:bg-white/10"
: isVideoWorkspace
? "hover:bg-background/80"
: "hover:bg-white/70"
: "hover:bg-white/70 dark:hover:bg-white/8"
)}
>
<CanvasToolbarIcon
@ -11593,14 +11596,14 @@ export function CanvasChatPanel({
"h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium",
isVideoWorkspace
? "text-foreground"
: "text-[#2e3238]",
: "text-[#2e3238] dark:text-zinc-100",
activeComposerMode === "video"
? isVideoWorkspace
? "bg-background"
: "bg-white/80"
: "bg-white/80 dark:bg-white/10"
: isVideoWorkspace
? "hover:bg-background/80"
: "hover:bg-white/70"
: "hover:bg-white/70 dark:hover:bg-white/8"
)}
>
<CanvasToolbarIcon
@ -11683,8 +11686,8 @@ export function CanvasChatPanel({
? "bg-primary/10 text-primary hover:bg-primary/12"
: "text-muted-foreground hover:bg-muted/70"
: deepThinkingEnabled
? "bg-[#eef4ff] text-[#3b5bcc] hover:bg-[#e5efff]"
: "text-[#6b7280] hover:bg-[#f4f6f8]"
? "bg-[#eef4ff] text-[#3b5bcc] hover:bg-[#e5efff] dark:bg-blue-500/15 dark:text-blue-200 dark:hover:bg-blue-500/20"
: "text-[#6b7280] hover:bg-[#f4f6f8] dark:text-zinc-400 dark:hover:bg-white/8"
)}
onClick={() => setDeepThinkingEnabled((prev) => !prev)}
disabled={isSubmitting}
@ -11723,14 +11726,14 @@ export function CanvasChatPanel({
"h-8 w-8 rounded-full p-0 justify-center [&>svg]:hidden",
isVideoWorkspace
? "border border-border/60 bg-background"
: "border border-[#cfd4dc] bg-white"
: "border border-[#cfd4dc] bg-white dark:border-white/10 dark:bg-white/8"
)}
title={getToolbarItem("chatModelSelector").label}
>
<span
className={cn(
"flex h-6 w-6 items-center justify-center overflow-hidden rounded-full",
isVideoWorkspace ? "bg-background" : "bg-white"
isVideoWorkspace ? "bg-background" : "bg-white dark:bg-transparent"
)}
>
{getToolbarItem("chatModelSelector").iconUrl ? (