@melony/react 0.1.11 → 0.1.14

package/dist/index.js

@@ -1,25 +1,24 @@
-import * as React9 from 'react';
+import * as React10 from 'react';
 import { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { generateId } from 'melony/client';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { generateId } from '@melony/core/client';
-import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
 import * as ICONS from '@tabler/icons-react';
-import { IconArrowUp, IconPlus, IconMessage, IconTrash, IconArrowLeft, IconHistory, IconX, IconUser, IconLogout, IconBrandGoogle, IconSelector, IconCheck, IconChevronUp, IconChevronDown } from '@tabler/icons-react';
+import { IconArrowUp, IconPlus, IconMessage, IconTrash, IconHistory, IconX, IconArrowLeft, IconChevronLeft, IconChevronRight, IconUser, IconLogout, IconBrandGoogle, IconDeviceDesktop, IconMoon, IconSun, IconSelector, IconCheck, IconChevronUp, IconChevronDown } from '@tabler/icons-react';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
-import { cva } from 'class-variance-authority';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Select as Select$1 } from '@base-ui/react/select';
-import { Button as Button$1 } from '@base-ui/react/button';
 import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
 import { Menu } from '@base-ui/react/menu';
 
 // src/providers/melony-provider.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+
+// src/lib/group-events-to-messages.ts
 function groupEventsToMessages(events) {
   if (events.length === 0) return [];
   const messages = [];
@@ -46,15 +45,22 @@ function groupEventsToMessages(events) {
 var MelonyContext = createContext(
   void 0
 );
-var MelonyProvider = ({
+var MelonyClientProvider = ({
   children,
-  client
+  client,
+  initialEvents
 }) => {
   const [state, setState] = useState(client.getState());
+  useEffect(() => {
+    if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
+      client.reset(initialEvents);
+    }
+  }, [client, initialEvents]);
   useEffect(() => {
     setState(client.getState());
+    const unsubscribe = client.subscribe(setState);
     return () => {
-      client.subscribe(setState);
+      unsubscribe();
     };
   }, [client]);
   const sendEvent = useCallback(
@@ -65,16 +71,19 @@ var MelonyProvider = ({
     },
     [client]
   );
-  const clear = useCallback(() => client.clear(), [client]);
+  const reset = useCallback(
+    (events) => client.reset(events),
+    [client]
+  );
   const value = useMemo(
     () => ({
       ...state,
       messages: groupEventsToMessages(state.events),
       sendEvent,
-      clear,
+      reset,
       client
     }),
-    [state, sendEvent, clear, client]
+    [state, sendEvent, reset, client]
   );
   return /* @__PURE__ */ jsx(MelonyContext.Provider, { value, children });
 };
@@ -141,7 +150,9 @@ var AuthProvider = ({
   }
   return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
 };
-var ThreadContext = createContext(void 0);
+var ThreadContext = createContext(
+  void 0
+);
 var ThreadProvider = ({
   children,
   service,
@@ -212,9 +223,6 @@ var ThreadProvider = ({
   const refreshThreads = useCallback(async () => {
     await fetchThreads();
   }, [fetchThreads]);
-  const threadMessages = useMemo(() => {
-    return groupEventsToMessages(threadEvents);
-  }, [threadEvents]);
   useEffect(() => {
     if (!activeThreadId) {
       setThreadEvents([]);
@@ -256,7 +264,6 @@ var ThreadProvider = ({
       deleteThread,
       refreshThreads,
       threadEvents,
-      threadMessages,
       isLoadingEvents
     }),
     [
@@ -269,17 +276,75 @@ var ThreadProvider = ({
       deleteThread,
       refreshThreads,
       threadEvents,
-      threadMessages,
       isLoadingEvents
     ]
   );
   return /* @__PURE__ */ jsx(ThreadContext.Provider, { value, children });
 };
-var useMelony = () => {
+var ThemeContext = createContext(void 0);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = useState("system");
+  const [resolvedTheme, setResolvedTheme] = useState("light");
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem("theme");
+      if (stored) {
+        setThemeState(stored);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (theme === "system") {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const updateResolvedTheme = () => {
+          setResolvedTheme(mediaQuery.matches ? "dark" : "light");
+        };
+        updateResolvedTheme();
+        mediaQuery.addEventListener("change", updateResolvedTheme);
+        return () => mediaQuery.removeEventListener("change", updateResolvedTheme);
+      } else {
+        setResolvedTheme(theme);
+      }
+    }
+  }, [theme]);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const root = document.documentElement;
+      if (resolvedTheme === "dark") {
+        root.classList.add("dark");
+      } else {
+        root.classList.remove("dark");
+      }
+    }
+  }, [resolvedTheme]);
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", newTheme);
+    }
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+var useMelony = (options) => {
   const context = useContext(MelonyContext);
   if (context === void 0) {
-    throw new Error("useMelony must be used within a MelonyProvider");
+    throw new Error("useMelony must be used within a MelonyClientProvider");
   }
+  const { client, reset } = context;
+  const { initialEvents } = options || {};
+  useEffect(() => {
+    if (initialEvents && initialEvents.length > 0 && client.getState().events.length === 0) {
+      reset(initialEvents);
+    }
+  }, [client, initialEvents, reset]);
   return context;
 };
 var useAuth = () => {
@@ -296,6 +361,103 @@ var useThreads = () => {
   }
   return context;
 };
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Composer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Type a message...",
+  isLoading,
+  className
+}) {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "submit",
+        disabled: !value.trim() && !isLoading || isLoading,
+        size: "icon-lg",
+        onClick: () => onSubmit(),
+        children: /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
+      }
+    ) })
+  ] }) });
+}
 function Card({
   className,
   size = "default",
@@ -364,7 +526,7 @@ var Card2 = ({
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      className: cn("w-full max-w-2xl shadow-sm", className),
+      className: cn("min-w-96", className),
       style,
       children: [
         (title || subtitle) && /* @__PURE__ */ jsxs(CardHeader, { className: "pb-3", children: [
@@ -1185,19 +1347,6 @@ var Input2 = ({
     )
   ] });
 };
-function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      "data-slot": "textarea",
-      className: cn(
-        "border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-xl border px-3 py-3 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
 var Textarea2 = ({
   placeholder,
   defaultValue,
@@ -1569,50 +1718,6 @@ var RadioGroup = ({
     )
   ] });
 };
-var buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 var Button2 = ({
   label,
   variant = "primary",
@@ -1629,6 +1734,8 @@ var Button2 = ({
     secondary: "secondary",
     danger: "destructive",
     outline: "outline",
+    ghost: "ghost",
+    link: "link",
     success: "default"
     // Success doesn't have a direct shadcn mapping in base variant, default is usually primary
   };
@@ -1697,6 +1804,32 @@ var Form = ({ children, onSubmitAction, className, style }) => {
     }
   );
 };
+function StarterPrompts({
+  prompts,
+  onPromptClick
+}) {
+  if (!prompts || prompts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500 mt-auto max-w-2xl", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "What can I help with today?" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 w-full", children: prompts.map((item, index) => /* @__PURE__ */ jsx(
+      Button2,
+      {
+        label: item.label,
+        variant: "ghost",
+        size: "lg",
+        onClickAction: {
+          type: "text",
+          role: "user",
+          data: { content: item.prompt }
+        },
+        className: "w-full justify-start"
+      },
+      index
+    )) })
+  ] });
+}
 function UIRenderer({ node }) {
   const { type, props, children } = node;
   const typeMap = {
@@ -1735,46 +1868,57 @@ function UIRenderer({ node }) {
   const componentProps = { ...props };
   return /* @__PURE__ */ jsx(Component, { ...componentProps, children: renderedChildren });
 }
-function Composer({
-  value,
-  onChange,
-  onSubmit,
-  placeholder = "Type a message...",
-  isLoading,
-  className
-}) {
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      onSubmit();
+function MessageContent({ events }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: events.map((event, index) => {
+    if (event.type === "text-delta") {
+      return /* @__PURE__ */ jsx("span", { children: event.data?.delta }, index);
     }
-  };
-  return /* @__PURE__ */ jsx("div", { className: cn("relative flex flex-col w-full", className), children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col w-full border-input border-[1.5px] rounded-3xl bg-background shadow-sm focus-within:border-ring transition-all p-2", children: [
-    /* @__PURE__ */ jsx(
-      Textarea,
-      {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder,
-        className: "min-h-[44px] max-h-[200px] border-none bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-3 py-2 text-[15px] resize-none"
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center px-2 pb-0.5", children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "submit",
-        disabled: !value.trim() && !isLoading || isLoading,
-        size: "icon",
-        onClick: () => onSubmit(),
-        className: cn(
-          "h-8 w-8 rounded-full transition-all shrink-0",
-          value.trim() ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted-foreground/20 text-muted-foreground/40"
-        ),
-        children: /* @__PURE__ */ jsx(IconArrowUp, { className: "h-5 w-5" })
-      }
-    ) })
-  ] }) });
+    if (event.type === "text") {
+      return /* @__PURE__ */ jsx("p", { children: event.data?.content || event.data?.text }, index);
+    }
+    if (event.ui) {
+      return /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, index);
+    }
+    return null;
+  }) });
+}
+function MessageBubble({ message }) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col",
+        isUser ? "items-end" : "items-start"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-start max-w-[85%] rounded-2xl px-4 py-2 space-y-4 whitespace-pre-wrap",
+            isUser ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
+          ),
+          children: /* @__PURE__ */ jsx(MessageContent, { events: message.content })
+        }
+      )
+    }
+  );
+}
+function LoadingIndicator() {
+  return /* @__PURE__ */ jsx("div", { className: "text-muted-foreground animate-pulse", children: "Thinking..." });
+}
+function ErrorDisplay({ error }) {
+  return /* @__PURE__ */ jsx("div", { className: "text-destructive p-2 border border-destructive rounded-md bg-destructive/10", children: error.message });
+}
+function MessageList({ messages, isLoading, error }) {
+  if (messages.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    messages.map((message, index) => /* @__PURE__ */ jsx(MessageBubble, { message }, index)),
+    isLoading && /* @__PURE__ */ jsx(LoadingIndicator, {}),
+    error && /* @__PURE__ */ jsx(ErrorDisplay, { error })
+  ] });
 }
 function Thread({
   className,
@@ -1806,57 +1950,38 @@ function Thread({
       handleSubmit(void 0, prompt);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full bg-background", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto w-full", children: [
-        messages.length === 0 && starterPrompts && starterPrompts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-[300px] space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-center space-y-2", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: "What can I help with today?" }) }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 w-full max-w-2xl px-4", children: starterPrompts.map((item, i) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handleStarterPromptClick(item.prompt),
-              className: "flex items-center gap-3 p-4 rounded-xl border bg-card hover:bg-muted/50 transition-all text-left group",
-              children: [
-                item.icon && /* @__PURE__ */ jsx("div", { className: "p-2 rounded-lg bg-muted group-hover:bg-background transition-colors", children: item.icon }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: item.label })
-              ]
-            },
-            i
-          )) })
-        ] }),
-        messages.map((message, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex flex-col",
-              message.role === "user" ? "items-end" : "items-start"
+  const showStarterPrompts = messages.length === 0 && starterPrompts && starterPrompts.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col h-full bg-background", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 pb-36", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "max-w-4xl mx-auto w-full p-4",
+            showStarterPrompts && "min-h-full flex flex-col"
+          ),
+          children: [
+            showStarterPrompts && /* @__PURE__ */ jsx(
+              StarterPrompts,
+              {
+                prompts: starterPrompts,
+                onPromptClick: handleStarterPromptClick
+              }
             ),
-            children: /* @__PURE__ */ jsx(
-              "div",
+            /* @__PURE__ */ jsx(
+              MessageList,
               {
-                className: cn(
-                  "max-w-[85%] rounded-2xl px-4 py-2 space-y-2",
-                  message.role === "user" ? "bg-primary text-primary-foreground" : "px-0 py-0 text-foreground"
-                ),
-                children: message.content.map((event, j) => {
-                  if (event.type === "text-delta")
-                    return /* @__PURE__ */ jsx("span", { children: event.data?.delta }, j);
-                  if (event.type === "text")
-                    return /* @__PURE__ */ jsx("p", { children: event.data?.content || event.data?.text }, j);
-                  if (event.ui) return /* @__PURE__ */ jsx(UIRenderer, { node: event.ui }, j);
-                  return null;
-                })
+                messages,
+                isLoading,
+                error
               }
             )
-          },
-          i
-        )),
-        isLoading && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground animate-pulse", children: "Thinking..." }),
-        error && /* @__PURE__ */ jsx("div", { className: "text-destructive p-2 border border-destructive rounded-md bg-destructive/10", children: error.message })
-      ] }),
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-4 border-t w-full", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 p-4 w-full", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsx(
       Composer,
       {
         value: input,
@@ -1868,18 +1993,34 @@ function Thread({
     ) }) })
   ] });
 }
