@btst/stack 1.4.0 → 1.5.0

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-message.mjs

@@ -5,9 +5,11 @@ import { MarkdownContent } from '../../../../../../ui/src/components/markdown-co
 import { Button } from '../../../../../../ui/src/components/button.mjs';
 import { Dialog, DialogContent, DialogTitle } from '../../../../../../ui/src/components/dialog.mjs';
 import { Bot, FileText, X, Send, Pencil, Check, Copy, RefreshCw, User } from 'lucide-react';
+import { isToolUIPart, getToolName } from 'ai';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import { usePluginOverrides } from '@btst/stack/context';
 import { AI_CHAT_LOCALIZATION } from '../localization/index.mjs';
+import { ToolCallDisplay } from './tool-call-display.mjs';
 import 'highlight.js/styles/panda-syntax-light.css';
 import completeMarkdown from 'remend';
 
@@ -77,7 +79,8 @@ function ChatMessage({
   const {
     Link,
     Image,
-    localization: customLocalization
+    localization: customLocalization,
+    toolRenderers
   } = usePluginOverrides(
     "ai-chat",
     {}
@@ -149,6 +152,12 @@ function ChatMessage({
     }
     return [];
   }, [message.parts]);
+  const toolParts = useMemo(() => {
+    if (message.parts && Array.isArray(message.parts)) {
+      return message.parts.filter((part) => isToolUIPart(part));
+    }
+    return [];
+  }, [message.parts]);
   const displayContent = useMemo(() => {
     if (!textContent) return "";
     if (isStreaming && !isUser) {
@@ -270,7 +279,7 @@ function ChatMessage({
                   )
                 ] })
               ) : (
-                // Assistant messages: rendered markdown + files + images
+                // Assistant messages: rendered markdown + files + images + tool calls
                 /* @__PURE__ */ jsxs("div", { className: "wrap-break-word space-y-2", children: [
                   fileParts.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: fileParts.map((part, index) => /* @__PURE__ */ jsxs(
                     "a",
@@ -298,6 +307,29 @@ function ChatMessage({
                     },
                     index
                   )) }),
+                  toolParts.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: toolParts.map((part) => {
+                    const toolName = getToolName(part);
+                    const toolCallId = part.toolCallId;
+                    const state = part.state;
+                    const input = part.input;
+                    const output = part.output;
+                    const errorText = part.errorText;
+                    const isLoading = state === "input-streaming" || state === "input-available";
+                    const toolCallProps = {
+                      toolCallId,
+                      toolName,
+                      state,
+                      input,
+                      output,
+                      errorText,
+                      isLoading
+                    };
+                    const CustomRenderer = toolRenderers?.[toolName];
+                    if (CustomRenderer) {
+                      return /* @__PURE__ */ jsx(CustomRenderer, { ...toolCallProps }, toolCallId);
+                    }
+                    return /* @__PURE__ */ jsx(ToolCallDisplay, { ...toolCallProps }, toolCallId);
+                  }) }),
                   displayContent ? /* @__PURE__ */ jsx(
                     MarkdownContent,
                     {
@@ -306,7 +338,7 @@ function ChatMessage({
                       LinkComponent: Link ?? DefaultLink,
                       ImageComponent
                     }
-                  ) : imageParts.length === 0 && fileParts.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "..." }) : null
+                  ) : imageParts.length === 0 && fileParts.length === 0 && toolParts.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "..." }) : null
                 ] })
               )
             }

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-sidebar.cjs

