Spaces:

Trxon
/

Arrakis

Runtime error

App Files Files Community

gpt-engineer-app[bot] commited on Jan 25

Commit

808fe45

1 Parent(s): fea8c8a

Changes

Browse files

Files changed (24) hide show

.env +3 -0
index.html +26 -7
package-lock.json +0 -0
package.json +4 -1
public/pwa-192x192.png +0 -0
public/pwa-512x512.png +0 -0
src/components/ChatInput.tsx +195 -0
src/components/ChatInterface.tsx +203 -0
src/components/ChatMessage.tsx +54 -0
src/components/ConversationSidebar.tsx +131 -0
src/components/ScreenSharePreview.tsx +65 -0
src/components/WelcomeScreen.tsx +79 -0
src/hooks/useChat.ts +217 -0
src/hooks/useScreenShare.ts +76 -0
src/hooks/useVoice.ts +158 -0
src/index.css +135 -61
src/integrations/supabase/client.ts +17 -0
src/integrations/supabase/types.ts +155 -0
src/pages/Index.tsx +2 -9
src/types/chat.ts +28 -0
supabase/config.toml +4 -0
supabase/functions/chat/index.ts +83 -0
tailwind.config.ts +21 -12
vite.config.ts +57 -1

.env ADDED Viewed

	@@ -0,0 +1,3 @@

+VITE_SUPABASE_PROJECT_ID="rxrhjvwnfxtosbneybwa"
+VITE_SUPABASE_PUBLISHABLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJ4cmhqdnduZnh0b3NibmV5YndhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjkzMTQyNzcsImV4cCI6MjA4NDg5MDI3N30.__UwHyl1SV2LNw-NM2hMpNtfL5b_ae7Pw3Yv9oacCIs"
+VITE_SUPABASE_URL="https://rxrhjvwnfxtosbneybwa.supabase.co"

index.html CHANGED Viewed

@@ -1,22 +1,41 @@
 <!doctype html>
-<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- TODO: Set the document title to the name of your application -->
-    <title>Lovable App</title>
-    <meta name="description" content="Lovable Generated Project" />
     <meta name="author" content="Lovable" />
-    <!-- TODO: Update og:title to match your application name -->
-    <meta property="og:title" content="Lovable App" />
-    <meta property="og:description" content="Lovable Generated Project" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@Lovable" />
     <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
   </head>
   <body>

 <!doctype html>
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Desktop Assistant</title>
+    <meta name="description" content="Your intelligent desktop assistant with vision and voice capabilities. Ask questions, share your screen, and get help with any task." />
     <meta name="author" content="Lovable" />
+    <meta name="theme-color" content="#0f172a" />
+    <!-- PWA Meta Tags -->
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/pwa-192x192.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="AI Assistant" />
+    <!-- Open Graph -->
+    <meta property="og:title" content="AI Desktop Assistant" />
+    <meta property="og:description" content="Your intelligent desktop assistant with vision and voice capabilities" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+    <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@Lovable" />
     <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+    <!-- Fonts -->
+    <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:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      }
+    </style>
   </head>
   <body>

package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -41,12 +41,14 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-query": "^5.83.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
@@ -61,13 +63,14 @@
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.9",
     "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.0.0",
-    "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^22.16.5",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",

     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@supabase/supabase-js": "^2.91.1",
     "@tanstack/react-query": "^5.83.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.29.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.9",
+    "vite-plugin-pwa": "^1.2.0",
     "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^22.16.5",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",

public/pwa-192x192.png ADDED Viewed

public/pwa-512x512.png ADDED Viewed

src/components/ChatInput.tsx ADDED Viewed

	@@ -0,0 +1,195 @@