+function ChatHeader({
+  title,
+  leftContent,
+  rightContent,
+  className,
+  titleClassName,
+  children
+}) {
+  if (children) {
+    return /* @__PURE__ */ jsx("div", { className: cn("p-4 border-b border-border h-14 flex items-center shrink-0", className), children });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-4 border-b border-border h-14 flex items-center justify-between shrink-0", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+      leftContent,
+      title && /* @__PURE__ */ jsx("div", { className: cn(
+        "text-sm font-semibold truncate",
+        typeof title === "string" ? titleClassName : ""
+      ), children: title })
+    ] }),
+    rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 shrink-0 ml-2", children: rightContent })
+  ] });
+}
 var ThreadList = ({
   className,
   emptyState,
   onThreadSelect
 }) => {
-  const {
-    threads,
-    activeThreadId,
-    selectThread,
-    createThread,
-    deleteThread
-  } = useThreads();
+  const { threads, activeThreadId, selectThread, createThread, deleteThread } = useThreads();
   const handleThreadClick = (threadId) => {
     if (threadId !== activeThreadId) {
       selectThread(threadId);
@@ -1917,10 +2058,10 @@ var ThreadList = ({
     return d.toLocaleDateString();
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "p-2 border-b", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxs(
       Button,
       {
-        variant: "outline",
+        variant: "ghost",
         size: "sm",
         onClick: handleNewThread,
         className: "w-full justify-start",
@@ -1941,31 +2082,13 @@ var ThreadList = ({
         {
           onClick: () => handleThreadClick(thread.id),
           className: cn(
-            "group relative flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors",
-            isActive ? "bg-primary text-primary-foreground" : "hover:bg-muted"
+            "group relative flex items-center gap-3 px-3 py-1.5 rounded-lg cursor-pointer transition-colors",
+            isActive ? "bg-muted" : "hover:bg-muted"
           ),
           children: [
             /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-sm font-medium truncate",
-                    isActive && "text-primary-foreground"
-                  ),
-                  children: thread.title || `Thread ${thread.id.slice(0, 8)}`
-                }
-              ),
-              thread.updatedAt && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "text-xs shrink-0",
-                    isActive ? "text-primary-foreground/70" : "text-muted-foreground"
-                  ),
-                  children: formatDate(thread.updatedAt)
-                }
-              )
+              /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium truncate"), children: thread.title || `Thread ${thread.id.slice(0, 8)}` }),
+              thread.updatedAt && /* @__PURE__ */ jsx("span", { className: cn("text-xs shrink-0"), children: formatDate(thread.updatedAt) })
             ] }) }),
             /* @__PURE__ */ jsx(
               Button,
@@ -1991,7 +2114,8 @@ function ChatPopup({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
-  defaultOpen = false
+  defaultOpen = false,
+  headerProps
 }) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const [view, setView] = useState("chat");
@@ -2006,9 +2130,11 @@ function ChatPopup({
   };
   return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4 font-sans", children: [
     isOpen && /* @__PURE__ */ jsxs(Card, { className: "py-0 w-[440px] h-[640px] flex flex-col overflow-hidden border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 shadow-2xl animate-in fade-in zoom-in-95 duration-200 origin-bottom-right", children: [
-      /* @__PURE__ */ jsxs(CardHeader, { className: "p-4 border-b flex flex-row items-center justify-between space-y-0 h-14 shrink-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          view === "history" && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
+        ChatHeader,
+        {
+          title: view === "history" ? "History" : title,
+          leftContent: view === "history" ? /* @__PURE__ */ jsx(
             Button,
             {
               variant: "ghost",
@@ -2017,44 +2143,44 @@ function ChatPopup({
               className: "text-muted-foreground hover:text-foreground",
               children: /* @__PURE__ */ jsx(IconArrowLeft, { className: "size-4" })
             }
-          ),
-          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-semibold", children: view === "history" ? "History" : title })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          view === "chat" && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: () => setView("history"),
-              className: "text-muted-foreground hover:text-foreground",
-              title: "History",
-              children: /* @__PURE__ */ jsx(IconHistory, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: handleNewChat,
-              className: "text-muted-foreground hover:text-foreground",
-              title: "New Chat",
-              children: /* @__PURE__ */ jsx(IconPlus, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: () => setIsOpen(false),
-              className: "text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsx(IconX, { className: "size-4" })
-            }
-          )
-        ] })
-      ] }),
+          ) : void 0,
+          rightContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+            view === "chat" && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-xs",
+                onClick: () => setView("history"),
+                className: "text-muted-foreground hover:text-foreground",
+                title: "History",
+                children: /* @__PURE__ */ jsx(IconHistory, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-xs",
+                onClick: handleNewChat,
+                className: "text-muted-foreground hover:text-foreground",
+                title: "New Chat",
+                children: /* @__PURE__ */ jsx(IconPlus, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-xs",
+                onClick: () => setIsOpen(false),
+                className: "text-muted-foreground hover:text-foreground",
+                children: /* @__PURE__ */ jsx(IconX, { className: "size-4" })
+              }
+            )
+          ] }),
+          ...headerProps
+        }
+      ),
       /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: view === "chat" ? /* @__PURE__ */ jsx(
         Thread,
         {
@@ -2088,10 +2214,11 @@ function ChatSidebar({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
-  className
+  className,
+  headerProps
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full border-r bg-background w-80", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "p-4 border-b h-14 flex items-center shrink-0", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: title }) }),
+    /* @__PURE__ */ jsx(ChatHeader, { title, ...headerProps }),
     /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
       Thread,
       {
@@ -2106,11 +2233,122 @@ function ChatFull({
   title = "Chat",
   placeholder = "Message the AI",
   starterPrompts,
-  className
+  className,
+  headerProps,
+  leftSidebar,
+  rightSidebar,
+  leftSidebarClassName,
+  rightSidebarClassName,
+  leftSidebarCollapsible = false,
+  rightSidebarCollapsible = false,
+  defaultLeftSidebarCollapsed = false,
+  defaultRightSidebarCollapsed = false,
+  leftSidebarCollapsed: controlledLeftCollapsed,
+  rightSidebarCollapsed: controlledRightCollapsed,
+  onLeftSidebarCollapseChange,
+  onRightSidebarCollapseChange
 }) {
+  const [internalLeftCollapsed, setInternalLeftCollapsed] = useState(
+    defaultLeftSidebarCollapsed
+  );
+  const [internalRightCollapsed, setInternalRightCollapsed] = useState(
+    defaultRightSidebarCollapsed
+  );
+  const leftCollapsed = controlledLeftCollapsed !== void 0 ? controlledLeftCollapsed : internalLeftCollapsed;
+  const rightCollapsed = controlledRightCollapsed !== void 0 ? controlledRightCollapsed : internalRightCollapsed;
+  const handleLeftToggle = () => {
+    const newCollapsed = !leftCollapsed;
+    if (controlledLeftCollapsed === void 0) {
+      setInternalLeftCollapsed(newCollapsed);
+    }
+    onLeftSidebarCollapseChange?.(newCollapsed);
+  };
+  const handleRightToggle = () => {
+    const newCollapsed = !rightCollapsed;
+    if (controlledRightCollapsed === void 0) {
+      setInternalRightCollapsed(newCollapsed);
+    }
+    onRightSidebarCollapseChange?.(newCollapsed);
+  };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full w-full bg-background", className), children: [
-    title && /* @__PURE__ */ jsx("div", { className: "p-4 border-b h-14 flex items-center shrink-0", children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: title }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(Thread, { placeholder, starterPrompts }) })
+    title && /* @__PURE__ */ jsx(ChatHeader, { title, ...headerProps }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden flex relative", children: [
+      leftSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-shrink-0 border-r border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+              leftCollapsed && leftSidebarCollapsible ? "w-0 border-r-0 min-w-0" : "",
+              !leftCollapsed && leftSidebarClassName
+            ),
+            children: !leftCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              leftSidebarCollapsible && /* @__PURE__ */ jsx("div", { className: "flex justify-end p-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: handleLeftToggle,
+                  "aria-label": "Collapse left sidebar",
+                  className: "h-8 w-8",
+                  children: /* @__PURE__ */ jsx(IconChevronLeft, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: leftSidebar })
+            ] })
+          }
+        ),
+        leftSidebarCollapsible && leftCollapsed && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-r border-border bg-background flex items-center justify-center w-10", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: handleLeftToggle,
+            "aria-label": "Expand left sidebar",
+            className: "h-8 w-8",
+            children: /* @__PURE__ */ jsx(IconChevronRight, { className: "h-4 w-4" })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ jsx(Thread, { placeholder, starterPrompts }) }),
+      rightSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
+        rightSidebarCollapsible && rightCollapsed && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-l border-border bg-background flex items-center justify-center w-10", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            onClick: handleRightToggle,
+            "aria-label": "Expand right sidebar",
+            className: "h-8 w-8",
+            children: /* @__PURE__ */ jsx(IconChevronLeft, { className: "h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-shrink-0 border-l border-border bg-background transition-all duration-300 ease-in-out overflow-hidden flex flex-col",
+              rightCollapsed && rightSidebarCollapsible ? "w-0 border-l-0 min-w-0" : "",
+              !rightCollapsed && rightSidebarClassName
+            ),
+            children: !rightCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              rightSidebarCollapsible && /* @__PURE__ */ jsx("div", { className: "flex justify-start p-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: handleRightToggle,
+                  "aria-label": "Collapse right sidebar",
+                  className: "h-8 w-8",
+                  children: /* @__PURE__ */ jsx(IconChevronRight, { className: "h-4 w-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden min-h-0", children: rightSidebar })
+            ] })
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 function AlertDialog({ ...props }) {
@@ -2254,8 +2492,8 @@ var AccountDialog = ({
   size
 }) => {
   const { isLoading, isAuthenticated, login, logout } = useAuth();
-  const [open, setOpen] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
+  const [open, setOpen] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
   const handleGoogleSignIn = async () => {
     login();
   };
@@ -2330,7 +2568,42 @@ var AccountDialog = ({
     ] }) })
   ] });
 };
