@hed-hog/core 0.0.350 → 0.0.351

package/hedhog/frontend/app/mcp_chat/chat-components.tsx.ejs

@@ -18,7 +18,7 @@ import {
   Wrench,
   X,
 } from 'lucide-react';
-import { RefObject, useRef, useState } from 'react';
+import { RefObject, useEffect, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Conversation, Message } from './chat-types';
@@ -175,13 +175,37 @@ export function ToolBadge({
   );
 }
 
+const TYPING_STATUSES = [
+  'Pensando...',
+  'Consultando ferramentas...',
+  'Processando informações...',
+  'Aguardando resposta...',
+];
+
+const TYPING_STATUS_DURATIONS = [3000, 5000, 5000];
+
 export function TypingIndicator() {
+  const [statusIndex, setStatusIndex] = useState(0);
+
+  useEffect(() => {
+    setStatusIndex(0);
+  }, []);
+
+  useEffect(() => {
+    const duration = TYPING_STATUS_DURATIONS[statusIndex];
+    if (duration === undefined) return;
+    const timer = setTimeout(() => {
+      setStatusIndex((i) => Math.min(i + 1, TYPING_STATUSES.length - 1));
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [statusIndex]);
+
   return (
     <div className="flex items-start gap-3">
       <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-background">
         <Bot className="h-4 w-4 text-muted-foreground" />
       </div>
-      <div className="flex items-center gap-1 rounded-2xl rounded-tl-sm bg-muted px-4 py-3 shadow-sm">
+      <div className="flex items-center gap-2 rounded-2xl rounded-tl-sm bg-muted px-4 py-3 shadow-sm">
         <span
           className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
           style={{ animationDelay: '0ms' }}
@@ -194,6 +218,18 @@ export function TypingIndicator() {
           className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
           style={{ animationDelay: '300ms' }}
         />
+        <AnimatePresence mode="wait">
+          <motion.span
+            key={statusIndex}
+            initial={{ opacity: 0, x: 6 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -6 }}
+            transition={{ duration: 0.2 }}
+            className="ml-1 text-xs text-muted-foreground select-none"
+          >
+            {TYPING_STATUSES[statusIndex]}
+          </motion.span>
+        </AnimatePresence>
       </div>
     </div>
   );
@@ -285,6 +321,7 @@ type ChatInputProps = {
   input: string;
   isSending: boolean;
   isUploadingFile: boolean;
+  disabled?: boolean;
   attachments: Array<{ id: number; name: string }>;
   placeholder: string;
   sendLabel: string;
@@ -304,6 +341,7 @@ export function ChatInput({
   input,
   isSending,
   isUploadingFile,
+  disabled = false,
   attachments,
   placeholder,
   sendLabel,
@@ -420,7 +458,7 @@ export function ChatInput({
           className="shrink-0 h-10 w-10 rounded-full cursor-pointer border border-border/60 bg-background/85 hover:bg-background"
           aria-label={attachLabel}
           onClick={handleOpenFilePicker}
-          disabled={isSending || isUploadingFile}
+          disabled={disabled || isSending || isUploadingFile}
         >
           {isUploadingFile ? (
             <Loader2 className="h-4 w-4 animate-spin" />
@@ -434,7 +472,7 @@ export function ChatInput({
           className="resize-none flex-1 border-0! bg-transparent! shadow-none! focus-visible:ring-0! px-2.5 py-2.5 min-h-10 max-h-40 md:max-h-75 overflow-y-auto text-sm text-foreground leading-5 placeholder:text-sm placeholder:leading-5 placeholder:text-muted-foreground transition-[height] duration-150 ease-out"
           placeholder={isUploadingFile ? uploadingFileLabel : placeholder}
           value={input}
-          disabled={isSending}
+          disabled={disabled || isSending}
           onChange={(e) => onInputChange(e.target.value)}
           onKeyDown={(e) => {
             if (submitOnEnter && e.key === 'Enter' && !e.shiftKey) {
@@ -449,7 +487,7 @@ export function ChatInput({
           size="icon"
           className="shrink-0 h-10 w-10 rounded-full cursor-pointer"
           aria-label={isSending ? sendingLabel : sendLabel}
-          disabled={isSending || (!input.trim() && attachments.length === 0)}
+          disabled={disabled || isSending || (!input.trim() && attachments.length === 0)}
           onClick={onSend}
         >
           {isSending ? (

package/hedhog/frontend/app/mcp_chat/page.tsx.ejs

@@ -14,11 +14,11 @@ import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import { useFormDraft } from '@/hooks/use-form-draft';
 import { useIsMobile } from '@/hooks/use-mobile';
@@ -31,8 +31,9 @@ import { ChatInput, ConversationSidebar, MessageFeed } from './chat-components';
 import { Conversation, Message } from './chat-types';
 
 export default function McpChatPage() {
-  const { request, currentLocaleCode, refetchUser, accessToken } = useApp();
+  const { request, currentLocaleCode, refetchUser, accessToken, getSettingValue } = useApp();
   const t = useTranslations('core.McpChatPage');
+  const mcpEnabled = getSettingValue('mcp-enabled') !== false;
   const isMobile = useIsMobile();
 
   const [selectedConvId, setSelectedConvId] = useState<number | null>(null);
@@ -84,10 +85,12 @@ export default function McpChatPage() {
       });
       return res.data;
     },
+    enabled: mcpEnabled,
   });
 
   const convList = useMemo(() => conversations ?? [], [conversations]);
   const selectedConv = convList.find((c) => c.id === selectedConvId) ?? null;
+  const activeMessageConversationId = mcpEnabled ? selectedConvId : null;
 
   useEffect(() => {
     if (selectedConvId !== null || convList.length === 0) return;
@@ -114,7 +117,7 @@ export default function McpChatPage() {
   }, [selectedConvId, loadMessageInputDraft]);
 
   useEffect(() => {
-    if (!selectedConvId) {
+    if (!activeMessageConversationId) {
       setMessages([]);
       setIsLoadingMessages(false);
       return;
@@ -124,7 +127,7 @@ export default function McpChatPage() {
     setIsLoadingMessages(true);
 
     request<Message[]>({
-      url: `/mcp-chat/${selectedConvId}/messages`,
+      url: `/mcp-chat/${activeMessageConversationId}/messages`,
       method: 'GET',
     })
       .then((res) => {
@@ -147,7 +150,7 @@ export default function McpChatPage() {
     return () => {
       isMounted = false;
     };
-  }, [request, selectedConvId, t]);
+  }, [request, activeMessageConversationId, t]);
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -384,6 +387,8 @@ export default function McpChatPage() {
   }
 
   async function handleNewConversation() {
+    if (!mcpEnabled) return null;
+
     try {
       stopStreaming();
       const res = await request<Conversation>({
@@ -407,6 +412,7 @@ export default function McpChatPage() {
 
   async function handleSend() {
     if (
+      !mcpEnabled ||
       (!input.trim() && attachments.length === 0) ||
       isSending ||
       isUploadingFile
@@ -579,6 +585,22 @@ export default function McpChatPage() {
     />
   );
 
+  if (!mcpEnabled) {
+    return (
+      <div className="flex h-dvh min-h-0 items-center justify-center bg-background px-4">
+        <div className="flex max-w-md flex-col items-center gap-3 text-center">
+          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-muted text-muted-foreground ring-1 ring-border">
+            <Bot className="h-7 w-7" />
+          </div>
+          <h1 className="text-xl font-semibold tracking-tight">
+            {t('title')}
+          </h1>
+          <p className="text-sm text-muted-foreground">{t('mcpDisabled')}</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex h-dvh min-h-0 overflow-hidden bg-background">
       {/* Sidebar */}
@@ -590,7 +612,11 @@ export default function McpChatPage() {
         open={isMobileConversationsOpen}
         onOpenChange={setIsMobileConversationsOpen}
       >
-        <SheetContent
+        <ResizableSheetContent
+          sheetId="core-mcp-chat-mobile-conversations-sheet"
+          defaultWidth={320}
+          minWidth={280}
+          maxWidth={560}
           side="left"
           className="w-[85vw] max-w-[320px] p-0 [&>button]:top-2 [&>button]:right-2 [&>button]:z-20"
         >
@@ -601,7 +627,7 @@ export default function McpChatPage() {
           <div className="flex h-full flex-col bg-muted/30 pt-11">
             {sidebarContent}
           </div>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       {/* Main area */}
@@ -645,6 +671,7 @@ export default function McpChatPage() {
                 input={input}
                 isSending={isSending}
                 isUploadingFile={isUploadingFile}
+                disabled={!mcpEnabled}
                 attachments={attachments}
                 placeholder={t('placeholder')}
                 sendLabel={t('send')}
@@ -699,6 +726,7 @@ export default function McpChatPage() {
                   input={input}
                   isSending={isSending}
                   isUploadingFile={isUploadingFile}
+                  disabled={!mcpEnabled}
                   attachments={attachments}
                   placeholder={t('placeholder')}
                   sendLabel={t('send')}

package/hedhog/frontend/app/menu/page.tsx.ejs

@@ -57,6 +57,7 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from '@/components/ui/resizable';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Select,
@@ -68,7 +69,6 @@ import {
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
@@ -2583,7 +2583,13 @@ export default function MenuPage() {
       </div>
 
       <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <SheetContent className="w-full gap-0 overflow-y-auto sm:max-w-lg">
+        <ResizableSheetContent
+          sheetId="core-menu-form-sheet"
+          defaultWidth={560}
+          minWidth={420}
+          maxWidth={920}
+          className="w-full gap-0 overflow-y-auto sm:max-w-lg"
+        >
           <SheetHeader>
             <SheetTitle>{t('dialogAddMenuTitle')}</SheetTitle>
             <SheetDescription>{t('dialogAddMenuDescription')}</SheetDescription>
@@ -2740,7 +2746,7 @@ export default function MenuPage() {
               </Button>
             </form>
           </Form>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <AlertDialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>

package/hedhog/frontend/app/roles/page.tsx.ejs

@@ -45,11 +45,11 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { useFormDraft } from '@/hooks/use-form-draft';
@@ -694,7 +694,13 @@ export default function RolePage() {
             }
           }}
         >
-          <SheetContent className="w-full sm:max-w-lg overflow-y-auto gap-0">
+          <ResizableSheetContent
+            sheetId="core-roles-create-sheet"
+            defaultWidth={560}
+            minWidth={420}
+            maxWidth={920}
+            className="w-full sm:max-w-lg overflow-y-auto gap-0"
+          >
             <SheetHeader>
               <SheetTitle>{t('dialogAddRoleTitle')}</SheetTitle>
               <SheetDescription>
@@ -780,12 +786,18 @@ export default function RolePage() {
                 </Button>
               </form>
             </Form>
-          </SheetContent>
+          </ResizableSheetContent>
         </Sheet>
 
         {editingRole && (
           <Sheet open={!!editingRole} onOpenChange={() => setEditingRole(null)}>
-            <SheetContent className="w-full sm:max-w-3xl overflow-y-auto gap-0">
+            <ResizableSheetContent
+              sheetId="core-roles-edit-sheet"
+              defaultWidth={920}
+              minWidth={620}
+              maxWidth={1320}
+              className="w-full sm:max-w-3xl overflow-y-auto gap-0"
+            >
               <SheetHeader>
                 <SheetTitle>{t('titleEditRole')}</SheetTitle>
                 <SheetDescription>
@@ -851,7 +863,7 @@ export default function RolePage() {
                         value={selectedLocale}
                         onValueChange={(value) => setSelectedLocale(value)}
                       >
-                        <SelectTrigger className="w-[180px] h-8">
+                        <SelectTrigger className="h-8 w-45">
                           <SelectValue placeholder={t('selectLocale')} />
                         </SelectTrigger>
                         <SelectContent>
@@ -978,7 +990,7 @@ export default function RolePage() {
                   />
                 </TabsContent>
               </Tabs>
-            </SheetContent>
+            </ResizableSheetContent>
           </Sheet>
         )}
 

package/hedhog/frontend/app/routes/page.tsx.ejs

@@ -46,11 +46,11 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
@@ -1081,7 +1081,13 @@ export default function RoutePage() {
           }
         }}
       >
-        <SheetContent className="w-full gap-0 overflow-y-auto sm:max-w-3xl">
+        <ResizableSheetContent
+          sheetId="core-routes-form-sheet"
+          defaultWidth={920}
+          minWidth={620}
+          maxWidth={1320}
+          className="w-full gap-0 overflow-y-auto sm:max-w-3xl"
+        >
           <SheetHeader>
             <SheetTitle>
               {editingRoute ? t('titleEditRoute') : t('dialogAddRouteTitle')}
@@ -1315,7 +1321,7 @@ export default function RoutePage() {
               </TabsContent>
             ) : null}
           </Tabs>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <AlertDialog open={openDeleteModal} onOpenChange={setOpenDeleteModal}>