@@ -90,138 +90,145 @@ function ChatSidebar({
       return localization.TIME_DAYS_AGO.replace("{count}", String(diffDays));
     return date.toLocaleDateString();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col h-full bg-muted/30 border-r", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      button.Button,
-      {
-        onClick: handleNewChat,
-        className: "w-full justify-start gap-2",
-        variant: "outline",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquarePlus, { className: "h-4 w-4" }),
-          localization.SIDEBAR_NEW_CHAT
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.CHAT_LOADING }) : conversations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.SIDEBAR_NO_CONVERSATIONS }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: conversations.map((conversation) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: utils.cn(
-          "group flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-accent cursor-pointer transition-colors overflow-hidden",
-          currentConversationId === conversation.id && "bg-accent"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              className: "flex-1 flex items-center gap-2 text-left min-w-0 overflow-hidden",
-              onClick: () => handleConversationClick(conversation),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: conversation.title }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: formatDate(conversation.updatedAt) })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              button.Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "chat-sidebar",
+      className: utils.cn("flex flex-col h-full bg-muted/30 border-r", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            onClick: handleNewChat,
+            className: "w-full justify-start gap-2",
+            variant: "outline",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquarePlus, { className: "h-4 w-4" }),
+              localization.SIDEBAR_NEW_CHAT
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.CHAT_LOADING }) : conversations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.SIDEBAR_NO_CONVERSATIONS }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: conversations.map((conversation) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "group flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-accent cursor-pointer transition-colors overflow-hidden",
+              currentConversationId === conversation.id && "bg-accent"
+            ),
+            children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
-                dropdownMenu.DropdownMenuItem,
+                "button",
                 {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleRenameClick(conversation);
-                  },
+                  type: "button",
+                  className: "flex-1 flex items-center gap-2 text-left min-w-0 overflow-hidden",
+                  onClick: () => handleConversationClick(conversation),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4 mr-2" }),
-                    localization.CONVERSATION_RENAME
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: conversation.title }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: formatDate(conversation.updatedAt) })
+                    ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                dropdownMenu.DropdownMenuItem,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleDeleteClick(conversation);
-                  },
-                  className: "text-destructive focus:text-destructive",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4 mr-2" }),
-                    localization.CONVERSATION_DELETE
-                  ]
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    dropdownMenu.DropdownMenuItem,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleRenameClick(conversation);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4 mr-2" }),
+                        localization.CONVERSATION_RENAME
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    dropdownMenu.DropdownMenuItem,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDeleteClick(conversation);
+                      },
+                      className: "text-destructive focus:text-destructive",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4 mr-2" }),
+                        localization.CONVERSATION_DELETE
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          conversation.id
+        )) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: renameDialogOpen, onOpenChange: setRenameDialogOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization.CONVERSATION_RENAME }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              value: newTitle,
+              onChange: (e) => setNewTitle(e.target.value),
+              placeholder: localization.CONVERSATION_RENAME_PLACEHOLDER,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  void handleRenameConfirm();
                 }
-              )
-            ] })
-          ] })
-        ]
-      },
-      conversation.id
-    )) }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: renameDialogOpen, onOpenChange: setRenameDialogOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization.CONVERSATION_RENAME }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        input.Input,
-        {
-          value: newTitle,
-          onChange: (e) => setNewTitle(e.target.value),
-          placeholder: localization.CONVERSATION_RENAME_PLACEHOLDER,
-          onKeyDown: (e) => {
-            if (e.key === "Enter") {
-              void handleRenameConfirm();
+              }
             }
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          button.Button,
-          {
-            variant: "outline",
-            onClick: () => setRenameDialogOpen(false),
-            children: localization.CONVERSATION_RENAME_CANCEL
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          button.Button,
-          {
-            onClick: handleRenameConfirm,
-            disabled: !newTitle.trim() || renameMutation.isPending,
-            children: localization.CONVERSATION_RENAME_SAVE
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: localization.CONVERSATION_DELETE_CONFIRM_TITLE }),
-        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: localization.CONVERSATION_DELETE_CONFIRM_DESCRIPTION })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization.CONVERSATION_DELETE_CANCEL }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          alertDialog.AlertDialogAction,
-          {
-            onClick: handleDeleteConfirm,
-            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            children: localization.CONVERSATION_DELETE_CONFIRM_BUTTON
-          }
-        )
-      ] })
-    ] }) })
-  ] });
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "outline",
+                onClick: () => setRenameDialogOpen(false),
+                children: localization.CONVERSATION_RENAME_CANCEL
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                onClick: handleRenameConfirm,
+                disabled: !newTitle.trim() || renameMutation.isPending,
+                children: localization.CONVERSATION_RENAME_SAVE
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: localization.CONVERSATION_DELETE_CONFIRM_TITLE }),
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: localization.CONVERSATION_DELETE_CONFIRM_DESCRIPTION })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization.CONVERSATION_DELETE_CANCEL }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.AlertDialogAction,
+              {
+                onClick: handleDeleteConfirm,
+                className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                children: localization.CONVERSATION_DELETE_CONFIRM_BUTTON
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
 }
 
 exports.ChatSidebar = ChatSidebar;

package/dist/packages/better-stack/src/plugins/ai-chat/client/components/chat-sidebar.mjs

