@hed-hog/core 0.0.327 → 0.0.329

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

@@ -0,0 +1,574 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Bot,
+  ChevronDown,
+  ChevronRight,
+  MessageSquare,
+  Plus,
+  Send,
+  Trash2,
+  Wrench,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { toast } from 'sonner';
+
+type Conversation = {
+  id: number;
+  title: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+type Message = {
+  id: number;
+  conversation_id: number;
+  role: 'user' | 'assistant' | 'tool_call' | 'tool_result';
+  content: string;
+  tool_name: string | null;
+  tool_call_id: string | null;
+  created_at: string;
+};
+
+type MarkdownComponentProps = {
+  children?: React.ReactNode;
+  className?: string;
+  href?: string;
+};
+
+const markdownComponents: Record<
+  string,
+  (props: MarkdownComponentProps) => React.ReactNode
+> = {
+  p({ children }) {
+    return <p className="mb-2 last:mb-0 leading-relaxed">{children}</p>;
+  },
+  ul({ children }) {
+    return <ul className="mb-2 list-disc pl-4 space-y-1">{children}</ul>;
+  },
+  ol({ children }) {
+    return <ol className="mb-2 list-decimal pl-4 space-y-1">{children}</ol>;
+  },
+  li({ children }) {
+    return <li className="leading-relaxed">{children}</li>;
+  },
+  strong({ children }) {
+    return <strong className="font-semibold">{children}</strong>;
+  },
+  em({ children }) {
+    return <em className="italic">{children}</em>;
+  },
+  code({ children, className }) {
+    const isBlock = className?.includes('language-');
+    return isBlock ? (
+      <code className="block rounded-md bg-black/10 dark:bg-white/10 px-3 py-2 text-xs font-mono whitespace-pre-wrap my-2">
+        {children}
+      </code>
+    ) : (
+      <code className="rounded bg-black/10 dark:bg-white/10 px-1 py-0.5 text-xs font-mono">
+        {children}
+      </code>
+    );
+  },
+  pre({ children }) {
+    return <pre className="my-2 overflow-x-auto rounded-md">{children}</pre>;
+  },
+  blockquote({ children }) {
+    return (
+      <blockquote className="border-l-2 border-current/30 pl-3 italic my-2 text-current/70">
+        {children}
+      </blockquote>
+    );
+  },
+  h1({ children }) {
+    return (
+      <h1 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h1>
+    );
+  },
+  h2({ children }) {
+    return (
+      <h2 className="text-sm font-bold mb-2 mt-3 first:mt-0">{children}</h2>
+    );
+  },
+  h3({ children }) {
+    return (
+      <h3 className="text-sm font-semibold mb-1 mt-2 first:mt-0">{children}</h3>
+    );
+  },
+  a({ href, children }) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="underline underline-offset-2 hover:opacity-80"
+      >
+        {children}
+      </a>
+    );
+  },
+  hr() {
+    return <hr className="my-3 border-current/20" />;
+  },
+  table({ children }) {
+    return (
+      <div className="my-2 overflow-x-auto">
+        <table className="text-xs border-collapse w-full">{children}</table>
+      </div>
+    );
+  },
+  th({ children }) {
+    return (
+      <th className="border border-current/20 px-2 py-1 font-semibold text-left bg-current/5">
+        {children}
+      </th>
+    );
+  },
+  td({ children }) {
+    return <td className="border border-current/20 px-2 py-1">{children}</td>;
+  },
+};
+
+function ToolBadge({
+  message,
+  variant,
+}: {
+  message: Message;
+  variant: 'call' | 'result';
+}) {
+  const [expanded, setExpanded] = useState(false);
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(message.content);
+  } catch {
+    parsed = message.content;
+  }
+
+  const colorClass =
+    variant === 'call'
+      ? 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-800 dark:bg-violet-950 dark:text-violet-300'
+      : 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300';
+
+  const preClass =
+    variant === 'call'
+      ? 'border-violet-100 bg-violet-50/50 text-violet-800 dark:border-violet-900 dark:bg-violet-950/50 dark:text-violet-200'
+      : 'border-emerald-100 bg-emerald-50/50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-200';
+
+  return (
+    <div className="my-1 flex flex-col items-start">
+      <button
+        type="button"
+        className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors hover:opacity-80 ${colorClass}`}
+        onClick={() => setExpanded((v) => !v)}
+      >
+        <Wrench className="h-3 w-3 shrink-0" />
+        <span className="font-mono">{message.tool_name}</span>
+        {expanded ? (
+          <ChevronDown className="h-3 w-3 shrink-0" />
+        ) : (
+          <ChevronRight className="h-3 w-3 shrink-0" />
+        )}
+      </button>
+      {expanded && (
+        <pre
+          className={`mt-1.5 w-full max-w-lg rounded-lg border px-3 py-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap ${preClass}`}
+        >
+          {typeof parsed === 'string'
+            ? parsed
+            : JSON.stringify(parsed, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+function TypingIndicator() {
+  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">
+        <span
+          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
+          style={{ animationDelay: '0ms' }}
+        />
+        <span
+          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
+          style={{ animationDelay: '150ms' }}
+        />
+        <span
+          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
+          style={{ animationDelay: '300ms' }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function McpChatPage() {
+  const { request, currentLocaleCode, refetchUser } = useApp();
+  const t = useTranslations('core.McpChatPage');
+
+  const [selectedConvId, setSelectedConvId] = useState<number | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isSending, setIsSending] = useState(false);
+  const [convToDelete, setConvToDelete] = useState<Conversation | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const { data: conversations, refetch: refetchConvs } = useQuery<
+    Conversation[]
+  >({
+    queryKey: ['mcp-chat-conversations', currentLocaleCode],
+    queryFn: async () => {
+      const res = await request<Conversation[]>({
+        url: '/mcp-chat',
+        method: 'GET',
+      });
+      return res.data;
+    },
+  });
+
+  const convList = conversations ?? [];
+  const selectedConv = convList.find((c) => c.id === selectedConvId) ?? null;
+
+  useEffect(() => {
+    if (!selectedConvId) return;
+    request<Message[]>({
+      url: `/mcp-chat/${selectedConvId}/messages`,
+      method: 'GET',
+    })
+      .then((res) => setMessages(res.data))
+      .catch(() => setMessages([]));
+  }, [selectedConvId]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, isSending]);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
+    }
+  }, [input]);
+
+  async function handleNewConversation() {
+    try {
+      const res = await request<Conversation>({
+        url: '/mcp-chat',
+        method: 'POST',
+        data: {},
+      });
+      await refetchConvs();
+      setSelectedConvId(res.data.id);
+      setMessages([]);
+      return res.data.id;
+    } catch {
+      toast.error('Failed to create conversation');
+      return null;
+    }
+  }
+
+  async function handleSend() {
+    if (!input.trim() || isSending) return;
+    let activeConvId = selectedConvId;
+    if (!activeConvId) {
+      activeConvId = await handleNewConversation();
+      if (!activeConvId) return;
+    }
+    setIsSending(true);
+    const currentInput = input;
+    setInput('');
+
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: -Date.now(),
+        conversation_id: activeConvId!,
+        role: 'user',
+        content: currentInput,
+        tool_name: null,
+        tool_call_id: null,
+        created_at: new Date().toISOString(),
+      },
+    ]);
+
+    try {
+      const res = await request<Message[]>({
+        url: `/mcp-chat/${activeConvId}/messages`,
+        method: 'POST',
+        data: { message: currentInput },
+      });
+      setMessages(res.data);
+      await refetchConvs();
+      const hadToolUse = res.data.some(
+        (m) => m.role === 'tool_call' || m.role === 'tool_result'
+      );
+      if (hadToolUse) await refetchUser();
+    } catch {
+      toast.error('Failed to send message');
+      setMessages((prev) => prev.filter((m) => m.id !== -Date.now()));
+    } finally {
+      setIsSending(false);
+    }
+  }
+
+  async function handleDeleteConversation() {
+    if (!convToDelete) return;
+    try {
+      await request({
+        url: '/mcp-chat',
+        method: 'DELETE',
+        data: { ids: [convToDelete.id] },
+      });
+      toast.success('Conversation deleted');
+      if (selectedConvId === convToDelete.id) {
+        setSelectedConvId(null);
+        setMessages([]);
+      }
+      setConvToDelete(null);
+      await refetchConvs();
+    } catch {
+      toast.error('Failed to delete conversation');
+    }
+  }
+
+  const inputArea = (
+    <div className="relative flex items-end gap-2 rounded-2xl bg-background px-5 py-4">
+      <Textarea
+        ref={textareaRef}
+        className="resize-none flex-1 border-0 shadow-none focus-visible:ring-0 p-3 min-h-6 max-h-75 overflow-y-auto text-sm leading-relaxed bg-transparent"
+        placeholder={t('placeholder')}
+        value={input}
+        disabled={isSending}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            void handleSend();
+          }
+        }}
+        rows={1}
+      />
+      <Button
+        size="icon"
+        className="shrink-0 h-8 w-8 rounded-xl cursor-pointer"
+        disabled={isSending || !input.trim()}
+        onClick={() => void handleSend()}
+      >
+        <Send className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      {/* Sidebar */}
+      <aside className="w-64 shrink-0 flex flex-col border-r bg-muted/30">
+        <div className="p-3 border-b bg-background/50">
+          <Button
+            variant="outline"
+            className="w-full justify-start gap-2 cursor-pointer rounded-xl h-9 text-sm font-medium"
+            onClick={handleNewConversation}
+          >
+            <Plus className="h-4 w-4" />
+            {t('newConversation')}
+          </Button>
+        </div>
+        <div className="px-4 pt-4 pb-1.5">
+          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+            {t('conversations')}
+          </p>
+        </div>
+        <ScrollArea className="flex-1 px-2 pb-2">
+          {convList.length === 0 ? (
+            <div className="flex flex-col items-center gap-2 py-8 px-4 text-center">
+              <MessageSquare className="h-8 w-8 text-muted-foreground/40" />
+              <p className="text-xs text-muted-foreground">
+                {t('emptyConversations')}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-0.5 pt-1">
+              {convList.map((conv) => (
+                <div
+                  key={conv.id}
+                  className={`group flex items-center justify-between rounded-xl px-3 py-2 cursor-pointer transition-colors text-sm ${
+                    selectedConvId === conv.id
+                      ? 'bg-primary text-primary-foreground'
+                      : 'hover:bg-accent text-foreground'
+                  }`}
+                  onClick={() => {
+                    setSelectedConvId(conv.id);
+                    setMessages([]);
+                  }}
+                >
+                  <div className="flex items-center gap-2 min-w-0 flex-1">
+                    <MessageSquare className="h-3.5 w-3.5 shrink-0 opacity-60" />
+                    <span className="truncate text-xs font-medium">
+                      {conv.title || `#${conv.id}`}
+                    </span>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className={`h-6 w-6 opacity-0 group-hover:opacity-100 shrink-0 cursor-pointer transition-opacity ${
+                      selectedConvId === conv.id
+                        ? 'hover:bg-primary-foreground/20 text-primary-foreground'
+                        : 'hover:bg-destructive/10 hover:text-destructive'
+                    }`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setConvToDelete(conv);
+                    }}
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </aside>
+
+      {/* Main area */}
+      <main className="flex-1 flex flex-col overflow-hidden min-w-0">
+        {!selectedConvId ? (
+          /* Empty state */
+          <div className="flex flex-1 flex-col items-center justify-center gap-8 px-6">
+            <div className="flex flex-col items-center gap-3 text-center">
+              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 ring-1 ring-primary/20">
+                <Bot className="h-8 w-8 text-primary" />
+              </div>
+              <h1 className="text-2xl font-bold tracking-tight">
+                {t('title')}
+              </h1>
+              <p className="text-sm text-muted-foreground max-w-sm">
+                {t('description')}
+              </p>
+            </div>
+            <div className="w-full max-w-2xl">{inputArea}</div>
+          </div>
+        ) : (
+          /* Chat state */
+          <>
+            {/* Header */}
+            <header className="h-14 shrink-0 border-b flex items-center px-6 gap-3 bg-background/80 backdrop-blur-sm">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+                <Bot className="h-4 w-4 text-primary" />
+              </div>
+              <div className="flex flex-col leading-tight">
+                <span className="text-sm font-semibold">
+                  {selectedConv?.title || `Chat #${selectedConvId}`}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {t('title')}
+                </span>
+              </div>
+            </header>
+
+            {/* Messages */}
+            <ScrollArea className="flex-1 min-h-0 px-4 py-6">
+              <div className="flex flex-col gap-4 max-w-3xl mx-auto">
+                {messages.map((msg, idx) => {
+                  if (msg.role === 'tool_call') {
+                    return (
+                      <ToolBadge
+                        key={msg.id ?? idx}
+                        message={msg}
+                        variant="call"
+                      />
+                    );
+                  }
+                  if (msg.role === 'tool_result') {
+                    return (
+                      <ToolBadge
+                        key={msg.id ?? idx}
+                        message={msg}
+                        variant="result"
+                      />
+                    );
+                  }
+                  if (msg.role === 'user') {
+                    return (
+                      <div key={msg.id ?? idx} className="flex justify-end">
+                        <div className="max-w-[75%] rounded-2xl rounded-tr-md bg-primary px-4 py-2.5 text-sm text-primary-foreground shadow-sm">
+                          {msg.content}
+                        </div>
+                      </div>
+                    );
+                  }
+                  return (
+                    <div key={msg.id ?? idx} 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 shadow-sm">
+                        <Bot className="h-4 w-4 text-muted-foreground" />
+                      </div>
+                      <div className="max-w-[75%] rounded-2xl rounded-tl-md bg-muted px-4 py-2.5 text-sm shadow-sm prose-sm">
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          components={markdownComponents as never}
+                        >
+                          {msg.content}
+                        </ReactMarkdown>
+                      </div>
+                    </div>
+                  );
+                })}
+                {isSending && <TypingIndicator />}
+                <div ref={messagesEndRef} />
+              </div>
+            </ScrollArea>
+
+            {/* Input */}
+            <div className="shrink-0 border-t bg-background/80 backdrop-blur-sm px-6 py-4">
+              <div className="max-w-3xl mx-auto">{inputArea}</div>
+            </div>
+          </>
+        )}
+      </main>
+
+      <AlertDialog
+        open={Boolean(convToDelete)}
+        onOpenChange={(open) => {
+          if (!open) setConvToDelete(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteConversation')}?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {convToDelete?.title || `#${convToDelete?.id}`}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteConversation}>
+              {t('deleteConversation')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

package/hedhog/frontend/messages/en.json

@@ -1643,5 +1643,22 @@
     "noUsersWithAccess": "No users are currently linked to the assigned roles.",
     "grantedByRole": "Granted by",
     "moreUsers": "+{count} more users"
+  },
+  "McpChatPage": {
+    "title": "MCP Chat",
+    "description": "Chat with AI using MCP tools",
+    "newConversation": "New Conversation",
+    "conversations": "Conversations",
+    "placeholder": "Type your message... (Enter to send, Shift+Enter for new line)",
+    "send": "Send",
+    "sending": "Sending...",
+    "noConversation": "Select or create a conversation",
+    "toolCalled": "Tool called",
+    "toolResult": "Tool result",
+    "deleteConversation": "Delete",
+    "emptyConversations": "No conversations yet",
+    "breadcrumbDashboard": "Dashboard",
+    "breadcrumbManagement": "Management",
+    "breadcrumbCurrent": "MCP Chat"
   }
 }

package/hedhog/frontend/messages/pt.json

@@ -1698,5 +1698,22 @@
     "noUsersWithAccess": "Nenhum usuário está vinculado aos cargos atribuídos no momento.",
     "grantedByRole": "Liberado por",
     "moreUsers": "+{count} usuários"
+  },
+  "McpChatPage": {
+    "title": "Chat MCP",
+    "description": "Converse com IA usando ferramentas MCP",
+    "newConversation": "Nova Conversa",
+    "conversations": "Conversas",
+    "placeholder": "Digite sua mensagem... (Enter para enviar, Shift+Enter para nova linha)",
+    "send": "Enviar",
+    "sending": "Enviando...",
+    "noConversation": "Selecione ou crie uma conversa",
+    "toolCalled": "Ferramenta chamada",
+    "toolResult": "Resultado da ferramenta",
+    "deleteConversation": "Excluir",
+    "emptyConversations": "Nenhuma conversa ainda",
+    "breadcrumbDashboard": "Painel",
+    "breadcrumbManagement": "Gerenciamento",
+    "breadcrumbCurrent": "Chat MCP"
   }
 }

