Initial prototype

docs/blueprint.md

@@ -0,0 +1,19 @@
+# **App Name**: ProtoChat
+
+## Core Features:
+
+- Real-time Chat Interface: Provide a clean and intuitive interface for users to engage in real-time conversations.
+- AI-Powered Message Generation: Utilize generative AI to create message suggestions, offering users creative prompts. The LLM will act as a tool to suggest appropriate phrases for the current message thread.
+- Markdown Support: Enable users to format their messages using Markdown for richer text styling.
+- Theming Options: Allow users to customize the appearance of the chat interface with light and dark themes.
+- Context Aware Suggestions: Use the past chat messages as context to produce more precise AI suggestions.
+
+## Style Guidelines:
+
+- Primary color: HSL 215, 70%, 50% (Hex: #3385FF) to evoke trust and intelligence.
+- Background color: HSL 215, 10%, 95% (Hex: #F2F4FF) for a clean and light aesthetic.
+- Accent color: HSL 185, 60%, 40% (Hex: #33A6A6) for interactive elements and highlights.
+- Body and headline font: 'Inter' sans-serif for a clean and modern user experience.
+- Use simple, outline-style icons to maintain a minimalist design.
+- Emphasize a clean and straightforward layout to focus on conversation flow.
+- Implement subtle animations for loading indicators and user interactions to provide a polished feel.

src/ai/dev.ts

@@ -1 +1,5 @@
-// Flows will be imported for their side effects in this file.
+import { config } from 'dotenv';
+config();
+
+import '@/ai/flows/ai-context-aware-suggestions.ts';
+import '@/ai/flows/ai-suggest-message.ts';

src/ai/flows/ai-context-aware-suggestions.ts

@@ -0,0 +1,66 @@
+'use server';
+/**
+ * @fileOverview AI-powered, context-aware message suggestions.
+ *
+ * - `getContextAwareSuggestions` - Generates message suggestions based on the conversation history.
+ * - `ContextAwareSuggestionsInput` - The input type for the `getContextAwareSuggestions` function.
+ * - `ContextAwareSuggestionsOutput` - The return type for the `getContextAwareSuggestions` function.
+ */
+
+import {ai} from '@/ai/genkit';
+import {z} from 'genkit';
+
+const ContextAwareSuggestionsInputSchema = z.object({
+  chatHistory: z
+    .array(z.string())
+    .describe('The history of messages in the chat.'),
+  currentMessage: z.string().describe('The current message being composed.'),
+});
+
+export type ContextAwareSuggestionsInput = z.infer<
+  typeof ContextAwareSuggestionsInputSchema
+>;
+
+const ContextAwareSuggestionsOutputSchema = z.object({
+  suggestions: z
+    .array(z.string())
+    .describe('A list of suggested messages based on the context.'),
+});
+
+export type ContextAwareSuggestionsOutput = z.infer<
+  typeof ContextAwareSuggestionsOutputSchema
+>;
+
+export async function getContextAwareSuggestions(
+  input: ContextAwareSuggestionsInput
+): Promise<ContextAwareSuggestionsOutput> {
+  return contextAwareSuggestionsFlow(input);
+}
+
+const prompt = ai.definePrompt({
+  name: 'contextAwareSuggestionsPrompt',
+  input: {schema: ContextAwareSuggestionsInputSchema},
+  output: {schema: ContextAwareSuggestionsOutputSchema},
+  prompt: `You are an AI assistant that provides helpful message suggestions in a chat application. Consider the chat history to produce contextually relevant suggestions.
+
+Chat History:
+{{#each chatHistory}}
+- {{{this}}}
+{{/each}}
+
+Current Message: {{{currentMessage}}}
+
+Suggestions:`,
+});
+
+const contextAwareSuggestionsFlow = ai.defineFlow(
+  {
+    name: 'contextAwareSuggestionsFlow',
+    inputSchema: ContextAwareSuggestionsInputSchema,
+    outputSchema: ContextAwareSuggestionsOutputSchema,
+  },
+  async input => {
+    const {output} = await prompt(input);
+    return output!;
+  }
+);

src/ai/flows/ai-suggest-message.ts

@@ -0,0 +1,52 @@
+'use server';
+
+/**
+ * @fileOverview An AI agent to suggest relevant phrases based on the current chat thread.
+ *
+ * - suggestMessage - A function that suggests messages based on the chat thread.
+ * - SuggestMessageInput - The input type for the suggestMessage function.
+ * - SuggestMessageOutput - The return type for the suggestMessage function.
+ */
+
+import {ai} from '@/ai/genkit';
+import {z} from 'genkit';
+
+const SuggestMessageInputSchema = z.object({
+  chatThread: z.string().describe('The current chat thread.'),
+});
+export type SuggestMessageInput = z.infer<typeof SuggestMessageInputSchema>;
+
+const SuggestMessageOutputSchema = z.object({
+  suggestions: z.array(z.string()).describe('An array of suggested phrases.'),
+});
+export type SuggestMessageOutput = z.infer<typeof SuggestMessageOutputSchema>;
+
+export async function suggestMessage(input: SuggestMessageInput): Promise<SuggestMessageOutput> {
+  return suggestMessageFlow(input);
+}
+
+const prompt = ai.definePrompt({
+  name: 'suggestMessagePrompt',
+  input: {schema: SuggestMessageInputSchema},
+  output: {schema: SuggestMessageOutputSchema},
+  prompt: `You are a helpful AI assistant that suggests relevant phrases based on the current chat thread.
+
+  Here is the current chat thread:
+  {{chatThread}}
+
+  Suggest 3 short phrases that the user might want to say next to keep the conversation flowing.
+  Return the suggestions as a JSON array of strings.
+  `,
+});
+
+const suggestMessageFlow = ai.defineFlow(
+  {
+    name: 'suggestMessageFlow',
+    inputSchema: SuggestMessageInputSchema,
+    outputSchema: SuggestMessageOutputSchema,
+  },
+  async input => {
+    const {output} = await prompt(input);
+    return output!;
+  }
+);

src/app/globals.css

@@ -2,31 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --background: 215 10% 95%;
+    --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 215 70% 50%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 185 60% 40%;
+    --accent-foreground: 0 0% 100%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 215 70% 50%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
@@ -43,25 +39,25 @@ body {
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 215 70% 50%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 185 60% 40%;
+    --accent-foreground: 0 0% 100%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 215 70% 50%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

src/app/layout.tsx

@@ -1,9 +1,11 @@
-import type {Metadata} from 'next';
+import type { Metadata } from 'next';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Toaster } from '@/components/ui/toaster';
 import './globals.css';
 
 export const metadata: Metadata = {
-  title: 'Firebase Studio App',
-  description: 'Generated by Firebase Studio',
+  title: 'ProtoChat',
+  description: 'An AI-powered chat application',
 };
 
 export default function RootLayout({
@@ -12,13 +14,21 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
       </head>
-      <body className="font-body antialiased">{children}</body>
+      <body className="font-body antialiased">
+        <ThemeProvider>
+          {children}
+          <Toaster />
+        </ThemeProvider>
+      </body>
     </html>
   );
 }

src/app/page.tsx

@@ -1,3 +1,5 @@
+import { Chat } from '@/components/chat/chat';
+
 export default function Home() {
-  return <></>;
+  return <Chat />;
 }

src/components/chat/chat.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useState } from 'react';
+import type { Message } from '@/lib/types';
+import { MessageList } from './message-list';
+import { MessageForm } from './message-form';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { MessageSquare } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+export function Chat() {
+  const [messages, setMessages] = useState<Message[]>([
+    { id: '1', role: 'assistant', content: "Hello! I'm Proto, your AI assistant. How can I help you today?" }
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const { toast } = useToast();
+
+  const handleNewMessage = async (message: string) => {
+    const userMessage: Message = { id: crypto.randomUUID(), role: 'user', content: message };
+    const newMessages = [...messages, userMessage];
+    setMessages(newMessages);
+    setIsLoading(true);
+
+    try {
+      // Simulate an AI response.
+      await new Promise(resolve => setTimeout(resolve, 1500));
+
+      const assistantMessage: Message = {
+        id: crypto.randomUUID(),
+        role: 'assistant',
+        content: `This is a simulated response to your message: "${message}". I support basic **Markdown** formatting, like *italics* and \`inline code\`.`,
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+    } catch (error) {
+      console.error('Error getting AI response:', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to get AI response. Please try again.',
+        variant: 'destructive',
+      });
+      // Optionally remove the user's message if the AI fails
+      setMessages(messages);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-screen w-full flex-col bg-background">
+      <header className="flex h-16 shrink-0 items-center justify-between border-b px-4 md:px-6">
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <MessageSquare className="h-5 w-5" />
+          </div>
+          <h1 className="text-xl font-semibold tracking-tight">ProtoChat</h1>
+        </div>
+        <ThemeToggle />
+      </header>
+      <div className="flex-1 overflow-hidden">
+        <MessageList messages={messages} isLoading={isLoading} />
+      </div>
+      <div className="border-t bg-card p-4 md:p-6">
+        <MessageForm onNewMessage={handleNewMessage} isLoading={isLoading} messages={messages} />
+      </div>
+    </div>
+  );
+}

src/components/chat/message-form.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState, useRef, type FormEvent } from 'react';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { ArrowUp, Loader2 } from 'lucide-react';
+import { Suggestions } from './suggestions';
+import type { Message } from '@/lib/types';
+
+interface MessageFormProps {
+  onNewMessage: (message: string) => void;
+  isLoading: boolean;
+  messages: Message[];
+}
+
+export function MessageForm({ onNewMessage, isLoading, messages }: MessageFormProps) {
+  const [input, setInput] = useState('');
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (input.trim()) {
+      onNewMessage(input.trim());
+      setInput('');
+      inputRef.current?.focus();
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    onNewMessage(suggestion);
+    setInput('');
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-4">
+      <Suggestions onSuggestionClick={handleSuggestionClick} messages={messages} isLoading={isLoading} />
+      <form onSubmit={handleSubmit} className="relative">
+        <Textarea
+          ref={inputRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              handleSubmit(e);
+            }
+          }}
+          placeholder="Send a message..."
+          className="min-h-[48px] resize-none pr-16"
+          disabled={isLoading}
+          autoFocus
+        />
+        <Button
+          type="submit"
+          size="icon"
+          className="absolute bottom-3 right-3 h-8 w-8"
+          disabled={isLoading || !input.trim()}
+          aria-label="Send message"
+        >
+          {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <ArrowUp className="h-4 w-4" />}
+        </Button>
+      </form>
+    </div>
+  );
+}

src/components/chat/message-list.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { Message as MessageType } from '@/lib/types';
+import { Message } from './message';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useEffect, useRef } from 'react';
+import { Avatar, AvatarFallback } from '../ui/avatar';
+
+interface MessageListProps {
+  messages: MessageType[];
+  isLoading: boolean;
+}
+
+export function MessageList({ messages, isLoading }: MessageListProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isLoading]);
+
+  return (
+    <div ref={scrollRef} className="h-full overflow-y-auto px-4 pt-6 md:px-6">
+      <div className="mx-auto max-w-3xl space-y-6">
+        {messages.map((message) => <Message key={message.id} message={message} />)}
+        {isLoading && (
+          <div className="flex items-start gap-4">
+            <Avatar className="h-8 w-8 border">
+              <AvatarFallback className="bg-primary/10 text-primary">AI</AvatarFallback>
+            </Avatar>
+            <div className="grid gap-2 pt-2">
+              <Skeleton className="h-4 w-48" />
+              <Skeleton className="h-4 w-32" />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/chat/message.tsx

@@ -0,0 +1,42 @@
+import { cn } from '@/lib/utils';
+import type { Message as MessageType } from '@/lib/types';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Markdown } from '@/components/markdown';
+import { User, Bot } from 'lucide-react';
+
+interface MessageProps {
+  message: MessageType;
+}
+
+export function Message({ message }: MessageProps) {
+  const isUser = message.role === 'user';
+  
+  return (
+    <div className={cn('flex items-start gap-4', isUser && 'justify-end')}>
+      {!isUser && (
+        <Avatar className="h-8 w-8 border">
+          <AvatarFallback className="bg-primary/10 text-primary">
+            <Bot className="h-5 w-5" />
+          </AvatarFallback>
+        </Avatar>
+      )}
+      <div
+        className={cn(
+          'max-w-[75%] rounded-2xl p-3 px-4',
+          isUser
+            ? 'rounded-br-none bg-primary text-primary-foreground'
+            : 'rounded-bl-none bg-muted'
+        )}
+      >
+        <Markdown content={message.content} />
+      </div>
+      {isUser && (
+        <Avatar className="h-8 w-8 border">
+          <AvatarFallback className="bg-secondary">
+            <User className="h-5 w-5" />
+          </AvatarFallback>
+        </Avatar>
+      )}
+    </div>
+  );
+}

src/components/chat/suggestions.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { suggestMessage } from '@/ai/flows/ai-suggest-message';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Sparkles } from 'lucide-react';
+import type { Message } from '@/lib/types';
+import { useToast } from '@/hooks/use-toast';
+
+interface SuggestionsProps {
+    onSuggestionClick: (suggestion: string) => void;
+    messages: Message[];
+    isLoading: boolean;
+}
+
+export function Suggestions({ onSuggestionClick, messages, isLoading }: SuggestionsProps) {
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    // A simple way to prevent fetching on every message while AI is responding
+    const timer = setTimeout(() => {
+      if (isLoading) return;
+
+      async function fetchSuggestions() {
+        setLoading(true);
+        try {
+          const chatThread = messages.map(m => `${m.role}: ${m.content}`).join('\n');
+          const response = await suggestMessage({ chatThread: chatThread || 'Start a new conversation.' });
+          
+          if (response.suggestions && response.suggestions.length > 0) {
+              setSuggestions(response.suggestions);
+          } else {
+              setSuggestions([]);
+          }
+        } catch (error) {
+          console.error('Failed to fetch suggestions:', error);
+          // Only show toast on first load failure maybe
+          if (messages.length <= 1) {
+            toast({ title: 'Suggestion Error', description: 'Could not load AI suggestions.', variant: 'destructive' });
+          }
+          setSuggestions([]);
+        } finally {
+          setLoading(false);
+        }
+      }
+
+      fetchSuggestions();
+    }, 500); // Debounce fetching
+
+    return () => clearTimeout(timer);
+  }, [messages, isLoading, toast]);
+
+  if (loading) {
+    return (
+      <div className="flex h-8 animate-pulse items-center gap-2">
+        <Sparkles className="h-5 w-5 text-muted-foreground" />
+        <Skeleton className="h-8 w-32 rounded-full" />
+        <Skeleton className="h-8 w-40 rounded-full" />
+        <Skeleton className="h-8 w-28 rounded-full" />
+      </div>
+    );
+  }
+
+  if (suggestions.length === 0 || isLoading) {
+    return <div className="h-8" />; // Maintain layout consistency
+  }
+  
+  return (
+    <div className="flex h-8 items-center gap-2">
+      <Sparkles className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
+      <div className="flex gap-2 overflow-x-auto pb-2">
+        {suggestions.map((suggestion, index) => (
+          <Button
+            key={index}
+            variant="outline"
+            size="sm"
+            className="rounded-full whitespace-nowrap"
+            onClick={() => onSuggestionClick(suggestion)}
+          >
+            {suggestion}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/markdown.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export const Markdown = ({ content, className }: { content: string, className?: string }) => {
+    const parts = content.split(/(\*\*.*?\*\*|\*.*?\*|`.*?`|```[\s\S]*?```)/g);
+
+    return (
+        <div className={cn("prose dark:prose-invert", className)}>
+            {parts.map((part, index) => {
+                if (part.startsWith('**') && part.endsWith('**')) {
+                    return <strong key={index}>{part.slice(2, -2)}</strong>;
+                }
+                if (part.startsWith('*') && part.endsWith('*')) {
+                    return <em key={index}>{part.slice(1, -1)}</em>;
+                }
+                if (part.startsWith('```') && part.endsWith('```')) {
+                    return (
+                        <pre className="whitespace-pre-wrap bg-muted p-2 rounded-md my-2" key={index}>
+                            <code>{part.slice(3, -3)}</code>
+                        </pre>
+                    );
+                }
+                if (part.startsWith('`') && part.endsWith('`')) {
+                    return <code className="bg-muted text-foreground rounded px-1 py-0.5" key={index}>{part.slice(1, -1)}</code>;
+                }
+                return <span key={index}>{part}</span>;
+            })}
+        </div>
+    );
+};

src/components/theme-provider.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>("system");
+
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("protochat-theme") as Theme | null;
+    if (storedTheme) {
+      setTheme(storedTheme);
+    }
+  }, []);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    let currentTheme = theme;
+    if (currentTheme === "system") {
+      currentTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+    }
+
+    root.classList.add(currentTheme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (newTheme: Theme) => {
+      localStorage.setItem("protochat-theme", newTheme);
+      setTheme(newTheme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

src/components/theme-toggle.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+
+import { useTheme } from "@/components/theme-provider"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/lib/types.ts

@@ -0,0 +1,5 @@
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+}