@@ -88,138 +88,145 @@ function ChatSidebar({
       return localization.TIME_DAYS_AGO.replace("{count}", String(diffDays));
     return date.toLocaleDateString();
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full bg-muted/30 border-r", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        onClick: handleNewChat,
-        className: "w-full justify-start gap-2",
-        variant: "outline",
-        children: [
-          /* @__PURE__ */ jsx(MessageSquarePlus, { className: "h-4 w-4" }),
-          localization.SIDEBAR_NEW_CHAT
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.CHAT_LOADING }) : conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.SIDEBAR_NO_CONVERSATIONS }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: conversations.map((conversation) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "group flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-accent cursor-pointer transition-colors overflow-hidden",
-          currentConversationId === conversation.id && "bg-accent"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "flex-1 flex items-center gap-2 text-left min-w-0 overflow-hidden",
-              onClick: () => handleConversationClick(conversation),
-              children: [
-                /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: conversation.title }),
-                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: formatDate(conversation.updatedAt) })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity",
-                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "chat-sidebar",
+      className: cn("flex flex-col h-full bg-muted/30 border-r", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleNewChat,
+            className: "w-full justify-start gap-2",
+            variant: "outline",
+            children: [
+              /* @__PURE__ */ jsx(MessageSquarePlus, { className: "h-4 w-4" }),
+              localization.SIDEBAR_NEW_CHAT
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.CHAT_LOADING }) : conversations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: localization.SIDEBAR_NO_CONVERSATIONS }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: conversations.map((conversation) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "group flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-accent cursor-pointer transition-colors overflow-hidden",
+              currentConversationId === conversation.id && "bg-accent"
+            ),
+            children: [
               /* @__PURE__ */ jsxs(
-                DropdownMenuItem,
+                "button",
                 {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleRenameClick(conversation);
-                  },
+                  type: "button",
+                  className: "flex-1 flex items-center gap-2 text-left min-w-0 overflow-hidden",
+                  onClick: () => handleConversationClick(conversation),
                   children: [
-                    /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 mr-2" }),
-                    localization.CONVERSATION_RENAME
+                    /* @__PURE__ */ jsx(MessageSquare, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: conversation.title }),
+                      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: formatDate(conversation.updatedAt) })
+                    ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs(
-                DropdownMenuItem,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleDeleteClick(conversation);
-                  },
-                  className: "text-destructive focus:text-destructive",
-                  children: [
-                    /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
-                    localization.CONVERSATION_DELETE
-                  ]
+              /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity",
+                    children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleRenameClick(conversation);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 mr-2" }),
+                        localization.CONVERSATION_RENAME
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDeleteClick(conversation);
+                      },
+                      className: "text-destructive focus:text-destructive",
+                      children: [
+                        /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
+                        localization.CONVERSATION_DELETE
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          },
+          conversation.id
+        )) }) }) }),
+        /* @__PURE__ */ jsx(Dialog, { open: renameDialogOpen, onOpenChange: setRenameDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: localization.CONVERSATION_RENAME }) }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: newTitle,
+              onChange: (e) => setNewTitle(e.target.value),
+              placeholder: localization.CONVERSATION_RENAME_PLACEHOLDER,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  void handleRenameConfirm();
                 }
-              )
-            ] })
-          ] })
-        ]
-      },
-      conversation.id
-    )) }) }) }),
-    /* @__PURE__ */ jsx(Dialog, { open: renameDialogOpen, onOpenChange: setRenameDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
-      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: localization.CONVERSATION_RENAME }) }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          value: newTitle,
-          onChange: (e) => setNewTitle(e.target.value),
-          placeholder: localization.CONVERSATION_RENAME_PLACEHOLDER,
-          onKeyDown: (e) => {
-            if (e.key === "Enter") {
-              void handleRenameConfirm();
+              }
             }
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            onClick: () => setRenameDialogOpen(false),
-            children: localization.CONVERSATION_RENAME_CANCEL
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: handleRenameConfirm,
-            disabled: !newTitle.trim() || renameMutation.isPending,
-            children: localization.CONVERSATION_RENAME_SAVE
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx(AlertDialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
-      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx(AlertDialogTitle, { children: localization.CONVERSATION_DELETE_CONFIRM_TITLE }),
-        /* @__PURE__ */ jsx(AlertDialogDescription, { children: localization.CONVERSATION_DELETE_CONFIRM_DESCRIPTION })
-      ] }),
-      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx(AlertDialogCancel, { children: localization.CONVERSATION_DELETE_CANCEL }),
-        /* @__PURE__ */ jsx(
-          AlertDialogAction,
-          {
-            onClick: handleDeleteConfirm,
-            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            children: localization.CONVERSATION_DELETE_CONFIRM_BUTTON
-          }
-        )
-      ] })
-    ] }) })
-  ] });
+          ),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                onClick: () => setRenameDialogOpen(false),
+                children: localization.CONVERSATION_RENAME_CANCEL
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleRenameConfirm,
+                disabled: !newTitle.trim() || renameMutation.isPending,
+                children: localization.CONVERSATION_RENAME_SAVE
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(AlertDialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx(AlertDialogTitle, { children: localization.CONVERSATION_DELETE_CONFIRM_TITLE }),
+            /* @__PURE__ */ jsx(AlertDialogDescription, { children: localization.CONVERSATION_DELETE_CONFIRM_DESCRIPTION })
+          ] }),
+          /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx(AlertDialogCancel, { children: localization.CONVERSATION_DELETE_CANCEL }),
+            /* @__PURE__ */ jsx(
+              AlertDialogAction,
+              {
+                onClick: handleDeleteConfirm,
+                className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                children: localization.CONVERSATION_DELETE_CONFIRM_BUTTON
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
 }
 
 export { ChatSidebar };