Merge branch 'develop' into feature/popup-ai

- Implemented useAIChat hook to handle chat messages, input state, and streaming responses.
- Added types for ChatMessage and ChatContext to ensure type safety.
- Integrated TRPC mutation for sending messages and handling responses.
- Included functionality for clearing messages and managing streaming content.

src/renderer/globals.css

@@ -50,113 +50,73 @@
 
 :root {
   --radius: 0.625rem;
-  
-  /* #f4edf3 - Light Pinkish-White Canvas */
-  --background: oklch(0.945 0.012 328.5);
-  /* #040404 - Almost Black Text */
-  --foreground: oklch(0.145 0 0);
-  
-  --card: oklch(0.945 0.012 328.5);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(0.945 0.012 328.5);
-  --popover-foreground: oklch(0.145 0 0);
-  
-  /* #fbc881 - Golden Yellow Accent */
-  --primary: oklch(0.838 0.117 76.8);
-  --primary-foreground: oklch(0.145 0 0);
-  
-  /* #8a8ea9 - Slate Blue/Gray */
-  --secondary: oklch(0.627 0.041 274.5);
-  --secondary-foreground: oklch(0.945 0.012 328.5);
-  
-  /* #c8c3cd - Light Gray/Purple */
-  --muted: oklch(0.811 0.014 300.2);
-  --muted-foreground: oklch(0.627 0.041 274.5);
-  
-  --accent: oklch(0.811 0.014 300.2);
-  --accent-foreground: oklch(0.145 0 0);
-  
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
-  
-  --border: oklch(0.811 0.014 300.2);
-  --input: oklch(0.811 0.014 300.2);
-  --ring: oklch(0.838 0.117 76.8);
-  
-  /* Kept your original chart colors */
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  
-  /* Sidebar uses the custom palette */
-  --sidebar: oklch(0.945 0.012 328.5);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.838 0.117 76.8);
-  --sidebar-primary-foreground: oklch(0.145 0 0);
-  --sidebar-accent: oklch(0.811 0.014 300.2);
-  --sidebar-accent-foreground: oklch(0.145 0 0);
-  --sidebar-border: oklch(0.811 0.014 300.2);
-  --sidebar-ring: oklch(0.838 0.117 76.8);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  /* #0c0c0c - Deepest black for the main canvas */
-  --background: oklch(0.15 0 0);
-  /* #fbfbfb - Crisp white for primary text */
+  --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
-  
-  /* Cards use the main background but are defined by borders */
-  --card: oklch(0.15 0 0);
+  --card: oklch(0.21 0.006 285.885);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.15 0 0);
+  --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  
-  /* #fbfbfb - Primary actions (like the active white circle menu item) */
-  --primary: oklch(0.985 0 0);
-  /* #0c0c0c - Dark text/icons inside primary buttons */
-  --primary-foreground: oklch(0.15 0 0);
-  
-  /* #323232 - Dark gray for secondary surfaces and button backgrounds */
-  --secondary: oklch(0.335 0 0);
-  /* #fbfbfb - White text on secondary surfaces */
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
-  
-  /* #323232 - Dark gray for muted backgrounds */
-  --muted: oklch(0.335 0 0);
-  /* #77797b - Mid gray for muted/secondary text (like "ELEVATE YOUR...") */
-  --muted-foreground: oklch(0.555 0 0);
-  
-  /* #323232 - Hover states */
-  --accent: oklch(0.335 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
-  
-  --destructive: oklch(0.704 0.191 22.216); /* Kept original dark red */
+  --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.985 0 0);
-  
-  /* #323232 - Distinct dark gray borders for the cards/panels */
-  --border: oklch(0.335 0 0);
-  --input: oklch(0.335 0 0);
-  /* #bab7ba - Lighter gray for focus rings to stand out against dark borders */
-  --ring: oklch(0.765 0 0);
-  
-  /* Kept your original chart colors */
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  
-  /* Sidebar mapped to the new sleek dark palette */
-  --sidebar: oklch(0.15 0 0);
+  --sidebar: oklch(0.21 0.006 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.985 0 0);
-  --sidebar-primary-foreground: oklch(0.15 0 0);
-  --sidebar-accent: oklch(0.335 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.335 0 0);
-  --sidebar-ring: oklch(0.765 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
 @layer base {

src/renderer/hooks/useAIChat.ts

@@ -0,0 +1,130 @@
+import { useState, useCallback, useRef } from 'react';
+import { trpc } from '@/lib/trpc';
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  error?: boolean;
+}
+
+export interface ChatContext {
+  type: 'global' | 'project';
+  projectId?: string;
+  uiContext?: string;
+}
+
+export interface UseAIChatReturn {
+  messages: ChatMessage[];
+  input: string;
+  setInput: (v: string) => void;
+  isStreaming: boolean;
+  streamingContent: string;
+  handleSend: (overrideMessage?: string, overrideContext?: ChatContext) => void;
+  clearMessages: () => void;
+}
+
+export function useAIChat(defaultContext: ChatContext): UseAIChatReturn {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingContent, setStreamingContent] = useState('');
+
+  const streamingContentRef = useRef('');
+  const chatMutation = trpc.ai.chat.useMutation();
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setStreamingContent('');
+    streamingContentRef.current = '';
+  }, []);
+
+  const handleSend = useCallback(
+    (overrideMessage?: string, overrideContext?: ChatContext) => {
+      const trimmed = (overrideMessage ?? input).trim();
+      if (!trimmed || isStreaming) return;
+
+      const userMsg: ChatMessage = {
+        id: crypto.randomUUID(),
+        role: 'user',
+        content: trimmed,
+      };
+
+      setMessages((prev) => [...prev, userMsg]);
+      if (!overrideMessage) setInput('');
+      setIsStreaming(true);
+      setStreamingContent('');
+      streamingContentRef.current = '';
+
+      const unsubscribe = window.electronAI.onStreamChunk(({ token, done }) => {
+        if (done) {
+          const finalContent = streamingContentRef.current;
+          setMessages((prev) => [
+            ...prev,
+            { id: crypto.randomUUID(), role: 'assistant', content: finalContent },
+          ]);
+          setStreamingContent('');
+          streamingContentRef.current = '';
+          setIsStreaming(false);
+          unsubscribe();
+          return;
+        }
+        streamingContentRef.current += token;
+        setStreamingContent(streamingContentRef.current);
+      });
+
+      const ctx = overrideContext ?? defaultContext;
+
+      chatMutation.mutate(
+        {
+          message: trimmed,
+          context: {
+            type: ctx.type,
+            ...(ctx.type === 'project' && ctx.projectId ? { projectId: ctx.projectId } : {}),
+            ...(ctx.uiContext ? { uiContext: ctx.uiContext } : {}),
+          },
+        },
+        {
+          onSuccess: (data) => {
+            if (data.error) {
+              unsubscribe();
+              setMessages((prev) => [
+                ...prev,
+                { id: crypto.randomUUID(), role: 'assistant', content: data.error!, error: true },
+              ]);
+              setStreamingContent('');
+              streamingContentRef.current = '';
+              setIsStreaming(false);
+            }
+          },
+          onError: (err) => {
+            unsubscribe();
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: crypto.randomUUID(),
+                role: 'assistant',
+                content: err.message || 'An unexpected error occurred.',
+                error: true,
+              },
+            ]);
+            setStreamingContent('');
+            streamingContentRef.current = '';
+            setIsStreaming(false);
+          },
+        },
+      );
+    },
+    [input, isStreaming, defaultContext, chatMutation],
+  );
+
+  return {
+    messages,
+    input,
+    setInput,
+    isStreaming,
+    streamingContent,
+    handleSend,
+    clearMessages,
+  };
+}