@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -20,16 +20,32 @@ function ChatSidebar({
   onNewChat,
   className
 }) {
-  const { navigate, localization: customLocalization } = context.usePluginOverrides("ai-chat", {});
+  const { localization: customLocalization } = context.usePluginOverrides("ai-chat", {});
+  const { router } = context.useStack();
+  const navigate = router?.navigate;
   const basePath = context.useBasePath();
-  const localization = { ...index.AI_CHAT_LOCALIZATION, ...customLocalization };
-  const { conversations, isLoading } = chatHooks.useConversations();
-  const renameMutation = chatHooks.useRenameConversation();
+  const notify = context.useNotify();
+  const tr = index.useAiChatTranslation(customLocalization);
+  const { can: canRead, isPending: isReadPermissionPending } = context.useCan({
+    resource: "ai-chat:conversation",
+    action: "read"
+  });
+  const { conversations, isLoading } = chatHooks.useConversations({
+    enabled: !isReadPermissionPending && canRead
+  });
   const deleteMutation = chatHooks.useDeleteConversation();
   const [renameDialogOpen, setRenameDialogOpen] = React.useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
   const [selectedConversation, setSelectedConversation] = React.useState(null);
   const [newTitle, setNewTitle] = React.useState("");
+  const renameForm = chatHooks.useRenameConversationForm({
+    conversation: selectedConversation,
+    onSuccess: () => {
+      setRenameDialogOpen(false);
+      setSelectedConversation(null);
+      setNewTitle("");
+    }
+  });
   const handleNewChat = () => {
     if (navigate) {
       navigate(`${basePath}/chat`);
@@ -44,6 +60,7 @@ function ChatSidebar({
     }
   };
   const handleRenameClick = (conversation) => {
+    renameForm.clearErrors();
     setSelectedConversation(conversation);
     setNewTitle(conversation.title);
     setRenameDialogOpen(true);
@@ -53,23 +70,34 @@ function ChatSidebar({
     setDeleteDialogOpen(true);
   };
   const handleRenameConfirm = async () => {
-    if (selectedConversation && newTitle.trim()) {
-      await renameMutation.mutateAsync({
-        id: selectedConversation.id,
-        title: newTitle.trim()
-      });
-      setRenameDialogOpen(false);
-      setSelectedConversation(null);
-      setNewTitle("");
+    if (selectedConversation) {
+      await renameForm.submit({ title: newTitle });
     }
   };
   const handleDeleteConfirm = async () => {
     if (selectedConversation) {
-      await deleteMutation.mutateAsync({ id: selectedConversation.id });
-      setDeleteDialogOpen(false);
-      setSelectedConversation(null);
-      if (selectedConversation.id === currentConversationId && navigate) {
-        navigate(`${basePath}/chat`);
+      try {
+        await deleteMutation.mutateAsync({ id: selectedConversation.id });
+        notify.success(
+          tr(
+            "CONVERSATION_DELETE_SUCCESS",
+            "aiChat.toasts.deleteSuccess",
+            "Conversation deleted"
+          )
+        );
+        setDeleteDialogOpen(false);
+        setSelectedConversation(null);
+        if (selectedConversation.id === currentConversationId && navigate) {
+          await navigate(`${basePath}/chat`);
+        }
+      } catch {
+        notify.error(
+          tr(
+            "CONVERSATION_DELETE_FAILURE",
+            "aiChat.toasts.deleteFailure",
+            "Failed to delete conversation"
+          )
+        );
       }
     }
   };
@@ -80,14 +108,28 @@ function ChatSidebar({
     const diffMins = Math.floor(diffMs / 6e4);
     const diffHours = Math.floor(diffMs / 36e5);
     const diffDays = Math.floor(diffMs / 864e5);
-    if (diffMins < 1) return localization.TIME_JUST_NOW;
+    if (diffMins < 1)
+      return tr("TIME_JUST_NOW", "aiChat.time.justNow", "Just now");
     if (diffMins < 60)
-      return localization.TIME_MINUTES_AGO.replace("{count}", String(diffMins));
+      return tr(
+        "TIME_MINUTES_AGO",
+        "aiChat.time.minutesAgo",
+        "{{count}} minutes ago",
+        { count: diffMins }
+      );
     if (diffHours < 24)
-      return localization.TIME_HOURS_AGO.replace("{count}", String(diffHours));
-    if (diffDays === 1) return localization.TIME_YESTERDAY;
+      return tr(
+        "TIME_HOURS_AGO",
+        "aiChat.time.hoursAgo",
+        "{{count}} hours ago",
+        { count: diffHours }
+      );
+    if (diffDays === 1)
+      return tr("TIME_YESTERDAY", "aiChat.time.yesterday", "Yesterday");
     if (diffDays < 7)
-      return localization.TIME_DAYS_AGO.replace("{count}", String(diffDays));
+      return tr("TIME_DAYS_AGO", "aiChat.time.daysAgo", "{{count}} days ago", {
+        count: diffDays
+      });
     return date.toLocaleDateString();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -96,7 +138,7 @@ function ChatSidebar({
       "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(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxRuntime.jsx(context.CanAccess, { resource: "ai-chat:conversation", action: "create", children: /* @__PURE__ */ jsxRuntime.jsxs(
           button.Button,
           {
             onClick: handleNewChat,
@@ -104,11 +146,15 @@ function ChatSidebar({
             variant: "outline",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MessageSquarePlus, { className: "h-4 w-4" }),
-              localization.SIDEBAR_NEW_CHAT
+              tr("SIDEBAR_NEW_CHAT", "aiChat.sidebar.newChat", "New chat")
             ]
           }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "flex-1 [&_[data-slot=scroll-area-viewport]>div]:!block", 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(
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "flex-1 [&_[data-slot=scroll-area-viewport]>div]:!block", 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: tr("CHAT_LOADING", "aiChat.chat.loading", "Thinking...") }) : conversations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: tr(
+          "SIDEBAR_NO_CONVERSATIONS",
+          "aiChat.sidebar.empty",
+          "No conversations yet"
+        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: conversations.map((conversation) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: utils.cn(
@@ -131,42 +177,71 @@ function ChatSidebar({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { modal: false, 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",
+                    "aria-label": tr(
+                      "A11Y_CONVERSATION_ACTIONS",
+                      "aiChat.a11y.conversationActions",
+                      "Conversation actions"
+                    ),
                     children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoreHorizontal, { className: "h-4 w-4" })
                   }
                 ) }),
                 /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    dropdownMenu.DropdownMenuItem,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    context.CanAccess,
                     {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleRenameClick(conversation);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-4 w-4 mr-2" }),
-                        localization.CONVERSATION_RENAME
-                      ]
+                      resource: "ai-chat:conversation",
+                      action: "update",
+                      params: { id: conversation.id },
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        dropdownMenu.DropdownMenuItem,
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleRenameClick(conversation);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-4 w-4 mr-2" }),
+                            tr(
+                              "CONVERSATION_RENAME",
+                              "aiChat.conversation.rename",
+                              "Rename"
+                            )
+                          ]
+                        }
+                      )
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    dropdownMenu.DropdownMenuItem,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    context.CanAccess,
                     {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleDeleteClick(conversation);
-                      },
-                      className: "text-destructive focus:text-destructive",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4 mr-2" }),
-                        localization.CONVERSATION_DELETE
-                      ]
+                      resource: "ai-chat:conversation",
+                      action: "delete",
+                      params: { id: conversation.id },
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        dropdownMenu.DropdownMenuItem,
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleDeleteClick(conversation);
+                          },
+                          className: "text-destructive focus:text-destructive",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4 mr-2" }),
+                            tr(
+                              "CONVERSATION_DELETE",
+                              "aiChat.conversation.delete",
+                              "Delete"
+                            )
+                          ]
+                        }
+                      )
                     }
                   )
                 ] })
