@hed-hog/core 0.0.386 → 0.0.390

package/hedhog/frontend/app/mail/template/page.tsx.ejs

@@ -1,6 +1,5 @@
 'use client';
 
-import dynamic from 'next/dynamic';
 import type React from 'react';
 
 import {
@@ -10,6 +9,10 @@ import {
   PaginationFooter,
   SearchBar,
 } from '@/components/entity-list';
+import {
+  HtmlContentEditor,
+  isFullHtmlDocument,
+} from '@/components/html-content-editor';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -59,6 +62,7 @@ import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
 import { useApp } from '@hed-hog/next-app-provider';
 import {
+  AlertCircle,
   Database,
   Download,
   FileDown,
@@ -67,22 +71,9 @@ import {
   Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
-const RichTextEditor = dynamic(
-  () =>
-    import('@/components/rich-text-editor').then((mod) => ({
-      default: mod.RichTextEditor,
-    })),
-  {
-    ssr: false,
-    loading: () => (
-      <div className="min-h-48 bg-muted rounded-md animate-pulse" />
-    ),
-  }
-);
-
 interface Mail {
   id: number;
   slug: string;
@@ -105,6 +96,70 @@ interface ImportResponse {
   templates?: number[];
 }
 
+/**
+ * Renderiza o preview no servidor, pelo mesmo caminho do envio real
+ * (interpolação Handlebars + layout base), com debounce para não disparar uma
+ * requisição por tecla digitada.
+ */
+function useMailPreview({
+  enabled,
+  subject,
+  body,
+  variables,
+  locale,
+  request,
+}: {
+  enabled: boolean;
+  subject: string;
+  body: string;
+  variables: Record<string, string>;
+  locale: string;
+  request: ReturnType<typeof useApp>['request'];
+}) {
+  const [html, setHtml] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    if (!body.trim()) {
+      setHtml('');
+      return;
+    }
+
+    const controller = new AbortController();
+    const timer = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const response = await request<{ html: string }>({
+          url: '/mail/preview',
+          method: 'POST',
+          params: { locale },
+          data: { subject, body, variables },
+          signal: controller.signal,
+          showErrors: false,
+        });
+        setHtml(response.data?.html || '');
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.error('Error rendering mail preview:', error);
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setLoading(false);
+        }
+      }
+    }, 400);
+
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [enabled, subject, body, variables, locale, request]);
+
+  return { html, loading };
+}
+
 export default function EmailTemplatesPage() {
   const { locales, request, currentLocaleCode, getSettingValue } = useApp();
   const t = useTranslations('core.MailPage');
@@ -204,6 +259,34 @@ export default function EmailTemplatesPage() {
     }
   }, [testEmailRecipient]);
 
+  const { html: previewHtml, loading: previewLoading } = useMailPreview({
+    enabled: isDialogOpen,
+    subject: formData.subject,
+    body: formData.body,
+    variables: variableTestValues,
+    locale: selectedLocaleCode,
+    request,
+  });
+
+  const { html: testPreviewHtml } = useMailPreview({
+    enabled: isTestEmailDialogOpen,
+    subject: formData.subject,
+    body: formData.body,
+    variables: testEmailVariableValues,
+    locale: selectedLocaleCode,
+    request,
+  });
+
+  const bodyBypassesLayout = useMemo(
+    () => isFullHtmlDocument(formData.body),
+    [formData.body]
+  );
+
+  const editorVariables = useMemo(
+    () => formData.variables.map((name) => ({ label: `{{${name}}}` })),
+    [formData.variables]
+  );
+
   const handleCreate = () => {
     setEditMode(false);
     setSelectedTemplate(null);
@@ -631,49 +714,6 @@ export default function EmailTemplatesPage() {
     }
   };
 