+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Send, Mic, MicOff, Monitor, MonitorOff, Volume2, VolumeX } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+interface ChatInputProps {
+  onSendMessage: (message: string) => void;
+  isLoading: boolean;
+  isListening: boolean;
+  isSpeaking: boolean;
+  isSharing: boolean;
+  voiceEnabled: boolean;
+  transcript: string;
+  onStartListening: () => void;
+  onStopListening: () => void;
+  onToggleVoice: () => void;
+  onToggleScreenShare: () => void;
+}
+export function ChatInput({
+  onSendMessage,
+  isLoading,
+  isListening,
+  isSpeaking,
+  isSharing,
+  voiceEnabled,
+  transcript,
+  onStartListening,
+  onStopListening,
+  onToggleVoice,
+  onToggleScreenShare,
+}: ChatInputProps) {
+  const [input, setInput] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  // Update input with voice transcript
+  useEffect(() => {
+    if (transcript && !isListening) {
+      setInput(transcript);
+    }
+  }, [transcript, isListening]);
+  const handleSubmit = () => {
+    if (input.trim() && !isLoading) {
+      onSendMessage(input.trim());
+      setInput("");
+      if (textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+      }
+    }
+  };
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInput(e.target.value);
+    // Auto-resize
+    const textarea = e.target;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+  };
+  return (
+    <div className="p-4 border-t border-border bg-background/50 backdrop-blur-sm">
+      <div className="max-w-3xl mx-auto">
+        {/* Voice transcript indicator */}
+        <AnimatePresence>
+          {isListening && (
+            <motion.div
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 10 }}
+              className="mb-3 px-4 py-2 rounded-lg bg-primary/10 border border-primary/20"
+            >
+              <div className="flex items-center gap-2">
+                <div className="flex gap-1">
+                  {[...Array(3)].map((_, i) => (
+                    <div
+                      key={i}
+                      className="w-1 h-4 bg-primary rounded-full animate-voice-wave"
+                      style={{ animationDelay: `${i * 0.1}s` }}
+                    />
+                  ))}
+                </div>
+                <span className="text-sm text-primary">
+                  {transcript || "Listening..."}
+                </span>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <div className="flex items-end gap-2">
+          {/* Screen Share Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onToggleScreenShare}
+            className={cn(
+              "shrink-0 rounded-full transition-colors",
+              isSharing
+                ? "bg-primary/20 text-primary hover:bg-primary/30"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+            title={isSharing ? "Stop sharing screen" : "Share screen"}
+          >
+            {isSharing ? (
+              <MonitorOff className="h-5 w-5" />
+            ) : (
+              <Monitor className="h-5 w-5" />
+            )}
+          </Button>
+          {/* Voice Toggle Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onToggleVoice}
+            className={cn(
+              "shrink-0 rounded-full transition-colors",
+              voiceEnabled
+                ? "bg-primary/20 text-primary hover:bg-primary/30"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+            title={voiceEnabled ? "Disable voice responses" : "Enable voice responses"}
+          >
+            {voiceEnabled ? (
+              <Volume2 className="h-5 w-5" />
+            ) : (
+              <VolumeX className="h-5 w-5" />
+            )}
+          </Button>
+          {/* Input Area */}
+          <div className="flex-1 relative">
+            <Textarea
+              ref={textareaRef}
+              value={input}
+              onChange={handleTextareaChange}
+              onKeyDown={handleKeyDown}
+              placeholder="Ask me anything..."
+              className="min-h-[48px] max-h-[200px] resize-none pr-24 rounded-2xl bg-input border-border focus-visible:ring-primary"
+              disabled={isLoading}
+              rows={1}
+            />
+            {/* Action buttons inside textarea */}
+            <div className="absolute right-2 bottom-2 flex items-center gap-1">
+              {/* Mic Button */}
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={isListening ? onStopListening : onStartListening}
+                className={cn(
+                  "h-8 w-8 rounded-full transition-all",
+                  isListening
+                    ? "bg-red-500/20 text-red-500 hover:bg-red-500/30 animate-pulse-glow"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+                disabled={isLoading}
+              >
+                {isListening ? (
+                  <MicOff className="h-4 w-4" />
+                ) : (
+                  <Mic className="h-4 w-4" />
+                )}
+              </Button>
+              {/* Send Button */}
+              <Button
+                size="icon"
+                onClick={handleSubmit}
+                disabled={!input.trim() || isLoading}
+                className="h-8 w-8 rounded-full bg-primary hover:bg-primary/90"
+              >
+                <Send className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <p className="mt-2 text-center text-xs text-muted-foreground">
+          AI can make mistakes. Consider checking important information.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/ChatInterface.tsx ADDED Viewed

	@@ -0,0 +1,203 @@

+import { useRef, useEffect, useState } from "react";
+import { AnimatePresence } from "framer-motion";
+import { Menu, PanelLeftClose } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ChatMessage } from "@/components/ChatMessage";
+import { ChatInput } from "@/components/ChatInput";
+import { WelcomeScreen } from "@/components/WelcomeScreen";
+import { ScreenSharePreview } from "@/components/ScreenSharePreview";
+import { ConversationSidebar } from "@/components/ConversationSidebar";
+import { useChat } from "@/hooks/useChat";
+import { useVoice } from "@/hooks/useVoice";
+import { useScreenShare } from "@/hooks/useScreenShare";
+import { cn } from "@/lib/utils";
+export function ChatInterface() {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [voiceEnabled, setVoiceEnabled] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const {
+    conversations,
+    activeConversation,
+    activeConversationId,
+    messages,
+    isLoading,
+    createConversation,
+    setActiveConversationId,
+    deleteConversation,
+    sendMessage,
+  } = useChat();
+  const {
+    isListening,
+    isSpeaking,
+    transcript,
+    startListening,
+    stopListening,
+    speak,
+    stopSpeaking,
+  } = useVoice();
+  const {
+    isSharing,
+    stream,
+    videoRef,
+    canvasRef,
+    startSharing,
+    stopSharing,
+    getScreenDescription,
+  } = useScreenShare();
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+  // Speak assistant responses if voice is enabled
+  useEffect(() => {
+    if (voiceEnabled && messages.length > 0) {
+      const lastMessage = messages[messages.length - 1];
+      if (lastMessage.role === "assistant" && !lastMessage.isStreaming) {
+        speak(lastMessage.content);
+      }
+    }
+  }, [messages, voiceEnabled, speak]);
+  const handleSendMessage = async (content: string) => {
+    let screenContext: string | undefined;
+    if (isSharing) {
+      const description = await getScreenDescription();
+      if (description) {
+        screenContext = "User is sharing their screen. The current screen shows: " + description;
+      }
+    }
+    sendMessage(content, screenContext);
+  };
+  const handleToggleScreenShare = async () => {
+    if (isSharing) {
+      stopSharing();
+    } else {
+      await startSharing();
+    }
+  };
+  const handleToggleVoice = () => {
+    if (voiceEnabled) {
+      stopSpeaking();
+    }
+    setVoiceEnabled(!voiceEnabled);
+  };
+  const handleVoiceSubmit = () => {
+    if (transcript) {
+      handleSendMessage(transcript);
+    }
+  };
+  // Submit voice input when user stops speaking
+  useEffect(() => {
+    if (!isListening && transcript) {
+      handleVoiceSubmit();
+    }
+  }, [isListening]);
+  return (
+    <div className="flex h-screen bg-background">
+      {/* Hidden video and canvas for screen capture */}
+      <video ref={videoRef} className="hidden" autoPlay muted playsInline />
+      <canvas ref={canvasRef} className="hidden" />
+      {/* Sidebar */}
+      <AnimatePresence mode="wait">
+        {sidebarOpen && (
+          <div className="w-72 border-r border-border shrink-0">
+            <ConversationSidebar
+              conversations={conversations}
+              activeConversationId={activeConversationId}
+              onSelectConversation={setActiveConversationId}
+              onNewConversation={createConversation}
+              onDeleteConversation={deleteConversation}
+            />
+          </div>
+        )}
+      </AnimatePresence>
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Header */}
+        <header className="h-14 px-4 flex items-center justify-between border-b border-border bg-background/80 backdrop-blur-sm">
+          <div className="flex items-center gap-3">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              {sidebarOpen ? (
+                <PanelLeftClose className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
+            <h1 className="font-semibold text-foreground">
+              {activeConversation?.title || "AI Assistant"}
+            </h1>
+          </div>
+          {isSharing && (
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20">
+              <div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+              <span className="text-xs font-medium text-primary">Screen Sharing Active</span>
+            </div>
+          )}
+        </header>
+        {/* Messages Area */}
+        <ScrollArea className="flex-1" ref={scrollRef}>
+          <div className="max-w-3xl mx-auto px-4">
+            {messages.length === 0 ? (
+              <WelcomeScreen onSuggestionClick={handleSendMessage} />
+            ) : (
+              <div className="py-4">
+                {messages.map((message) => (
+                  <ChatMessage key={message.id} message={message} />
+                ))}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+        {/* Input Area */}
+        <ChatInput
+          onSendMessage={handleSendMessage}
+          isLoading={isLoading}
+          isListening={isListening}
+          isSpeaking={isSpeaking}
+          isSharing={isSharing}
+          voiceEnabled={voiceEnabled}
+          transcript={transcript}
+          onStartListening={startListening}
+          onStopListening={stopListening}
+          onToggleVoice={handleToggleVoice}
+          onToggleScreenShare={handleToggleScreenShare}
+        />
+      </div>
+      {/* Screen Share Preview */}
+      <AnimatePresence>
+        <ScreenSharePreview
+          stream={stream}
+          isSharing={isSharing}
+          onStop={stopSharing}
+        />
+      </AnimatePresence>
+    </div>
+  );
+}

src/components/ChatMessage.tsx ADDED Viewed

	@@ -0,0 +1,54 @@

+import { motion } from "framer-motion";
+import { User, Bot } from "lucide-react";
+import { Message } from "@/types/chat";
+import { cn } from "@/lib/utils";
+interface ChatMessageProps {
+  message: Message;
+}
+export function ChatMessage({ message }: ChatMessageProps) {
+  const isUser = message.role === "user";
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2 }}
+      className={cn("flex gap-3 py-4", isUser ? "flex-row-reverse" : "")}
+    >
+      {/* Avatar */}
+      <div
+        className={cn(
+          "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+          isUser
+            ? "bg-primary text-primary-foreground"
+            : "bg-accent text-accent-foreground"
+        )}
+      >
+        {isUser ? (
+          <User className="h-4 w-4" />
+        ) : (
+          <Bot className="h-4 w-4" />
+        )}
+      </div>
+      {/* Message Bubble */}
+      <div
+        className={cn(
+          "max-w-[80%] rounded-2xl px-4 py-3",
+          isUser
+            ? "bg-primary text-primary-foreground rounded-tr-sm"
+            : "bg-card text-card-foreground rounded-tl-sm border border-border"
+        )}
+      >
+        <p className="text-sm whitespace-pre-wrap leading-relaxed">
+          {message.content}
+          {message.isStreaming && (
+            <span className="inline-block w-2 h-4 ml-1 bg-current animate-pulse rounded-sm" />
+          )}
+        </p>
+      </div>
+    </motion.div>
+  );
+}

src/components/ConversationSidebar.tsx ADDED Viewed

	@@ -0,0 +1,131 @@

+import { motion } from "framer-motion";
+import { Plus, MessageSquare, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Conversation } from "@/types/chat";
+import { cn } from "@/lib/utils";
+interface ConversationSidebarProps {
+  conversations: Conversation[];
+  activeConversationId: string | null;
+  onSelectConversation: (id: string) => void;
+  onNewConversation: () => void;
+  onDeleteConversation: (id: string) => void;
+}
+export function ConversationSidebar({
+  conversations,
+  activeConversationId,
+  onSelectConversation,
+  onNewConversation,
+  onDeleteConversation,
+}: ConversationSidebarProps) {
+  const groupedConversations = groupByDate(conversations);
+  return (
+    <div className="flex flex-col h-full bg-sidebar">
+      {/* Header */}
+      <div className="p-4 border-b border-sidebar-border">
+        <Button
+          onClick={onNewConversation}
+          className="w-full gap-2 bg-primary/10 hover:bg-primary/20 text-primary border-0"
+          variant="outline"
+        >
+          <Plus className="h-4 w-4" />
+          New chat
+        </Button>
+      </div>
+      {/* Conversation List */}
+      <ScrollArea className="flex-1 px-2">
+        <div className="py-2 space-y-4">
+          {Object.entries(groupedConversations).map(([group, items]) => (
+            <div key={group}>
+              <h3 className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                {group}
+              </h3>
+              <div className="space-y-1">
+                {items.map((conversation) => (
+                  <motion.div
+                    key={conversation.id}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    className="group relative"
+                  >
+                    <button
+                      onClick={() => onSelectConversation(conversation.id)}
+                      className={cn(
+                        "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors",
+                        activeConversationId === conversation.id
+                          ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                          : "text-sidebar-foreground hover:bg-sidebar-accent/50"
+                      )}
+                    >
+                      <MessageSquare className="h-4 w-4 shrink-0 text-muted-foreground" />
+                      <span className="truncate text-sm">
+                        {conversation.title || "New conversation"}
+                      </span>
+                    </button>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="absolute right-2 top-1/2 -translate-y-1/2 h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteConversation(conversation.id);
+                      }}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+          ))}
+          {conversations.length === 0 && (
+            <div className="px-3 py-8 text-center text-muted-foreground text-sm">
+              No conversations yet
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+function groupByDate(conversations: Conversation[]): Record<string, Conversation[]> {
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const groups: Record<string, Conversation[]> = {};
+  conversations.forEach((conversation) => {
+    const date = new Date(conversation.updatedAt);
+    let group: string;
+    if (isSameDay(date, today)) {
+      group = "Today";
+    } else if (isSameDay(date, yesterday)) {
+      group = "Yesterday";
+    } else {
+      group = "Older";
+    }
+    if (!groups[group]) {
+      groups[group] = [];
+    }
+    groups[group].push(conversation);
+  });
+  return groups;
+}
+function isSameDay(date1: Date, date2: Date): boolean {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}

src/components/ScreenSharePreview.tsx ADDED Viewed

	@@ -0,0 +1,65 @@

+import { useRef, useEffect } from "react";
+import { motion } from "framer-motion";
+import { X, Eye } from "lucide-react";
+import { Button } from "@/components/ui/button";
+interface ScreenSharePreviewProps {
+  stream: MediaStream | null;
+  isSharing: boolean;
+  onStop: () => void;
+}
+export function ScreenSharePreview({ stream, isSharing, onStop }: ScreenSharePreviewProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  useEffect(() => {
+    if (videoRef.current && stream) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [stream]);
+  if (!isSharing || !stream) return null;
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9, y: 20 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.9, y: 20 }}
+      className="fixed bottom-24 right-4 w-64 rounded-xl overflow-hidden shadow-2xl border border-border bg-card"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 bg-primary/10 border-b border-border">
+        <div className="flex items-center gap-2">
+          <Eye className="h-4 w-4 text-primary" />
+          <span className="text-xs font-medium text-foreground">Screen Sharing</span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onStop}
+          className="h-6 w-6 rounded-full hover:bg-destructive/20 hover:text-destructive"
+        >
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+      {/* Video Preview */}
+      <div className="relative aspect-video bg-black">
+        <video
+          ref={videoRef}
+          autoPlay
+          muted
+          playsInline
+          className="w-full h-full object-contain"
+        />
+        <div className="absolute inset-0 ring-2 ring-primary/50 ring-inset rounded-b-xl pointer-events-none" />
+      </div>
+      {/* Status */}
+      <div className="px-3 py-2 flex items-center gap-2">
+        <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+        <span className="text-xs text-muted-foreground">AI can see your screen</span>
+      </div>
+    </motion.div>
+  );
+}

src/components/WelcomeScreen.tsx ADDED Viewed

	@@ -0,0 +1,79 @@

+import { useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import { Bot } from "lucide-react";
+interface WelcomeScreenProps {
+  onSuggestionClick: (suggestion: string) => void;
+}
+const suggestions = [
+  { text: "Write a first draft", description: "of an email, essay, or document" },
+  { text: "Get advice", description: "on a project, decision, or idea" },
+  { text: "Learn something new", description: "ask about any topic" },
+  { text: "Analyze my screen", description: "share your screen and ask questions" },
+];
+export function WelcomeScreen({ onSuggestionClick }: WelcomeScreenProps) {
+  const getGreeting = () => {
+    const hour = new Date().getHours();
+    if (hour < 12) return "Good morning";
+    if (hour < 18) return "Good afternoon";
+    return "Good evening";
+  };
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] px-4">
+      <motion.div
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.5, type: "spring" }}
+        className="mb-8"
+      >
+        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary to-blue-400 flex items-center justify-center glow">
+          <Bot className="h-10 w-10 text-primary-foreground" />
+        </div>
+      </motion.div>
+      <motion.h1
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.1 }}
+        className="text-3xl font-semibold text-foreground mb-2"
+      >
+        {getGreeting()}
+      </motion.h1>
+      <motion.p
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.2 }}
+        className="text-lg text-muted-foreground mb-10"
+      >
+        What can I help you with today?
+      </motion.p>
+      <motion.div
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{ delay: 0.3 }}
+        className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-2xl"
+      >
+        {suggestions.map((suggestion, index) => (
+          <motion.button
+            key={index}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 + index * 0.1 }}
+            onClick={() => onSuggestionClick(suggestion.text)}
+            className="group p-4 rounded-xl bg-card hover:bg-accent border border-border hover:border-primary/50 text-left transition-all duration-200"
+          >
+            <p className="font-medium text-foreground group-hover:text-primary transition-colors">
+              {suggestion.text}
+            </p>
+            <p className="text-sm text-muted-foreground">{suggestion.description}</p>
+          </motion.button>
+        ))}
+      </motion.div>
+    </div>
+  );
+}

