@hed-hog/core 0.0.399 → 0.0.400

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

@@ -41,7 +41,13 @@ function clampSidebarWidth(width: number) {
 }
 
 export default function McpChatPage() {
-  const { request, currentLocaleCode, refetchUser, accessToken, getSettingValue } = useApp();
+  const {
+    request,
+    currentLocaleCode,
+    refetchUser,
+    accessToken,
+    getSettingValue,
+  } = useApp();
   const t = useTranslations('core.McpChatPage');
   const mcpEnabled = getSettingValue('mcp-enabled') !== false;
   const isMobile = useIsMobile();
@@ -721,116 +727,61 @@ export default function McpChatPage() {
         </aside>
 
         <Sheet
-        open={isMobileConversationsOpen}
-        onOpenChange={setIsMobileConversationsOpen}
-      >
-        <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"
+          open={isMobileConversationsOpen}
+          onOpenChange={setIsMobileConversationsOpen}
         >
-          <SheetHeader className="sr-only">
-            <SheetTitle>{t('conversations')}</SheetTitle>
-            <SheetDescription>{t('openConversations')}</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full flex-col bg-muted/30 pt-11">
-            {sidebarContent}
-          </div>
-        </ResizableSheetContent>
-      </Sheet>
-
-      {/* Main area */}
-      <main className="flex-1 flex min-h-0 min-w-0 flex-col overflow-hidden">
-        {isMobile && (
-          <header className="h-12 shrink-0 border-b flex items-center px-3 gap-2 bg-background/90 backdrop-blur-sm md:hidden">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 cursor-pointer"
-              onClick={() => setIsMobileConversationsOpen(true)}
-              aria-label={t('openConversations')}
-            >
-              <MessageSquare className="h-4 w-4" />
-            </Button>
-            <span className="text-sm font-medium truncate">
-              {selectedConv?.title || t('title')}
-            </span>
-          </header>
-        )}
-
-        {!selectedConvId ? (
-          /* Empty state */
-          <div className="flex flex-1 flex-col items-center justify-center gap-6 px-4 md:gap-8 md: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 px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] md:px-0 md:pb-0">
-              <ChatInput
-                textareaRef={textareaRef}
-                submitOnEnter={!isMobile}
-                input={input}
-                isSending={isSending}
-                isUploadingFile={isUploadingFile}
-                disabled={!mcpEnabled}
-                attachments={attachments}
-                placeholder={t('placeholder')}
-                sendLabel={t('send')}
-                sendingLabel={t('sending')}
-                attachLabel={t('attachFile')}
-                uploadingFileLabel={t('uploadingFile')}
-                removeAttachmentLabel={t('removeAttachment')}
-                onInputChange={setInput}
-                onSend={() => {
-                  void handleSend();
-                }}
-                onUploadFiles={handleUploadFiles}
-                onRemoveAttachment={handleRemoveAttachment}
-              />
+          <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"
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>{t('conversations')}</SheetTitle>
+              <SheetDescription>{t('openConversations')}</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full flex-col bg-muted/30 pt-11">
+              {sidebarContent}
             </div>
-          </div>
-        ) : (
-          /* Chat state */
-          <>
-            {/* Header */}
-            <header className="h-14 shrink-0 border-b items-center px-4 md:px-6 gap-3 bg-background/80 backdrop-blur-sm hidden md:flex">
-              <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">
+          </ResizableSheetContent>
+        </Sheet>
+
+        {/* Main area */}
+        <main className="flex-1 flex min-h-0 min-w-0 flex-col overflow-hidden">
+          {isMobile && (
+            <header className="h-12 shrink-0 border-b flex items-center px-3 gap-2 bg-background/90 backdrop-blur-sm md:hidden">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 cursor-pointer"
+                onClick={() => setIsMobileConversationsOpen(true)}
+                tooltip={t('openConversations')}
+              >
+                <MessageSquare className="h-4 w-4" />
+              </Button>
+              <span className="text-sm font-medium truncate">
+                {selectedConv?.title || t('title')}
+              </span>
+            </header>
+          )}
+
+          {!selectedConvId ? (
+            /* Empty state */
+            <div className="flex flex-1 flex-col items-center justify-center gap-6 px-4 md:gap-8 md: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')}
-                </span>
+                </h1>
+                <p className="text-sm text-muted-foreground max-w-sm">
+                  {t('description')}
+                </p>
               </div>
-            </header>
-
-            {/* Messages */}
-            <ScrollArea className="min-h-0 flex-1 px-3 py-4 md:px-4 md:py-6">
-              <MessageFeed
-                messages={messages}
-                isLoadingMessages={isLoadingMessages}
-                isSending={isSending}
-                isStreamingResponse={isStreamingResponse}
-                messagesEndRef={messagesEndRef}
-              />
-            </ScrollArea>
-
-            {/* Input */}
-            <div className="shrink-0 border-t bg-background/80 px-3 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] backdrop-blur-sm md:px-6 md:py-4">
-              <div className="max-w-3xl mx-auto">
+              <div className="w-full max-w-2xl px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] md:px-0 md:pb-0">
                 <ChatInput
                   textareaRef={textareaRef}
                   submitOnEnter={!isMobile}
@@ -854,9 +805,64 @@ export default function McpChatPage() {
                 />
               </div>
             </div>
-          </>
-        )}
-      </main>
+          ) : (
+            /* Chat state */
+            <>
+              {/* Header */}
+              <header className="h-14 shrink-0 border-b items-center px-4 md:px-6 gap-3 bg-background/80 backdrop-blur-sm hidden md:flex">
+                <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="min-h-0 flex-1 px-3 py-4 md:px-4 md:py-6">
+                <MessageFeed
+                  messages={messages}
+                  isLoadingMessages={isLoadingMessages}
+                  isSending={isSending}
+                  isStreamingResponse={isStreamingResponse}
+                  messagesEndRef={messagesEndRef}
+                />
+              </ScrollArea>
+
+              {/* Input */}
+              <div className="shrink-0 border-t bg-background/80 px-3 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] backdrop-blur-sm md:px-6 md:py-4">
+                <div className="max-w-3xl mx-auto">
+                  <ChatInput
+                    textareaRef={textareaRef}
+                    submitOnEnter={!isMobile}
+                    input={input}
+                    isSending={isSending}
+                    isUploadingFile={isUploadingFile}
+                    disabled={!mcpEnabled}
+                    attachments={attachments}
+                    placeholder={t('placeholder')}
+                    sendLabel={t('send')}
+                    sendingLabel={t('sending')}
+                    attachLabel={t('attachFile')}
+                    uploadingFileLabel={t('uploadingFile')}
+                    removeAttachmentLabel={t('removeAttachment')}
+                    onInputChange={setInput}
+                    onSend={() => {
+                      void handleSend();
+                    }}
+                    onUploadFiles={handleUploadFiles}
+                    onRemoveAttachment={handleRemoveAttachment}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+        </main>
       </div>
 
       <AlertDialog

package/hedhog/frontend/app/message-templates/_components/message-template-sheet.tsx.ejs

@@ -0,0 +1,245 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { FormActions } from '@/components/ui/form-actions';
+import { Label } from '@/components/ui/label';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Eye } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import type { MessageTemplate } from '../_lib/types';
+
+/** Idiomas que um modelo carrega. */
+const LOCALES = ['pt', 'en'] as const;
+
+type LocaleCode = (typeof LOCALES)[number];
+
+type MessageTemplateSheetProps = {
+  open: boolean;
+  template: MessageTemplate | null;
+  onOpenChange: (open: boolean) => void;
+  onSaved: () => Promise<void> | void;
+};
+
+export function MessageTemplateSheet({
+  open,
+  template,
+  onOpenChange,
+  onSaved,
+}: MessageTemplateSheetProps) {
+  const t = useTranslations('core.MessageTemplatesPage');
+  const { request } = useApp();
+
+  const [isActive, setIsActive] = useState(true);
+  const [bodies, setBodies] = useState<Record<LocaleCode, string>>({
+    pt: '',
+    en: '',
+  });
+  const [tab, setTab] = useState<LocaleCode>('pt');
+  const [preview, setPreview] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  // Guardado por idioma: inserir variável tem que cair no campo que está à
+  // vista, e não no último que recebeu foco antes de trocar de aba.
+  const bodyRefs = useRef<Partial<Record<LocaleCode, HTMLTextAreaElement | null>>>({});
+
+  useEffect(() => {
+    if (!open || !template) return;
+
+    // `body` já vem resolvido pela API: o texto editado quando existe, senão o
+    // padrão do código. Quem abre um modelo nunca editado começa com o padrão à
+    // vista, e não com um campo vazio.
+    setBodies({
+      pt: template.body?.pt ?? '',
+      en: template.body?.en ?? '',
+    });
+    setIsActive(template.is_active);
+    setTab('pt');
+    setPreview(null);
+  }, [open, template]);
+
+  const setBody = (code: LocaleCode, body: string) =>
+    setBodies((current) => ({ ...current, [code]: body }));
+
+  /**
+   * Insere `{{variavel}}` onde o cursor está, e não no fim do texto: quem está
+   * editando o meio do modelo perderia a posição a cada clique.
+   */
+  const insertVariable = (name: string) => {
+    const field = bodyRefs.current[tab];
+    const token = `{{${name}}}`;
+    const body = bodies[tab];
+
+    if (!field) {
+      setBody(tab, `${body}${token}`);
+      return;
+    }
+
+    const start = field.selectionStart ?? body.length;
+    const end = field.selectionEnd ?? body.length;
+
+    setBody(tab, `${body.slice(0, start)}${token}${body.slice(end)}`);
+
+    // Depois do re-render, devolve o cursor para depois do que foi inserido.
+    requestAnimationFrame(() => {
+      field.focus();
+      field.setSelectionRange(start + token.length, start + token.length);
+    });
+  };
+
+  const handlePreview = async () => {
+    if (!template) return;
+
+    const { data } = await request<{ text: string }>({
+      url: `/message-templates/${template.slug}/preview`,
+      method: 'POST',
+      data: { body: bodies[tab] },
+    });
+
+    setPreview(data?.text ?? '');
+  };
+
+  const handleSubmit = async () => {
+    if (!template) return;
+
+    setSaving(true);
+    try {
+      await request({
+        url: `/message-templates/${template.slug}`,
+        method: 'PATCH',
+        data: {
+          is_active: isActive,
+          locale: Object.fromEntries(
+            LOCALES.map((code) => [code, { body: bodies[code] }]),
+          ),
+        },
+      });
+
+      toast.success(t('saved'));
+      await onSaved();
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const variables = Object.entries(template?.variables ?? {});
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <ResizableSheetContent sheetId="core-message-template-sheet">
+        <SheetHeader>
+          <SheetTitle>{template?.name?.pt ?? t('sheetTitle')}</SheetTitle>
+          <SheetDescription>{t('sheetDescription')}</SheetDescription>
+        </SheetHeader>
+
+        <ScrollArea className="flex-1">
+          <div className="space-y-5 p-4">
+            <div className="flex items-center justify-between gap-3 rounded-lg border p-3">
+              <div className="space-y-0.5">
+                <Label className="mb-0">{t('fieldActive')}</Label>
+                <p className="text-sm text-muted-foreground">
+                  {t('fieldActiveHint')}
+                </p>
+              </div>
+              <Switch checked={isActive} onCheckedChange={setIsActive} />
+            </div>
+
+            <Tabs value={tab} onValueChange={(value) => setTab(value as LocaleCode)}>
+              <TabsList>
+                {LOCALES.map((code) => (
+                  <TabsTrigger key={code} value={code}>
+                    {t(`locale_${code}`)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+
+              {LOCALES.map((code) => (
+                <TabsContent key={code} value={code} className="space-y-4 pt-4">
+                  <div className="space-y-2">
+                    <Label htmlFor={`body-${code}`}>{t('fieldBody')}</Label>
+                    <Textarea
+                      id={`body-${code}`}
+                      ref={(element) => {
+                        bodyRefs.current[code] = element;
+                      }}
+                      rows={16}
+                      className="font-mono text-sm"
+                      value={bodies[code]}
+                      onChange={(event) => setBody(code, event.target.value)}
+                    />
+                    <p className="text-sm text-muted-foreground">
+                      {t('fieldBodyHint')}
+                    </p>
+                  </div>
+                </TabsContent>
+              ))}
+            </Tabs>
+
+            {variables.length > 0 ? (
+              <div className="space-y-2">
+                <Label className="mb-0">{t('variables')}</Label>
+                <div className="flex flex-wrap gap-2">
+                  {variables.map(([name, spec]) => (
+                    <Button
+                      key={name}
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="font-mono text-xs"
+                      tooltip={spec.description}
+                      onClick={() => insertVariable(name)}
+                    >
+                      {`{{${name}}}`}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+
+            <div className="space-y-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handlePreview}
+                tooltip={t('previewHint')}
+              >
+                <Eye className="mr-2 h-4 w-4" />
+                {t('preview')}
+              </Button>
+
+              {preview !== null ? (
+                // Fundo e largura de balão: o que importa é ver onde a mensagem
+                // quebra a linha no aparelho, não o texto num bloco largo.
+                <pre className="max-w-md whitespace-pre-wrap rounded-lg bg-muted p-3 font-sans text-sm">
+                  {preview}
+                </pre>
+              ) : null}
+            </div>
+          </div>
+        </ScrollArea>
+
+        <FormActions
+          sheet
+          cancelLabel={t('cancel')}
+          onCancel={() => onOpenChange(false)}
+          onSubmit={handleSubmit}
+          submitLoading={saving}
+          submitLabel={t('save')}
+        />
+      </ResizableSheetContent>
+    </Sheet>
+  );
+}

package/hedhog/frontend/app/message-templates/_lib/types.ts.ejs

@@ -0,0 +1,24 @@
+/**
+ * Um modelo de mensagem como a API o entrega: o que a library declarou em
+ * código, com o que o banco sobrescreveu por cima.
+ */
+export type MessageTemplateVariable = {
+  description?: string;
+  sample: string | number | boolean;
+};
+
+export type MessageTemplate = {
+  slug: string;
+  /** Library dona do modelo. É por ele que a tela agrupa. */
+  module: string;
+  name: Record<string, string>;
+  description: Record<string, string>;
+  /** O texto em vigor por idioma — o editado quando existe, senão o padrão. */
+  body: Record<string, string>;
+  /** O texto padrão do código, para comparar e restaurar. */
+  fallback: Record<string, string>;
+  variables: Record<string, MessageTemplateVariable>;
+  is_active: boolean;
+  /** Há linha no banco? É o que acende o selo e habilita restaurar. */
+  customized: boolean;
+};