New bundle chat initial impl

.gitignore

@@ -14,7 +14,3 @@ restate-data
 
 internal
 .turbo
-
-.windsurfrules
-CLAUDE.md 
-.cursor/

apps/desktop/package.json

@@ -39,10 +39,10 @@
     "@hypr/tiptap": "workspace:^",
     "@hypr/ui": "workspace:^",
     "@hypr/utils": "workspace:^",
-    "@lingui/core": "^5.5.0",
-    "@lingui/react": "^5.5.0",
-    "@lobehub/icons": "^2.38.0",
-    "@modelcontextprotocol/sdk": "^1.19.1",
+    "@lingui/core": "^5.5.1",
+    "@lingui/react": "^5.5.1",
+    "@lobehub/icons": "^2.42.0",
+    "@modelcontextprotocol/sdk": "^1.20.0",
     "@mux/mux-player-react": "^3.6.1",
     "@mux/mux-video": "^0.26.1",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -88,11 +88,11 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-grid-layout": "^1.5.2",
-    "react-hook-form": "^7.64.0",
+    "react-hook-form": "^7.65.0",
     "react-hotkeys-hook": "^4.6.2",
     "react-resizable": "^3.0.5",
     "react-scan": "^0.4.3",
-    "remixicon": "^4.6.0",
+    "remixicon": "^4.7.0",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.6.0",
     "tauri-plugin-keygen-api": "github:bagindo/tauri-plugin-keygen#v2",
@@ -103,16 +103,16 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@lingui/babel-plugin-lingui-macro": "^5.5.0",
-    "@lingui/cli": "^5.5.0",
-    "@lingui/vite-plugin": "^5.5.0",
+    "@lingui/babel-plugin-lingui-macro": "^5.5.1",
+    "@lingui/cli": "^5.5.1",
+    "@lingui/vite-plugin": "^5.5.1",
     "@mux/mux-player": "^3.6.1",
     "@tanstack/router-plugin": "^1.132.51",
     "@tauri-apps/cli": "^2.8.4",
     "@types/diff": "^8.0.0",
     "@types/html-pdf": "^3.0.3",
     "@types/jspdf": "^2.0.0",
-    "@types/node": "^22.18.8",
+    "@types/node": "^22.18.9",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
     "@types/react-grid-layout": "^1.3.5",

apps/desktop/src/routes/__root.tsx

@@ -3,7 +3,6 @@ import { scan } from "react-scan";
 
 import { useQuery } from "@tanstack/react-query";
 import { CatchNotFound, createRootRouteWithContext, Outlet, useNavigate } from "@tanstack/react-router";
-import { listen } from "@tauri-apps/api/event";
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { lazy, Suspense, useEffect } from "react";
 
@@ -80,19 +79,6 @@ function Component() {
     scan({ enabled: false });
   }, []);
 
-  // Listen for debug events from control window
-  useEffect(() => {
-    let unlisten: (() => void) | undefined;
-
-    listen<string>("debug", (event) => {
-      console.log(`[Control Debug] ${event.payload}`);
-    }).then((fn) => {
-      unlisten = fn;
-    });
-
-    return () => unlisten?.();
-  }, []);
-
   return (
     <HyprProvider>
       <CatchNotFound fallback={(e) => <CatchNotFoundFallback error={e} />}>

apps/desktop2/.cursor/rules/style.mdc

@@ -0,0 +1,7 @@
+---
+alwaysApply: true
+---
+
+## Conditional Tailwind ClassNames
+
+- Use `cn` (import with `import { cn } from "@hypr/ui/lib/utils"`). It is similar to `clsx`. Always pass an array.

apps/desktop2/package.json

@@ -12,6 +12,8 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@ai-sdk/openai-compatible": "^1.0.22",
+    "@ai-sdk/react": "^2.0.68",
     "@electric-sql/client": "^1.0.14",
     "@hypr/db": "workspace:*",
     "@hypr/plugin-analytics": "workspace:*",
@@ -21,7 +23,7 @@
     "@hypr/ui": "workspace:^",
     "@hypr/utils": "workspace:^",
     "@sentry/react": "^8.55.0",
-    "@supabase/supabase-js": "^2.74.0",
+    "@supabase/supabase-js": "^2.75.0",
     "@t3-oss/env-core": "^0.13.8",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-router": "^1.132.47",
@@ -34,14 +36,17 @@
     "@tauri-apps/plugin-updater": "^2.9.0",
     "@wavesurfer/react": "^1.0.11",
     "@xstate/store": "^3.9.3",
+    "ai": "^5.0.68",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.544.0",
     "motion": "^11.18.2",
+    "re-resizable": "^6.11.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hotkeys-hook": "^4.6.2",
-    "tinybase": "^6.7.0",
+    "streamdown": "^1.4.0",
+    "tinybase": "^6.7.1",
     "tinytick": "^1.2.8",
     "wavesurfer.js": "^7.11.0",
     "zod": "^4.1.12",
@@ -52,7 +57,7 @@
     "@tanstack/react-router-devtools": "^1.132.51",
     "@tanstack/router-plugin": "^1.132.51",
     "@tauri-apps/cli": "^2.8.4",
-    "@types/node": "^24.7.0",
+    "@types/node": "^24.7.1",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
     "@vitejs/plugin-react": "^4.7.0",

apps/desktop2/src/components/chat/body.tsx

@@ -0,0 +1,69 @@
+import type { UIMessage } from "ai";
+import { MessageCircle } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { Streamdown } from "streamdown";
+
+export function ChatBody({ messages }: { messages: UIMessage[] }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  if (messages.length === 0) {
+    return <ChatBodyEmpty />;
+  }
+
+  return (
+    <div ref={scrollRef} className="flex-1 overflow-y-auto">
+      <div className="flex flex-col">
+        {messages.map((message) => <ChatBodyMessage key={message.id} message={message} />)}
+      </div>
+    </div>
+  );
+}
+
+function ChatBodyEmpty() {
+  return (
+    <div className="flex-1 p-4 overflow-y-auto">
+      <div className="flex flex-col items-center justify-center h-full text-center">
+        <MessageCircle className="w-12 h-12 text-neutral-300 mb-3" />
+        <p className="text-neutral-600 text-sm mb-2">Ask the AI assistant about anything.</p>
+        <p className="text-neutral-400 text-xs">It can also do few cool stuff for you.</p>
+      </div>
+    </div>
+  );
+}
+
+function ChatBodyMessage({ message }: { message: UIMessage }) {
+  const isUser = message.role === "user";
+
+  const content = message.parts
+    .filter((p) => p.type === "text")
+    .map((p) => (p.type === "text" ? p.text : ""))
+    .join("");
+
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-2`}>
+      <div
+        className={`max-w-[80%] rounded-2xl px-4 py-2 ${
+          isUser
+            ? "bg-blue-500 text-white"
+            : "bg-neutral-100 text-neutral-900"
+        }`}
+      >
+        <Markdown content={content} />
+      </div>
+    </div>
+  );
+}
+
+function Markdown({ content }: { content: string }) {
+  return (
+    <Streamdown className="prose prose-sm dark:prose-invert max-w-none">
+      {content}
+    </Streamdown>
+  );
+}