src/hooks/useChat.ts ADDED Viewed

	@@ -0,0 +1,217 @@

+import { useState, useCallback } from "react";
+import { Message, Conversation } from "@/types/chat";
+const CHAT_URL = `${import.meta.env.VITE_SUPABASE_URL}/functions/v1/chat`;
+export function useChat() {
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [activeConversationId, setActiveConversationId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const activeConversation = conversations.find((c) => c.id === activeConversationId);
+  const messages = activeConversation?.messages || [];
+  const createConversation = useCallback(() => {
+    const newConversation: Conversation = {
+      id: crypto.randomUUID(),
+      title: "New conversation",
+      messages: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    setConversations((prev) => [newConversation, ...prev]);
+    setActiveConversationId(newConversation.id);
+    return newConversation.id;
+  }, []);
+  const updateConversationTitle = useCallback((id: string, title: string) => {
+    setConversations((prev) =>
+      prev.map((c) => (c.id === id ? { ...c, title } : c))
+    );
+  }, []);
+  const deleteConversation = useCallback((id: string) => {
+    setConversations((prev) => prev.filter((c) => c.id !== id));
+    if (activeConversationId === id) {
+      setActiveConversationId(null);
+    }
+  }, [activeConversationId]);
+  const sendMessage = useCallback(
+    async (content: string, screenContext?: string) => {
+      let conversationId = activeConversationId;
+      if (!conversationId) {
+        conversationId = createConversation();
+      }
+      const userMessage: Message = {
+        id: crypto.randomUUID(),
+        role: "user",
+        content,
+        timestamp: new Date(),
+      };
+      // Add user message
+      setConversations((prev) =>
+        prev.map((c) =>
+          c.id === conversationId
+            ? {
+                ...c,
+                messages: [...c.messages, userMessage],
+                updatedAt: new Date(),
+                title: c.messages.length === 0 ? content.slice(0, 50) : c.title,
+              }
+            : c
+        )
+      );
+      setIsLoading(true);
+      try {
+        const currentConversation = conversations.find((c) => c.id === conversationId);
+        const messageHistory = currentConversation?.messages || [];
+        const response = await fetch(CHAT_URL, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY}`,
+          },
+          body: JSON.stringify({
+            messages: [
+              ...messageHistory.map((m) => ({ role: m.role, content: m.content })),
+              { role: "user", content: screenContext ? `[Screen Context: ${screenContext}]\n\n${content}` : content },
+            ],
+          }),
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to get response: ${response.status}`);
+        }
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error("No response body");
+        const decoder = new TextDecoder();
+        let assistantContent = "";
+        const assistantId = crypto.randomUUID();
+        // Add empty assistant message
+        setConversations((prev) =>
+          prev.map((c) =>
+            c.id === conversationId
+              ? {
+                  ...c,
+                  messages: [
+                    ...c.messages,
+                    {
+                      id: assistantId,
+                      role: "assistant" as const,
+                      content: "",
+                      timestamp: new Date(),
+                      isStreaming: true,
+                    },
+                  ],
+                }
+              : c
+          )
+        );
+        let textBuffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          textBuffer += decoder.decode(value, { stream: true });
+          let newlineIndex: number;
+          while ((newlineIndex = textBuffer.indexOf("\n")) !== -1) {
+            let line = textBuffer.slice(0, newlineIndex);
+            textBuffer = textBuffer.slice(newlineIndex + 1);
+            if (line.endsWith("\r")) line = line.slice(0, -1);
+            if (line.startsWith(":") || line.trim() === "") continue;
+            if (!line.startsWith("data: ")) continue;
+            const jsonStr = line.slice(6).trim();
+            if (jsonStr === "[DONE]") break;
+            try {
+              const parsed = JSON.parse(jsonStr);
+              const delta = parsed.choices?.[0]?.delta?.content;
+              if (delta) {
+                assistantContent += delta;
+                setConversations((prev) =>
+                  prev.map((c) =>
+                    c.id === conversationId
+                      ? {
+                          ...c,
+                          messages: c.messages.map((m) =>
+                            m.id === assistantId
+                              ? { ...m, content: assistantContent }
+                              : m
+                          ),
+                        }
+                      : c
+                  )
+                );
+              }
+            } catch {
+              textBuffer = line + "\n" + textBuffer;
+              break;
+            }
+          }
+        }
+        // Mark streaming complete
+        setConversations((prev) =>
+          prev.map((c) =>
+            c.id === conversationId
+              ? {
+                  ...c,
+                  messages: c.messages.map((m) =>
+                    m.id === assistantId ? { ...m, isStreaming: false } : m
+                  ),
+                  updatedAt: new Date(),
+                }
+              : c
+          )
+        );
+      } catch (error) {
+        console.error("Chat error:", error);
+        const errorMessage: Message = {
+          id: crypto.randomUUID(),
+          role: "assistant",
+          content: "Sorry, I encountered an error. Please try again.",
+          timestamp: new Date(),
+        };
+        setConversations((prev) =>
+          prev.map((c) =>
+            c.id === conversationId
+              ? { ...c, messages: [...c.messages, errorMessage] }
+              : c
+          )
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [activeConversationId, conversations, createConversation]
+  );
+  return {
+    conversations,
+    activeConversation,
+    activeConversationId,
+    messages,
+    isLoading,
+    createConversation,
+    setActiveConversationId,
+    updateConversationTitle,
+    deleteConversation,
+    sendMessage,
+  };
+}

src/hooks/useScreenShare.ts ADDED Viewed

	@@ -0,0 +1,76 @@

+import { useState, useCallback, useRef } from "react";
+import { ScreenShareState } from "@/types/chat";
+export function useScreenShare() {
+  const [state, setState] = useState<ScreenShareState>({
+    isSharing: false,
+    stream: null,
+    error: null,
+  });
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const startSharing = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: {
+          displaySurface: "browser",
+        },
+        audio: false,
+      });
+      stream.getVideoTracks()[0].addEventListener("ended", () => {
+        setState({ isSharing: false, stream: null, error: null });
+      });
+      setState({ isSharing: true, stream, error: null });
+      return stream;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to start screen sharing";
+      setState({ isSharing: false, stream: null, error: message });
+      return null;
+    }
+  }, []);
+  const stopSharing = useCallback(() => {
+    if (state.stream) {
+      state.stream.getTracks().forEach((track) => track.stop());
+    }
+    setState({ isSharing: false, stream: null, error: null });
+  }, [state.stream]);
+  const captureFrame = useCallback((): string | null => {
+    if (!state.stream || !videoRef.current || !canvasRef.current) return null;
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
+    return canvas.toDataURL("image/jpeg", 0.8);
+  }, [state.stream]);
+  const getScreenDescription = useCallback(async (): Promise<string | null> => {
+    const frame = captureFrame();
+    if (!frame) return null;
+    // Return base64 image for AI to analyze
+    return frame;
+  }, [captureFrame]);
+  return {
+    ...state,
+    videoRef,
+    canvasRef,
+    startSharing,
+    stopSharing,
+    captureFrame,
+    getScreenDescription,
+  };
+}