-  const replaceVariablesInHTML = (html: string) => {
-    let result = html;
-    Object.entries(variableTestValues).forEach(([variable, value]) => {
-      if (value) {
-        const regex = new RegExp(`{{\\s*${variable}\\s*}}`, 'g');
-        result = result.replace(regex, value);
-      }
-    });
-    return result;
-  };
-
-  const renderHTMLPreview = (html: string) => {
-    const processedHtml = replaceVariablesInHTML(html);
-    return `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <meta charset="UTF-8">
-          <style>
-            body {
-              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-              line-height: 1.6;
-              color: #333;
-              max-width: 600px;
-              margin: 0 auto;
-              padding: 20px;
-            }
-            a {
-              color: #0066cc;
-              text-decoration: none;
-            }
-            a:hover {
-              text-decoration: underline;
-            }
-          </style>
-        </head>
-        <body>
-          ${processedHtml}
-        </body>
-      </html>
-    `;
-  };
-
   const handleImportClick = () => {
     const input = document.createElement('input');
     input.type = 'file';
@@ -904,7 +944,7 @@ export default function EmailTemplatesPage() {
             </SheetDescription>
           </SheetHeader>
           <form onSubmit={handleSubmit} className="space-y-6">
-            <div className="grid grid-cols-2 gap-6">
+            <div className="grid grid-cols-3 gap-6">
               <div className="space-y-4 overflow-y-auto max-h-[calc(90vh-200px)] pr-4">
                 <div className="space-y-2">
                   <Label htmlFor="slug">{t('slugLabel')}</Label>
@@ -947,56 +987,12 @@ export default function EmailTemplatesPage() {
                   </p>
                 </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="body">{t('bodyLabel')}</Label>
-                  <RichTextEditor
-                    key={selectedLocaleCode}
-                    value={formData.body}
-                    onChange={(value) =>
-                      setFormData({ ...formData, body: value })
-                    }
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-4">
-                <div className="absolute top-4 right-8 space-y-2">
-                  <Label htmlFor="locale-select">{t('localeLabel')}</Label>
-                  <Select
-                    value={selectedLocaleCode}
-                    onValueChange={handleLocaleChange}
-                  >
-                    <SelectTrigger id="locale-select" className="bg-background">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {locales.map((locale) => (
-                        <SelectItem key={locale.code} value={locale.code}>
-                          {locale.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="space-y-2">
-                  <Label>{t('preview')}</Label>
-                  <div className="rounded-lg border bg-white overflow-auto max-h-[calc(90vh-280px)]">
-                    <iframe
-                      srcDoc={renderHTMLPreview(formData.body)}
-                      className="w-full min-h-125 border-0"
-                      title="Email Preview"
-                      style={{ colorScheme: 'light' }}
-                    />
-                  </div>
-                </div>
-
                 {formData.variables.length > 0 && (
-                  <div className="mt-4">
-                    <h4 className="mb-2 text-sm font-semibold">
+                  <div className="space-y-2">
+                    <h4 className="text-sm font-semibold">
                       {t('availableVariables')}
                     </h4>
-                    <div className="space-y-2 grid grid-cols-2">
+                    <div className="space-y-2">
                       {formData.variables.map((v, idx) => (
                         <div key={idx} className="flex items-center gap-2">
                           <Badge
@@ -1022,6 +1018,57 @@ export default function EmailTemplatesPage() {
                   </div>
                 )}
               </div>
+
+              <div className="col-span-2 space-y-4">
+                <div className="absolute top-4 right-8 space-y-2">
+                  <Label htmlFor="locale-select">{t('localeLabel')}</Label>
+                  <Select
+                    value={selectedLocaleCode}
+                    onValueChange={handleLocaleChange}
+                  >
+                    <SelectTrigger id="locale-select" className="bg-background">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {locales.map((locale) => (
+                        <SelectItem key={locale.code} value={locale.code}>
+                          {locale.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="body">{t('bodyLabel')}</Label>
+                  <HtmlContentEditor
+                    key={selectedLocaleCode}
+                    value={formData.body}
+                    onChange={(value) =>
+                      setFormData({ ...formData, body: value })
+                    }
+                    variables={editorVariables}
+                    previewHtml={previewHtml}
+                    previewLoading={previewLoading}
+                    zoomStorageKey="mail-template-html-editor-zoom"
+                    className="h-[calc(90vh-260px)]"
+                    warnings={
+                      bodyBypassesLayout ? (
+                        <div className="flex items-start gap-2 rounded-lg border border-amber-400/30 bg-amber-50 p-2.5 text-xs text-amber-800 dark:bg-amber-950/30 dark:text-amber-300">
+                          <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                          <span>
+                            <span className="font-medium">
+                              {t('fullDocumentWarningTitle')}
+                            </span>
+                            {' — '}
+                            {t('fullDocumentWarningDesc')}
+                          </span>
+                        </div>
+                      ) : null
+                    }
+                  />
+                </div>
+              </div>
             </div>
 
             <div className="flex justify-between items-center pt-4 border-t">
@@ -1127,21 +1174,8 @@ export default function EmailTemplatesPage() {
               <Label>{t('emailPreview')}</Label>
               <div className="rounded-lg border bg-white overflow-hidden max-h-100">
                 <iframe
-                  srcDoc={renderHTMLPreview(
-                    Object.entries(testEmailVariableValues).reduce(
-                      (html, [variable, value]) => {
-                        if (value) {
-                          const regex = new RegExp(
-                            `{{\\s*${variable}\\s*}}`,
-                            'g'
-                          );
-                          return html.replace(regex, value);
-                        }
-                        return html;
-                      },
-                      formData.body
-                    )
-                  )}
+                  srcDoc={testPreviewHtml}
+                  sandbox=""
                   className="w-full min-h-100 border-0"
                   title="Email Test Preview"
                   style={{ colorScheme: 'light' }}

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

@@ -10,6 +10,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
@@ -19,17 +20,26 @@ import {
   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';
+import { usePersistedSheetWidth } from '@/hooks/use-persisted-sheet-width';
+import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Bot, MessageSquare } from 'lucide-react';
+import { Bot, GripVerticalIcon, MessageSquare } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { ChatInput, ConversationSidebar, MessageFeed } from './chat-components';
 import { Conversation, Message } from './chat-types';
 
+const SIDEBAR_DEFAULT_WIDTH = 256;
+const SIDEBAR_MIN_WIDTH = 220;
+const SIDEBAR_MAX_WIDTH = 480;
+
+function clampSidebarWidth(width: number) {
+  return Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, width));
+}
+
 export default function McpChatPage() {
   const { request, currentLocaleCode, refetchUser, accessToken, getSettingValue } = useApp();
   const t = useTranslations('core.McpChatPage');
@@ -55,6 +65,24 @@ export default function McpChatPage() {
   const streamingRunRef = useRef(0);
   const streamAbortRef = useRef<AbortController | null>(null);
 
+  const [sidebarWidth, setSidebarWidth] = usePersistedSheetWidth({
+    sheetId: 'core-mcp-chat-conversations-panel',
+    defaultWidth: SIDEBAR_DEFAULT_WIDTH,
+    minWidth: SIDEBAR_MIN_WIDTH,
+    maxWidth: SIDEBAR_MAX_WIDTH,
+  });
+  const [sidebarPreviewWidth, setSidebarPreviewWidth] = useState<number | null>(
+    null
+  );
+  const [isResizingSidebar, setIsResizingSidebar] = useState(false);
+  const sidebarResizeRef = useRef({
+    startX: 0,
+    startWidth: SIDEBAR_DEFAULT_WIDTH,
+  });
+  const currentSidebarWidth = clampSidebarWidth(
+    sidebarPreviewWidth ?? sidebarWidth
+  );
+
   const selectedConversationDraft = useFormDraft<number | null>({
     storageKey: 'mcp-chat-selected-conversation-draft',
     value: selectedConvId,
@@ -180,6 +208,46 @@ export default function McpChatPage() {
     };
   }, []);
 
+  useEffect(() => {
+    if (!isResizingSidebar) {
+      return;
+    }
+
+    function handlePointerMove(event: PointerEvent) {
+      const deltaX = event.clientX - sidebarResizeRef.current.startX;
+      setSidebarPreviewWidth(
+        clampSidebarWidth(sidebarResizeRef.current.startWidth + deltaX)
+      );
+    }
+
+    function handlePointerUp() {
+      setIsResizingSidebar(false);
+      if (sidebarPreviewWidth !== null) {
+        setSidebarWidth(sidebarPreviewWidth);
+      }
+      setSidebarPreviewWidth(null);
+    }
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp, { once: true });
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [isResizingSidebar, sidebarPreviewWidth, setSidebarWidth]);
+
+  function handleSidebarResizeStart(
+    event: React.PointerEvent<HTMLButtonElement>
+  ) {
+    event.preventDefault();
+    sidebarResizeRef.current = {
+      startX: event.clientX,
+      startWidth: currentSidebarWidth,
+    };
+    setIsResizingSidebar(true);
+  }
+
   async function streamAssistantMessage(responseMessages: Message[]) {
     const lastAssistantIdx = [...responseMessages]
       .map((msg, idx) => ({ msg, idx }))
@@ -585,30 +653,74 @@ export default function McpChatPage() {
     />
   );
 
+  const pageHeader = (
+    <div className="shrink-0 px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbDashboard'), href: '/' },
+          { label: t('breadcrumbManagement'), href: '/core/management' },
+          { label: t('breadcrumbCurrent') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+    </div>
+  );
+
   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 className="flex h-dvh min-h-0 flex-col overflow-hidden bg-background">
+        {pageHeader}
+        <div className="flex min-h-0 flex-1 items-center justify-center 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>
+            <p className="text-sm text-muted-foreground">{t('mcpDisabled')}</p>
           </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 */}
-      <aside className="hidden md:flex w-64 shrink-0 flex-col border-r bg-muted/30">
-        {sidebarContent}
-      </aside>
+    <div className="flex h-dvh min-h-0 flex-col overflow-hidden bg-background">
+      {pageHeader}
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        {/* Sidebar */}
+        <aside
+          className="relative hidden md:flex shrink-0 flex-col border-r bg-muted/30"
+          style={{ width: currentSidebarWidth }}
+        >
+          {sidebarContent}
+          <button
+            type="button"
+            aria-label={t('resizePanel')}
+            onPointerDown={handleSidebarResizeStart}
+            className="group absolute top-0 -right-1.5 z-10 flex h-full w-3 cursor-ew-resize items-center justify-center"
+          >
+            <span
+              className={cn(
+                'absolute inset-y-0 w-px transition-colors duration-150',
+                isResizingSidebar
+                  ? 'bg-primary'
+                  : 'bg-border delay-0 group-hover:bg-primary/70 group-hover:delay-150'
+              )}
+            />
+            <span
+              className={cn(
+                'relative z-10 pointer-events-none rounded-full border p-0.5 shadow-sm transition-colors',
+                isResizingSidebar
+                  ? 'border-primary bg-primary/15 text-primary-foreground'
+                  : 'bg-border/80 text-muted-foreground/70 group-hover:border-primary group-hover:bg-primary/15 group-hover:text-primary-foreground'
+              )}
+            >
+              <GripVerticalIcon className="size-3" />
+            </span>
+          </button>
+        </aside>
 
-      <Sheet
+        <Sheet
         open={isMobileConversationsOpen}
         onOpenChange={setIsMobileConversationsOpen}
       >
@@ -634,7 +746,6 @@ export default function McpChatPage() {
       <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">
-            <SidebarTrigger className="h-8 w-8 cursor-pointer" />
             <Button
               variant="ghost"
               size="icon"
@@ -746,6 +857,7 @@ export default function McpChatPage() {
           </>
         )}
       </main>
+      </div>
 
       <AlertDialog
         open={Boolean(convToDelete)}