bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): tokenize chat control colors

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 20:44:47 -07:00
parent a77c762bd2
commit 373a72e823
1 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/src/components/ChatControl.tsx
View File

@ -89,38 +89,38 @@ export const normalizeProfileForApply = (profileData: any) => ({
const RobotIcon = ({ size = 32 }: { size?: number }) => ( const RobotIcon = ({ size = 32 }: { size?: number }) => (
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Antenna */} {/* Antenna */}
<line x1="32" y1="6" x2="32" y2="14" stroke="#00ff88" strokeWidth="2.5" strokeLinecap="round" /> <line x1="32" y1="6" x2="32" y2="14" stroke="var(--bl-success)" strokeWidth="2.5" strokeLinecap="round" />
<circle cx="32" cy="5" r="3" fill="#00ff88" opacity="0.9"> <circle cx="32" cy="5" r="3" fill="var(--bl-success)" opacity="0.9">
<animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" /> <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
</circle> </circle>
{/* Head */} {/* Head */}
<rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1.5" opacity="0.95" /> <rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1.5" opacity="0.95" />
{/* Eyes */} {/* Eyes */}
<circle cx="24" cy="28" r="4.5" fill="#0a0b10" /> <circle cx="24" cy="28" r="4.5" fill="var(--background)" />
<circle cx="24" cy="28" r="3" fill="#00ff88" opacity="0.9"> <circle cx="24" cy="28" r="3" fill="var(--bl-success)" opacity="0.9">
<animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" /> <animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
</circle> </circle>
<circle cx="40" cy="28" r="4.5" fill="#0a0b10" /> <circle cx="40" cy="28" r="4.5" fill="var(--background)" />
<circle cx="40" cy="28" r="3" fill="#00ff88" opacity="0.9"> <circle cx="40" cy="28" r="3" fill="var(--bl-success)" opacity="0.9">
<animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" /> <animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
</circle> </circle>
{/* Mouth */} {/* Mouth */}
<rect x="24" y="35" width="16" height="3" rx="1.5" fill="#00ff88" opacity="0.4" /> <rect x="24" y="35" width="16" height="3" rx="1.5" fill="var(--bl-success)" opacity="0.4" />
{/* Body */} {/* Body */}
<rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.8" /> <rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.8" />
{/* Body detail */} {/* Body detail */}
<circle cx="32" cy="51" r="3" fill="#00ff88" opacity="0.3" /> <circle cx="32" cy="51" r="3" fill="var(--bl-success)" opacity="0.3" />
{/* Arms */} {/* Arms */}
<rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" /> <rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.7" />
<rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" /> <rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.7" />
<defs> <defs>
<linearGradient id="headGrad" x1="14" y1="14" x2="50" y2="42" gradientUnits="userSpaceOnUse"> <linearGradient id="headGrad" x1="14" y1="14" x2="50" y2="42" gradientUnits="userSpaceOnUse">
<stop stopColor="#1a1b2e" /> <stop stopColor="var(--card-elevated)" />
<stop offset="1" stopColor="#12131a" /> <stop offset="1" stopColor="var(--card)" />
</linearGradient> </linearGradient>
<linearGradient id="bodyGrad" x1="18" y1="44" x2="46" y2="58" gradientUnits="userSpaceOnUse"> <linearGradient id="bodyGrad" x1="18" y1="44" x2="46" y2="58" gradientUnits="userSpaceOnUse">
<stop stopColor="#1a1b2e" /> <stop stopColor="var(--card-elevated)" />
<stop offset="1" stopColor="#0f1017" /> <stop offset="1" stopColor="var(--background)" />
</linearGradient> </linearGradient>
</defs> </defs>
</svg> </svg>
@ -310,7 +310,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
const panelStyle: React.CSSProperties = { const panelStyle: React.CSSProperties = {
background: 'var(--card)', background: 'var(--card)',
border: '1px solid var(--border)', border: '1px solid var(--border)',
boxShadow: '0 25px 80px rgba(0,0,0,0.22)', boxShadow: 'var(--card-shadow)',
}; };
const inputStyle: React.CSSProperties = { const inputStyle: React.CSSProperties = {
background: 'var(--input)', background: 'var(--input)',
@ -361,7 +361,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
justifyContent: 'center', justifyContent: 'center',
background: 'var(--card)', background: 'var(--card)',
border: '1.5px solid var(--border)', border: '1.5px solid var(--border)',
boxShadow: '0 8px 32px rgba(0,0,0,0.18), 0 0 20px color-mix(in oklab, var(--ring) 16%, transparent)', boxShadow: 'var(--card-shadow), 0 0 20px color-mix(in oklab, var(--ring) 16%, transparent)',
transition: 'transform 0.2s', transition: 'transform 0.2s',
}}> }}>
<RobotIcon size={34} /> <RobotIcon size={34} />
@ -404,7 +404,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
position: 'fixed', position: 'fixed',
inset: 0, inset: 0,
zIndex: 999998, zIndex: 999998,
background: 'rgba(15, 23, 42, 0.45)', background: 'color-mix(in oklab, var(--background) 45%, transparent)',
backdropFilter: 'blur(6px)', backdropFilter: 'blur(6px)',
animation: 'fadeIn 0.15s ease-out', animation: 'fadeIn 0.15s ease-out',
}} }}
@ -438,7 +438,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{
background: 'var(--card)', background: 'var(--card)',
border: '1px solid var(--border)', border: '1px solid var(--border)',
boxShadow: '0 2px 8px rgba(0,0,0,0.08)', boxShadow: 'var(--card-shadow)',
}}> }}>
<RobotIcon size={26} /> <RobotIcon size={26} />
</div> </div>
@ -478,10 +478,10 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
<div className={`max-w-[85%] ${msg.role === 'user' ? 'text-right' : ''}`}> <div className={`max-w-[85%] ${msg.role === 'user' ? 'text-right' : ''}`}>
<div className="rounded-xl px-3.5 py-2.5 text-[12px] leading-relaxed" style={{ <div className="rounded-xl px-3.5 py-2.5 text-[12px] leading-relaxed" style={{
background: msg.role === 'user' background: msg.role === 'user'
? 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08))' ? 'linear-gradient(135deg, var(--bl-info-muted), color-mix(in oklab, var(--bl-info) 8%, transparent))'
: 'var(--card)', : 'var(--card)',
border: `1px solid ${msg.role === 'user' ? 'rgba(59,130,246,0.2)' : 'var(--border)'}`, border: `1px solid ${msg.role === 'user' ? 'var(--bl-info-border, var(--bl-info))' : 'var(--border)'}`,
color: msg.role === 'user' ? '#93c5fd' : 'var(--foreground)', color: msg.role === 'user' ? 'var(--bl-info)' : 'var(--foreground)',
whiteSpace: 'pre-wrap', whiteSpace: 'pre-wrap',
}}> }}>
{msg.content} {msg.content}
@ -499,7 +499,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
<div className="mt-2 rounded-xl overflow-hidden" style={{ <div className="mt-2 rounded-xl overflow-hidden" style={{
background: 'var(--card-elevated)', background: 'var(--card-elevated)',
border: '1px solid var(--border)', border: '1px solid var(--border)',
boxShadow: '0 2px 8px rgba(0,0,0,0.08)', boxShadow: 'var(--card-shadow)',
}}> }}>
<div className="px-3.5 py-2 flex items-center justify-between" style={{ <div className="px-3.5 py-2 flex items-center justify-between" style={{
background: 'var(--accent-soft)', background: 'var(--accent-soft)',
@ -642,7 +642,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
variant="ghost" variant="ghost"
className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]" className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
style={{ style={{
color: '#fbbf24', color: 'var(--bl-warning)',
borderRight: '1px solid var(--border)', borderRight: '1px solid var(--border)',
}} }}
> >