src/hooks/useVoice.ts ADDED Viewed

	@@ -0,0 +1,158 @@

+import { useState, useCallback, useRef, useEffect } from "react";
+import { VoiceState } from "@/types/chat";
+// Web Speech API types
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList;
+}
+interface SpeechRecognitionErrorEvent extends Event {
+  error: string;
+}
+interface SpeechRecognitionInstance extends EventTarget {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  start: () => void;
+  stop: () => void;
+  abort: () => void;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
+  onend: (() => void) | null;
+}
+declare global {
+  interface Window {
+    SpeechRecognition: new () => SpeechRecognitionInstance;
+    webkitSpeechRecognition: new () => SpeechRecognitionInstance;
+  }
+}
+export function useVoice() {
+  const [state, setState] = useState<VoiceState>({
+    isListening: false,
+    isSpeaking: false,
+    transcript: "",
+    error: null,
+  });
+  const recognitionRef = useRef<SpeechRecognitionInstance | null>(null);
+  const synthesisRef = useRef<SpeechSynthesisUtterance | null>(null);
+  // Initialize speech recognition
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const SpeechRecognition =
+        window.SpeechRecognition || (window as any).webkitSpeechRecognition;
+      if (SpeechRecognition) {
+        const recognition = new SpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = true;
+        recognition.lang = "en-US";
+        recognition.onresult = (event) => {
+          const transcript = Array.from(event.results)
+            .map((result) => result[0].transcript)
+            .join("");
+          setState((prev) => ({ ...prev, transcript }));
+        };
+        recognition.onerror = (event) => {
+          setState((prev) => ({
+            ...prev,
+            isListening: false,
+            error: event.error,
+          }));
+        };
+        recognition.onend = () => {
+          setState((prev) => ({ ...prev, isListening: false }));
+        };
+        recognitionRef.current = recognition;
+      }
+    }
+    return () => {
+      if (recognitionRef.current) {
+        recognitionRef.current.abort();
+      }
+    };
+  }, []);
+  const startListening = useCallback(() => {
+    if (!recognitionRef.current) {
+      setState((prev) => ({
+        ...prev,
+        error: "Speech recognition not supported",
+      }));
+      return;
+    }
+    setState((prev) => ({
+      ...prev,
+      isListening: true,
+      transcript: "",
+      error: null,
+    }));
+    try {
+      recognitionRef.current.start();
+    } catch (error) {
+      console.error("Failed to start recognition:", error);
+    }
+  }, []);
+  const stopListening = useCallback(() => {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+    }
+    setState((prev) => ({ ...prev, isListening: false }));
+  }, []);
+  const speak = useCallback((text: string) => {
+    if (!window.speechSynthesis) {
+      setState((prev) => ({ ...prev, error: "Speech synthesis not supported" }));
+      return;
+    }
+    // Cancel any ongoing speech
+    window.speechSynthesis.cancel();
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.rate = 1;
+    utterance.pitch = 1;
+    utterance.volume = 1;
+    utterance.onstart = () => {
+      setState((prev) => ({ ...prev, isSpeaking: true }));
+    };
+    utterance.onend = () => {
+      setState((prev) => ({ ...prev, isSpeaking: false }));
+    };
+    utterance.onerror = () => {
+      setState((prev) => ({ ...prev, isSpeaking: false }));
+    };
+    synthesisRef.current = utterance;
+    window.speechSynthesis.speak(utterance);
+  }, []);
+  const stopSpeaking = useCallback(() => {
+    window.speechSynthesis.cancel();
+    setState((prev) => ({ ...prev, isSpeaking: false }));
+  }, []);
+  return {
+    ...state,
+    startListening,
+    stopListening,
+    speak,
+    stopSpeaking,
+  };
+}