+function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const cycleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+  const getIcon = () => {
+    if (theme === "system") {
+      return /* @__PURE__ */ jsx(IconDeviceDesktop, { className: "h-4 w-4" });
+    }
+    return resolvedTheme === "dark" ? /* @__PURE__ */ jsx(IconMoon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(IconSun, { className: "h-4 w-4" });
+  };
+  const getLabel = () => {
+    if (theme === "system") {
+      return "System";
+    }
+    return resolvedTheme === "dark" ? "Dark" : "Light";
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      onClick: cycleTheme,
+      "aria-label": `Toggle theme (current: ${getLabel()})`,
+      title: `Current: ${getLabel()}. Click to cycle: Light \u2192 Dark \u2192 System`,
+      children: getIcon()
+    }
+  );
+}
 
-export { AccountDialog, AuthContext, AuthProvider, ChatFull, ChatPopup, ChatSidebar, Composer, MelonyContext, MelonyProvider, Thread, ThreadContext, ThreadList, ThreadProvider, UIRenderer, useAuth, useMelony, useThreads };
+export { AccountDialog, AuthContext, AuthProvider, ChatFull, ChatHeader, ChatPopup, ChatSidebar, Composer, MelonyClientProvider, MelonyContext, ThemeProvider, ThemeToggle, Thread, ThreadContext, ThreadList, ThreadProvider, UIRenderer, groupEventsToMessages, useAuth, useMelony, useTheme, useThreads };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map