@@ -175,53 +250,112 @@ function ChatSidebar({
           },
           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.jsx(
+          dialog.Dialog,
+          {
+            open: renameDialogOpen,
+            onOpenChange: (open) => {
+              setRenameDialogOpen(open);
+              if (!open) renameForm.clearErrors();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: tr(
+                  "CONVERSATION_RENAME",
+                  "aiChat.conversation.rename",
+                  "Rename"
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: tr(
+                  "CONVERSATION_RENAME_DESCRIPTION",
+                  "aiChat.conversation.renameDescription",
+                  "Enter a new title for this conversation."
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                input.Input,
+                {
+                  value: newTitle,
+                  onChange: (e) => setNewTitle(e.target.value),
+                  placeholder: tr(
+                    "CONVERSATION_RENAME_PLACEHOLDER",
+                    "aiChat.conversation.renamePlaceholder",
+                    "Enter conversation name"
+                  ),
+                  "aria-invalid": !!renameForm.fieldErrors.title,
+                  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
-              }
-            )
-          ] })
-        ] }) }),
+              ),
+              renameForm.fieldErrors.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", role: "alert", children: tr(
+                "CONVERSATION_TITLE_REQUIRED",
+                "aiChat.conversation.titleRequired",
+                "Title is required"
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "outline",
+                    onClick: () => setRenameDialogOpen(false),
+                    children: tr(
+                      "CONVERSATION_RENAME_CANCEL",
+                      "aiChat.conversation.renameCancel",
+                      "Cancel"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    onClick: handleRenameConfirm,
+                    disabled: renameForm.isSubmitting,
+                    children: tr(
+                      "CONVERSATION_RENAME_SAVE",
+                      "aiChat.conversation.renameSave",
+                      "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.jsx(alertDialog.AlertDialogTitle, { children: tr(
+              "CONVERSATION_DELETE_CONFIRM_TITLE",
+              "aiChat.conversation.deleteConfirmTitle",
+              "Delete conversation"
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: tr(
+              "CONVERSATION_DELETE_CONFIRM_DESCRIPTION",
+              "aiChat.conversation.deleteConfirmDescription",
+              "Are you sure you want to delete this conversation? This action cannot be undone."
+            ) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization.CONVERSATION_DELETE_CANCEL }),
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: tr(
+              "CONVERSATION_DELETE_CANCEL",
+              "aiChat.conversation.deleteCancel",
+              "Cancel"
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               alertDialog.AlertDialogAction,
               {
-                onClick: handleDeleteConfirm,
+                onClick: (event) => {
+                  event.preventDefault();
+                  void handleDeleteConfirm();
+                },
+                disabled: deleteMutation.isPending,
                 className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-                children: localization.CONVERSATION_DELETE_CONFIRM_BUTTON
+                children: tr(
+                  "CONVERSATION_DELETE_CONFIRM_BUTTON",
+                  "aiChat.conversation.deleteConfirmButton",
+                  "Delete"
+                )
               }
             )
           ] })