src/index.css CHANGED Viewed

@@ -2,95 +2,96 @@
 @tailwind components;
 @tailwind utilities;
-/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
-All colors MUST be HSL.
-*/
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --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: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
   .dark {
-    --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: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --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: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
@@ -100,6 +101,79 @@ All colors MUST be HSL.
   }
   body {
-    @apply bg-background text-foreground;
   }
 }

 @tailwind components;
 @tailwind utilities;
+/* AI Desktop Assistant - Dark Modern Theme (Copilot-inspired) */
 @layer base {
   :root {
+    --background: 222 47% 11%;
+    --foreground: 210 40% 98%;
+    --card: 222 47% 14%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222 47% 12%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 222 47% 11%;
+    --secondary: 217 33% 17%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217 33% 17%;
+    --muted-foreground: 215 20% 65%;
+    --accent: 217 33% 22%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 84% 60%;
     --destructive-foreground: 210 40% 98%;
+    --border: 217 33% 20%;
+    --input: 217 33% 17%;
+    --ring: 217 91% 60%;
+    --radius: 0.75rem;
+    /* Custom tokens for AI assistant */
+    --glass: 222 47% 16%;
+    --glass-border: 217 33% 25%;
+    --glow: 217 91% 60%;
+    --user-bubble: 217 91% 50%;
+    --assistant-bubble: 222 47% 18%;
+    --sidebar-bg: 222 47% 8%;
+    --hover-accent: 217 33% 25%;
+    --sidebar-background: 222 47% 8%;
+    --sidebar-foreground: 215 20% 65%;
+    --sidebar-primary: 217 91% 60%;
+    --sidebar-primary-foreground: 222 47% 11%;
+    --sidebar-accent: 217 33% 17%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217 33% 15%;
+    --sidebar-ring: 217 91% 60%;
   }
   .dark {
+    --background: 222 47% 11%;
     --foreground: 210 40% 98%;
+    --card: 222 47% 14%;
     --card-foreground: 210 40% 98%;
+    --popover: 222 47% 12%;
     --popover-foreground: 210 40% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 222 47% 11%;
+    --secondary: 217 33% 17%;
     --secondary-foreground: 210 40% 98%;
+    --muted: 217 33% 17%;
+    --muted-foreground: 215 20% 65%;
+    --accent: 217 33% 22%;
     --accent-foreground: 210 40% 98%;
+    --destructive: 0 62% 30%;
     --destructive-foreground: 210 40% 98%;
+    --border: 217 33% 20%;
+    --input: 217 33% 17%;
+    --ring: 217 91% 60%;
+    --sidebar-background: 222 47% 8%;
+    --sidebar-foreground: 215 20% 65%;
+    --sidebar-primary: 217 91% 60%;
+    --sidebar-primary-foreground: 222 47% 11%;
+    --sidebar-accent: 217 33% 17%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217 33% 15%;
+    --sidebar-ring: 217 91% 60%;
   }
 }
   }
   body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+@layer utilities {
+  .glass {
+    @apply bg-card/80 backdrop-blur-xl border border-border/50;
+  }
+  .glass-hover {
+    @apply hover:bg-accent/50 transition-colors duration-200;
+  }
+  .glow {
+    box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
   }
+  .glow-subtle {
+    box-shadow: 0 0 10px hsl(var(--primary) / 0.15);
+  }
+  .text-gradient {
+    @apply bg-gradient-to-r from-primary to-blue-400 bg-clip-text text-transparent;
+  }
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted)) transparent;
+  }
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted));
+    border-radius: 3px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground));
+  }
+}
+/* Animations */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 20px hsl(var(--primary) / 0.4);
+  }
+  50% {
+    box-shadow: 0 0 40px hsl(var(--primary) / 0.6);
+  }
+}
+@keyframes voice-wave {
+  0%, 100% {
+    transform: scaleY(0.5);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+.animate-voice-wave {
+  animation: voice-wave 0.5s ease-in-out infinite;
 }

src/integrations/supabase/client.ts ADDED Viewed

	@@ -0,0 +1,17 @@

+// This file is automatically generated. Do not edit it directly.
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from './types';
+const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
+const SUPABASE_PUBLISHABLE_KEY = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY;
+// Import the supabase client like this:
+// import { supabase } from "@/integrations/supabase/client";
+export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, {
+  auth: {
+    storage: localStorage,
+    persistSession: true,
+    autoRefreshToken: true,
+  }
+});

src/integrations/supabase/types.ts ADDED Viewed

	@@ -0,0 +1,155 @@

+export type Json =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: Json | undefined }
+  | Json[]
+export type Database = {
+  // Allows to automatically instantiate createClient with right options
+  // instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
+  __InternalSupabase: {
+    PostgrestVersion: "14.1"
+  }
+  public: {
+    Tables: {
+      [_ in never]: never
+    }
+    Views: {
+      [_ in never]: never
+    }
+    Functions: {
+      [_ in never]: never
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+}
+type DatabaseWithoutInternals = Omit<Database, "__InternalSupabase">
+type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, "public">]
+export type Tables<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof (DefaultSchema["Tables"] & DefaultSchema["Views"])
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
+        DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"] &
+      DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema["Tables"] &
+        DefaultSchema["Views"])
+    ? (DefaultSchema["Tables"] &
+        DefaultSchema["Views"])[DefaultSchemaTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
+    : never
+export type TablesInsert<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema["Tables"]
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
+    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
+    : never
+export type TablesUpdate<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema["Tables"]
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"]
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema["Tables"]
+    ? DefaultSchema["Tables"][DefaultSchemaTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
+    : never
+export type Enums<
+  DefaultSchemaEnumNameOrOptions extends
+    | keyof DefaultSchema["Enums"]
+    | { schema: keyof DatabaseWithoutInternals },
+  EnumName extends DefaultSchemaEnumNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"]
+    : never = never,
+> = DefaultSchemaEnumNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema["Enums"]
+    ? DefaultSchema["Enums"][DefaultSchemaEnumNameOrOptions]
+    : never
+export type CompositeTypes<
+  PublicCompositeTypeNameOrOptions extends
+    | keyof DefaultSchema["CompositeTypes"]
+    | { schema: keyof DatabaseWithoutInternals },
+  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"]
+    : never = never,
+> = PublicCompositeTypeNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions["schema"]]["CompositeTypes"][CompositeTypeName]
+  : PublicCompositeTypeNameOrOptions extends keyof DefaultSchema["CompositeTypes"]
+    ? DefaultSchema["CompositeTypes"][PublicCompositeTypeNameOrOptions]
+    : never
+export const Constants = {
+  public: {
+    Enums: {},
+  },
+} as const

src/pages/Index.tsx CHANGED Viewed

@@ -1,14 +1,7 @@
-// Update this page (the content is just a fallback if you fail to update the page)
 const Index = () => {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
-      </div>
-    </div>
-  );
 };
 export default Index;

