refactoring

package.json

@@ -17,6 +17,7 @@
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "comlink": "^4.4.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "shadcn": "^3.6.2",
@@ -39,4 +40,4 @@
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"
   }
-}
+}

src/components/AgenticInterface.tsx

@@ -1,159 +1,38 @@
-import * as React from "react"
-import {
-    InputGroup,
-    InputGroupInput,
-    InputGroupButton
-} from "@/components/ui/input-group"
-import { IconSend, IconArrowRight, IconUser, IconRobot, IconVolume } from "@tabler/icons-react"
 import { useColorStore } from "@/store/useColorStore"
+import { useTranslator } from "@/hooks/useTranslator"
+import { ChatSidebar } from "./ChatSidebar"
+import { ColorVisualizer } from "./ColorVisualizer"
+import { ColorControlForm } from "./ColorControlForm"
+import type { Message } from "./MessageBubble"
 
-export function AgenticInterface() {
-    const { squareColor, setSquareColor } = useColorStore()
-    const [inputValue, setInputValue] = React.useState("")
-    const [isTranslating, setIsTranslating] = React.useState(false)
-    const workerRef = React.useRef<Worker | null>(null)
-
-    const [messages] = React.useState([
-        { id: 1, text: "Hi, how can I help you?", sender: "bot" },
-        { id: 2, text: "Change the square color to green", sender: "user" },
-    ])
-
-    React.useEffect(() => {
-        workerRef.current = new Worker(new URL('../worker.ts', import.meta.url), { type: 'module' })
-
-        workerRef.current.onmessage = (e) => {
-            if (e.data.status === 'complete') {
-                setSquareColor(e.data.output.trim().toLowerCase())
-                setIsTranslating(false)
-            }
-        }
-
-        return () => workerRef.current?.terminate()
-    }, [setSquareColor])
-
-    const handleColorUpdate = (e?: React.FormEvent) => {
-        e?.preventDefault()
-        if (inputValue.trim() && workerRef.current) {
-            setIsTranslating(true)
-            workerRef.current.postMessage({ text: inputValue.trim() })
-            setInputValue("")
-        }
-    }
+const MESSAGES: readonly Message[] = [
+  { id: 1, text: "Hi, how can I help you?", sender: "bot" },
+  { id: 2, text: "Change the square color to green", sender: "user" },
+]
 
-    return (
-        <div className="flex flex-col md:flex-row h-screen w-screen overflow-hidden bg-background text-foreground font-sans selection:bg-primary/30">
-            {/* Sidebar - Order 2 on mobile (bottom), Order 1 on desktop (left) */}
-            <aside className="order-2 md:order-1 w-full md:w-80 lg:w-96 flex flex-col border-t md:border-t-0 md:border-r border-border/50 bg-sidebar/50 backdrop-blur-md shrink-0 h-[45vh] md:h-full transition-all duration-300">
-                <header className="px-6 py-5 border-b border-border/50 flex items-center justify-between bg-transparent">
-                    <div className="flex items-center gap-3">
-                        <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
-                            <IconVolume size={18} />
-                        </div>
-                        <div>
-                            <h2 className="font-bold text-sm tracking-tight">ElevenLabs Agent</h2>
-                            <p className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold flex items-center gap-1">
-                                <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
-                                Online
-                            </p>
-                        </div>
-                    </div>
-                </header>
-
-                {/* Messages Area */}
-                <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-thin scrollbar-thumb-border">
-                    {messages.map((msg) => (
-                        <div
-                            key={msg.id}
-                            className={`flex flex-col ${msg.sender === "user" ? "items-end" : "items-start"}`}
-                        >
-                            <div
-                                className={`flex items-center gap-2 mb-1.5 px-1 ${msg.sender === "user" ? "flex-row-reverse" : "flex-row"}`}
-                            >
-                                <div className="w-5 h-5 rounded-full bg-muted flex items-center justify-center border border-border/50 overflow-hidden">
-                                    {msg.sender === "user" ? <IconUser size={12} /> : <IconRobot size={12} />}
-                                </div>
-                                <span className="text-[10px] uppercase font-bold tracking-tighter opacity-40">
-                                    {msg.sender === "user" ? "You" : "Assistant"}
-                                </span>
-                            </div>
-                            <div
-                                className={`max-w-[85%] px-4 py-3 rounded-2xl text-sm leading-relaxed ${msg.sender === "user"
-                                    ? "bg-primary text-primary-foreground rounded-tr-none shadow-lg shadow-primary/20"
-                                    : "bg-muted/80 backdrop-blur-sm text-foreground rounded-tl-none border border-border/50"
-                                    }`}
-                            >
-                                {msg.text}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-
-                {/* Sidebar Input Area */}
-                <footer className="p-6 border-t border-border/30">
-                    <InputGroup className="bg-background/80 h-12 shadow-sm border-border/50 focus-within:ring-primary/20 transition-all">
-                        <InputGroupInput
-                            placeholder="Write your message..."
-                            className="text-sm px-4"
-                        />
-                        <InputGroupButton size="xs" variant="ghost" className="mr-1 h-9 w-9 rounded-full hover:bg-primary hover:text-white transition-colors">
-                            <IconSend size={18} />
-                        </InputGroupButton>
-                    </InputGroup>
-                </footer>
-            </aside>
+export function AgenticInterface() {
+  const { squareColor, setSquareColor } = useColorStore()
+  const { translate, isLoading } = useTranslator()
 
-            {/* Main Content - Order 1 on mobile (top), Order 2 on desktop (right) */}
-            <main className="order-1 md:order-2 flex-1 flex flex-col items-center justify-center p-8 bg-background relative overflow-hidden h-[55vh] md:h-full">
-                {/* Decorative Grid/Orbs */}
-                <div className="absolute inset-0 pointer-events-none overflow-hidden">
-                    <div className="absolute -top-24 -right-24 w-96 h-96 bg-primary/10 rounded-full blur-[120px]" />
-                    <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-primary/5 rounded-full blur-[120px]" />
-                </div>
+  return (
+    <div className="flex flex-col md:flex-row h-screen w-screen overflow-hidden bg-background text-foreground font-sans selection:bg-primary/30">
+      <ChatSidebar messages={MESSAGES} />
 
-                <div className="flex flex-col items-center gap-12 z-10 w-full max-w-[320px] md:max-w-sm">
-                    {/* The Square Visualizer */}
-                    <div className="relative group w-full">
-                        <div
-                            className="absolute inset-0 rounded-[2.5rem] blur-2xl group-hover:blur-3xl transition-all duration-500 opacity-50"
-                            style={{ backgroundColor: squareColor }}
-                        />
-                        <div
-                            className="relative w-full aspect-square rounded-[2.5rem] shadow-2xl transition-all duration-1000 flex items-center justify-center overflow-hidden"
-                            style={{
-                                backgroundColor: squareColor,
-                                boxShadow: `0 20px 50px -12px ${squareColor}`
-                            }}
-                        >
-                            <div className="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity" />
-                            <div className="w-1/2 h-1/2 bg-white/10 rounded-full blur-3xl animate-pulse" />
-                        </div>
-                    </div>
+      <main className="order-1 md:order-2 flex-1 flex flex-col items-center justify-center p-8 bg-background relative overflow-hidden h-[55vh] md:h-full">
+        <div className="absolute inset-0 pointer-events-none overflow-hidden">
+          <div className="absolute -top-24 -right-24 w-96 h-96 bg-primary/10 rounded-full blur-[120px]" />
+          <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-primary/5 rounded-full blur-[120px]" />
+        </div>
 
-                    {/* Local Control Area */}
-                    <form
-                        onSubmit={handleColorUpdate}
-                        className="w-full space-y-3"
-                    >
-                        <p className="text-[10px] text-center font-bold uppercase tracking-[0.2em] text-muted-foreground opacity-50">Manual Override</p>
-                        <InputGroup className="bg-card/40 backdrop-blur-xl border-border/50 h-14 rounded-2xl shadow-xl shadow-black/5 ring-offset-background focus-within:ring-2 focus-within:ring-primary/20 transition-all">
-                            <InputGroupInput
-                                value={inputValue}
-                                onChange={(e) => setInputValue(e.target.value)}
-                                placeholder="write color to update"
-                                className="text-center text-lg font-medium placeholder:font-normal placeholder:opacity-50"
-                            />
-                            <InputGroupButton
-                                type="submit"
-                                variant="ghost"
-                                className="mr-1 h-12 w-12 rounded-xl bg-primary/10 hover:bg-primary transition-all group/btn"
-                            >
-                                <IconArrowRight size={22} className="text-primary group-hover/btn:text-white transition-colors" />
-                            </InputGroupButton>
-                        </InputGroup>
-                    </form>
-                </div>
-            </main>
+        <div className="flex flex-col items-center gap-12 z-10 w-full max-w-[320px] md:max-w-sm">
+          <ColorVisualizer color={squareColor} />
+          <ColorControlForm
+            onColorChange={setSquareColor}
+            translate={translate}
+            isLoading={isLoading}
+          />
         </div>
-    )
+      </main>
+    </div>
+  )
 }
-

src/components/ChatSidebar.tsx

@@ -0,0 +1,43 @@
+import { IconSend } from "@tabler/icons-react"
+import {
+  InputGroup,
+  InputGroupInput,
+  InputGroupButton,
+} from "@/components/ui/input-group"
+import { SidebarHeader } from "./SidebarHeader"
+import { MessageBubble, type Message } from "./MessageBubble"
+
+type ChatSidebarProps = {
+  messages: readonly Message[]
+}
+
+export function ChatSidebar({ messages }: ChatSidebarProps) {
+  return (
+    <aside className="order-2 md:order-1 w-full md:w-80 lg:w-96 flex flex-col border-t md:border-t-0 md:border-r border-border/50 bg-sidebar/50 backdrop-blur-md shrink-0 h-[45vh] md:h-full transition-all duration-300">
+      <SidebarHeader />
+
+      <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-thin scrollbar-thumb-border">
+        {messages.map((msg) => (
+          <MessageBubble key={msg.id} message={msg} />
+        ))}
+      </div>
+
+      <footer className="p-6 border-t border-border/30">
+        <InputGroup className="bg-background/80 h-12 shadow-sm border-border/50 focus-within:ring-primary/20 transition-all">
+          <InputGroupInput
+            placeholder="Write your message..."
+            className="text-sm px-4"
+          />
+          <InputGroupButton
+            size="xs"
+            variant="ghost"
+            className="mr-1 h-9 w-9 rounded-full hover:bg-primary hover:text-white transition-colors"
+          >
+            <IconSend size={18} />
+          </InputGroupButton>
+        </InputGroup>
+      </footer>
+    </aside>
+  )
+}
+

src/components/ColorControlForm.tsx

@@ -0,0 +1,98 @@
+import { useState, type FormEvent } from "react"
+import { IconArrowRight, IconLoader2 } from "@tabler/icons-react"
+import {
+  InputGroup,
+  InputGroupInput,
+  InputGroupButton,
+} from "@/components/ui/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  DEFAULT_SOURCE_LANG,
+  SOURCE_LANGUAGES,
+  isSourceLanguage,
+  sourceLanguageLabel,
+  type SourceLanguage,
+} from "@/lib/translationLanguages"
+
+type ColorControlFormProps = {
+  onColorChange: (color: string) => void
+  translate: (text: string, srcLang: string) => Promise<string>
+  isLoading: boolean
+}
+
+export function ColorControlForm({
+  onColorChange,
+  translate,
+  isLoading,
+}: ColorControlFormProps) {
+  const [inputValue, setInputValue] = useState("")
+  const [sourceLang, setSourceLang] =
+    useState<SourceLanguage>(DEFAULT_SOURCE_LANG)
+
+  const handleSubmit = async (e?: FormEvent) => {
+    e?.preventDefault()
+    const trimmedInput = inputValue.trim()
+    if (!trimmedInput) return
+
+    const translated = await translate(trimmedInput, sourceLang)
+    onColorChange(translated.trim().toLowerCase())
+    setInputValue("")
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="w-full space-y-3">
+      <p className="text-[10px] text-center font-bold uppercase tracking-[0.2em] text-muted-foreground opacity-50">
+        Manual Override
+      </p>
+      <div className="flex items-center justify-center">
+        <Select
+          value={sourceLang}
+          onValueChange={(value) => {
+            if (isSourceLanguage(value)) setSourceLang(value)
+          }}
+        >
+          <SelectTrigger className="w-full justify-between">
+            <SelectValue>{(value) => sourceLanguageLabel(value)}</SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {SOURCE_LANGUAGES.map((lang) => (
+              <SelectItem key={lang.value} value={lang.value}>
+                {lang.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <InputGroup className="bg-card/40 backdrop-blur-xl border-border/50 h-14 rounded-2xl shadow-xl shadow-black/5 ring-offset-background focus-within:ring-2 focus-within:ring-primary/20 transition-all">
+        <InputGroupInput
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          placeholder="write color to update"
+          className="text-center text-lg font-medium placeholder:font-normal placeholder:opacity-50"
+        />
+        <InputGroupButton
+          type="submit"
+          variant="ghost"
+          disabled={isLoading}
+          className="mr-1 h-12 w-12 rounded-xl bg-primary/10 hover:bg-primary transition-all group/btn disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isLoading ? (
+            <IconLoader2 size={22} className="text-primary animate-spin" />
+          ) : (
+            <IconArrowRight
+              size={22}
+              className="text-primary group-hover/btn:text-white transition-colors"
+            />
+          )}
+        </InputGroupButton>
+      </InputGroup>
+    </form>
+  )
+}
+

src/components/ColorVisualizer.tsx

@@ -0,0 +1,25 @@
+type ColorVisualizerProps = {
+  color: string
+}
+
+export function ColorVisualizer({ color }: ColorVisualizerProps) {
+  return (
+    <div className="relative group w-full">
+      <div
+        className="absolute inset-0 rounded-[2.5rem] blur-2xl group-hover:blur-3xl transition-all duration-500 opacity-50"
+        style={{ backgroundColor: color }}
+      />
+      <div
+        className="relative w-full aspect-square rounded-[2.5rem] shadow-2xl transition-all duration-1000 flex items-center justify-center overflow-hidden"
+        style={{
+          backgroundColor: color,
+          boxShadow: `0 20px 50px -12px ${color}`,
+        }}
+      >
+        <div className="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="w-1/2 h-1/2 bg-white/10 rounded-full blur-3xl animate-pulse" />
+      </div>
+    </div>
+  )
+}
+

src/components/MessageBubble.tsx

@@ -0,0 +1,46 @@
+import { IconUser, IconRobot } from "@tabler/icons-react"
+
+type MessageSender = "user" | "bot"
+
+type Message = {
+  id: number
+  text: string
+  sender: MessageSender
+}
+
+type MessageBubbleProps = {
+  message: Message
+}
+
+export function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.sender === "user"
+
+  return (
+    <div className={`flex flex-col ${isUser ? "items-end" : "items-start"}`}>
+      <div
+        className={`flex items-center gap-2 mb-1.5 px-1 ${
+          isUser ? "flex-row-reverse" : "flex-row"
+        }`}
+      >
+        <div className="w-5 h-5 rounded-full bg-muted flex items-center justify-center border border-border/50 overflow-hidden">
+          {isUser ? <IconUser size={12} /> : <IconRobot size={12} />}
+        </div>
+        <span className="text-[10px] uppercase font-bold tracking-tighter opacity-40">
+          {isUser ? "You" : "Assistant"}
+        </span>
+      </div>
+      <div
+        className={`max-w-[85%] px-4 py-3 rounded-2xl text-sm leading-relaxed ${
+          isUser
+            ? "bg-primary text-primary-foreground rounded-tr-none shadow-lg shadow-primary/20"
+            : "bg-muted/80 backdrop-blur-sm text-foreground rounded-tl-none border border-border/50"
+        }`}
+      >
+        {message.text}
+      </div>
+    </div>
+  )
+}
+
+export type { Message, MessageSender }
+

src/components/SidebarHeader.tsx

@@ -0,0 +1,21 @@
+import { IconVolume } from "@tabler/icons-react"
+
+export function SidebarHeader() {
+  return (
+    <header className="px-6 py-5 border-b border-border/50 flex items-center justify-between bg-transparent">
+      <div className="flex items-center gap-3">
+        <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
+          <IconVolume size={18} />
+        </div>
+        <div>
+          <h2 className="font-bold text-sm tracking-tight">ElevenLabs Agent</h2>
+          <p className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold flex items-center gap-1">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+            Online
+          </p>
+        </div>
+      </div>
+    </header>
+  )
+}
+

src/hooks/useTranslator.ts

@@ -0,0 +1,38 @@
+import * as Comlink from "comlink";
+import { useEffect, useRef, useState } from "react";
+import { ENGLISH_LANG } from "@/lib/translationLanguages";
+import type { TranslatorAPI } from "@/worker";
+
+export function useTranslator() {
+  const apiRef = useRef<Comlink.Remote<TranslatorAPI> | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const worker = new Worker(new URL("../worker.ts", import.meta.url), {
+      type: "module",
+    });
+
+    apiRef.current = Comlink.wrap<TranslatorAPI>(worker);
+
+    return () => {
+      worker.terminate();
+      apiRef.current = null;
+    };
+  }, []);
+
+  const translate = async (text: string, srcLang: string): Promise<string> => {
+    if (srcLang === ENGLISH_LANG) return text;
+
+    const api = apiRef.current;
+    if (!api) return text;
+
+    setIsLoading(true);
+    try {
+      return await api.translate(text, srcLang);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { translate, isLoading };
+}

src/lib/translationLanguages.ts

@@ -0,0 +1,25 @@
+export const ENGLISH_LANG = "eng_Latn" as const;
+
+export const DEFAULT_SOURCE_LANG = ENGLISH_LANG;
+
+export const SOURCE_LANGUAGES = [
+  { value: "eng_Latn", label: "English" },
+  { value: "por_Latn", label: "Português" },
+  { value: "spa_Latn", label: "Español" },
+  { value: "ita_Latn", label: "Italiano" },
+  { value: "deu_Latn", label: "Deutsch" },
+  { value: "fra_Latn", label: "Français" },
+] as const;
+
+export type SourceLanguage = (typeof SOURCE_LANGUAGES)[number]["value"];
+
+export function isSourceLanguage(value: unknown): value is SourceLanguage {
+  return SOURCE_LANGUAGES.some((lang) => lang.value === value);
+}
+
+export function sourceLanguageLabel(value: unknown): string {
+  return (
+    SOURCE_LANGUAGES.find((lang) => lang.value === value)?.label ??
+    String(value ?? "")
+  );
+}

src/lib/translatorTypes.ts

@@ -0,0 +1,6 @@
+export type TranslationResult = { translation_text: string };
+
+export type Translator = (
+  text: string,
+  options: { src_lang: string; tgt_lang: string }
+) => Promise<TranslationResult[]>;

src/worker.ts

@@ -1,28 +1,33 @@
-import { pipeline, TextStreamer } from '@huggingface/transformers';
+import * as Comlink from "comlink";
+import { pipeline } from "@huggingface/transformers";
+import type { Translator } from "@/lib/translatorTypes";
 
-class TranslationPipeline {
-    static task = 'translation';
-    static model = 'Xenova/nllb-200-distilled-600M';
-    static instance: any = null;
+const MODEL_ID = "Xenova/nllb-200-distilled-600M";
+const DEFAULT_TGT_LANG = "eng_Latn";
 
-    static async getInstance(progress_callback: any = null) {
-        this.instance ??= pipeline(this.task, this.model, { progress_callback });
-        return this.instance;
-    }
+let translatorPromise: Promise<Translator> | null = null;
+
+function getTranslator(): Promise<Translator> {
+  translatorPromise ??= pipeline(
+    "translation",
+    MODEL_ID
+  ) as unknown as Promise<Translator>;
+  return translatorPromise;
 }
 
-self.addEventListener('message', async (event) => {
-    const translator = await TranslationPipeline.getInstance((x: any) => {
-        self.postMessage(x);
-    });
+const translatorAPI = {
+  async translate(text: string, srcLang: string): Promise<string> {
+    if (!text.trim() || srcLang === DEFAULT_TGT_LANG) return text;
 
-    const output = await translator(event.data.text, {
-        tgt_lang: 'eng_Latn',
-        src_lang: 'por_Latn',
+    const translator = await getTranslator();
+    const output = await translator(text, {
+      src_lang: srcLang,
+      tgt_lang: DEFAULT_TGT_LANG,
     });
+    return output[0]?.translation_text ?? "";
+  },
+};
 
-    self.postMessage({
-        status: 'complete',
-        output: output[0].translation_text,
-    });
-});
+export type TranslatorAPI = typeof translatorAPI;
+
+Comlink.expose(translatorAPI);