package/hedhog/table/mcp_conversation.yaml

@@ -0,0 +1,12 @@
+columns:
+  - type: pk
+  - name: user_id
+    type: fk
+    references:
+      table: user
+      column: id
+      onDelete: CASCADE
+  - name: title
+    isNullable: true
+  - type: created_at
+  - type: updated_at

package/hedhog/table/mcp_conversation_message.yaml

@@ -0,0 +1,23 @@
+columns:
+  - type: pk
+  - name: conversation_id
+    type: fk
+    references:
+      table: mcp_conversation
+      column: id
+      onDelete: CASCADE
+  - name: role
+    type: enum
+    enum:
+      - user
+      - assistant
+      - tool_call
+      - tool_result
+  - name: content
+    type: text
+  - name: tool_name
+    isNullable: true
+  - name: tool_call_id
+    isNullable: true
+  - type: created_at
+  - type: updated_at

package/hedhog/table/mcp_tool_call_log.yaml

@@ -0,0 +1,22 @@
+columns:
+  - type: pk
+  - name: user_id
+    type: fk
+    references:
+      table: user
+      column: id
+      onDelete: SET NULL
+    isNullable: true
+  - name: tool_name
+  - name: input
+    type: text
+    isNullable: true
+  - name: success
+    type: boolean
+    default: false
+  - name: error
+    isNullable: true
+  - name: duration_ms
+    type: int
+  - type: created_at
+  - type: updated_at