+import { ChatInterface } from "@/components/ChatInterface";
 const Index = () => {
+  return <ChatInterface />;
 };
 export default Index;

src/types/chat.ts ADDED Viewed

	@@ -0,0 +1,28 @@

+export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: Date;
+  isStreaming?: boolean;
+}
+export interface Conversation {
+  id: string;
+  title: string;
+  messages: Message[];
+  createdAt: Date;
+  updatedAt: Date;
+}
+export interface ScreenShareState {
+  isSharing: boolean;
+  stream: MediaStream | null;
+  error: string | null;
+}
+export interface VoiceState {
+  isListening: boolean;
+  isSpeaking: boolean;
+  transcript: string;
+  error: string | null;
+}

supabase/config.toml ADDED Viewed

	@@ -0,0 +1,4 @@

+project_id = "rxrhjvwnfxtosbneybwa"
+[functions.chat]
+verify_jwt = false

supabase/functions/chat/index.ts ADDED Viewed

	@@ -0,0 +1,83 @@

+import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
+};
+serve(async (req) => {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { headers: corsHeaders });
+  }
+  try {
+    const { messages, screenContext } = await req.json();
+    const LOVABLE_API_KEY = Deno.env.get("LOVABLE_API_KEY");
+    if (!LOVABLE_API_KEY) {
+      throw new Error("LOVABLE_API_KEY is not configured");
+    }
+    const systemPrompt = `You are an intelligent AI desktop assistant with vision and voice capabilities. You are helpful, friendly, and professional.
+Key capabilities:
+- You can help with a wide range of tasks including writing, research, coding, and creative work
+- When the user shares their screen, you can see what they're viewing and provide contextual assistance
+- You can engage in natural voice conversations
+- You're knowledgeable about many topics and can explain complex concepts clearly
+Guidelines:
+- Be concise but thorough in your responses
+- When analyzing screen content, be specific about what you see and how you can help
+- Maintain a warm, professional tone
+- If you're unsure about something, acknowledge it honestly
+- Format responses with markdown when appropriate for readability`;
+    const response = await fetch("https://ai.gateway.lovable.dev/v1/chat/completions", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${LOVABLE_API_KEY}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model: "google/gemini-3-flash-preview",
+        messages: [
+          { role: "system", content: systemPrompt },
+          ...messages,
+        ],
+        stream: true,
+      }),
+    });
+    if (!response.ok) {
+      if (response.status === 429) {
+        return new Response(
+          JSON.stringify({ error: "Rate limit exceeded. Please try again later." }),
+          { status: 429, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+        );
+      }
+      if (response.status === 402) {
+        return new Response(
+          JSON.stringify({ error: "Usage limit reached. Please add credits to continue." }),
+          { status: 402, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+        );
+      }
+      const errorText = await response.text();
+      console.error("AI gateway error:", response.status, errorText);
+      return new Response(
+        JSON.stringify({ error: "AI service error" }),
+        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+    return new Response(response.body, {
+      headers: { ...corsHeaders, "Content-Type": "text/event-stream" },
+    });
+  } catch (error) {
+    console.error("Chat function error:", error);
+    return new Response(
+      JSON.stringify({ error: error instanceof Error ? error.message : "Unknown error" }),
+      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+  }
+});

tailwind.config.ts CHANGED Viewed

@@ -57,6 +57,8 @@ export default {
           border: "hsl(var(--sidebar-border))",
           ring: "hsl(var(--sidebar-ring))",
         },
       },
       borderRadius: {
         lg: "var(--radius)",
@@ -65,25 +67,32 @@ export default {
       },
       keyframes: {
         "accordion-down": {
-          from: {
-            height: "0",
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
         },
         "accordion-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: "0",
-          },
         },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
   },

           border: "hsl(var(--sidebar-border))",
           ring: "hsl(var(--sidebar-ring))",
         },
+        glass: "hsl(var(--glass))",
+        glow: "hsl(var(--glow))",
       },
       borderRadius: {
         lg: "var(--radius)",
       },
       keyframes: {
         "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
         },
         "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "fade-in": {
+          "0%": { opacity: "0", transform: "translateY(10px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        "slide-up": {
+          "0%": { opacity: "0", transform: "translateY(20px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        "scale-in": {
+          "0%": { opacity: "0", transform: "scale(0.95)" },
+          "100%": { opacity: "1", transform: "scale(1)" },
         },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fade-in 0.3s ease-out",
+        "slide-up": "slide-up 0.4s ease-out",
+        "scale-in": "scale-in 0.2s ease-out",
       },
     },
   },

vite.config.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import path from "path";
 import { componentTagger } from "lovable-tagger";
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -12,7 +13,62 @@ export default defineConfig(({ mode }) => ({
       overlay: false,
     },
   },
-  plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

 import react from "@vitejs/plugin-react-swc";
 import path from "path";
 import { componentTagger } from "lovable-tagger";
+import { VitePWA } from "vite-plugin-pwa";
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
       overlay: false,
     },
   },
+  plugins: [
+    react(),
+    mode === "development" && componentTagger(),
+    VitePWA({
+      registerType: "autoUpdate",
+      includeAssets: ["favicon.ico", "robots.txt"],
+      manifest: {
+        name: "AI Desktop Assistant",
+        short_name: "AI Assistant",
+        description: "Your intelligent desktop assistant with vision and voice capabilities",
+        theme_color: "#0f172a",
+        background_color: "#0f172a",
+        display: "standalone",
+        orientation: "portrait",
+        scope: "/",
+        start_url: "/",
+        icons: [
+          {
+            src: "/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+        ],
+      },
+      workbox: {
+        globPatterns: ["**/*.{js,css,html,ico,png,svg,woff2}"],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "google-fonts-cache",
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+        ],
+      },
+    }),
+  ].filter(Boolean),
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),