Post Meeting Template Editor & Selector

apps/desktop/src/components/editor-area/index.tsx

@@ -236,11 +236,42 @@ export function useEnhanceMutation({
       const { type } = await connectorCommands.getLlmConnection();
 
       const config = await dbCommands.getConfig();
+
+      let templateInfo = "";
+      let customGrammar: string | null = null;
+      const selectedTemplateId = config.general.selected_template_id;
+
+      if (selectedTemplateId) {
+        const templates = await dbCommands.listTemplates();
+        const selectedTemplate = templates.find(t => t.id === selectedTemplateId);
+
+        if (selectedTemplate) {
+          // Generate custom GBNF grammar
+          if (selectedTemplate.sections && selectedTemplate.sections.length > 0) {
+            customGrammar = generateCustomGBNF(selectedTemplate.sections);
+          }
+
+          // Format template as a readable string for system prompt
+          templateInfo = `
+SELECTED TEMPLATE:
+Template Title: ${selectedTemplate.title || "Untitled"}
+Template Description: ${selectedTemplate.description || "No description"}
+
+Sections:`;
+
+          selectedTemplate.sections?.forEach((section, index) => {
+            templateInfo += `
+  ${index + 1}. ${section.title || "Untitled Section"}
+     └─ ${section.description || "No description"}`;
+          });
+        }
+      }
+
       const participants = await dbCommands.sessionListParticipants(sessionId);
 
       const systemMessage = await templateCommands.render(
         "enhance.system",
-        { config, type },
+        { config, type, templateInfo },
       );
 
       const userMessage = await templateCommands.render(
@@ -253,9 +284,6 @@ export function useEnhanceMutation({
         },
       );
 
-      // console.log("systemMessage", systemMessage);
-      // console.log("userMessage", userMessage);
-
       const abortController = new AbortController();
       const abortSignal = AbortSignal.any([abortController.signal, AbortSignal.timeout(60 * 1000)]);
       setEnhanceController(abortController);
@@ -286,9 +314,14 @@ export function useEnhanceMutation({
         ],
         providerOptions: {
           [localProviderName]: {
-            metadata: {
-              grammar: "enhance",
-            },
+            metadata: customGrammar
+              ? {
+                grammar: "custom",
+                customGrammar: customGrammar,
+              }
+              : {
+                grammar: "enhance",
+              },
           },
         },
       });
@@ -410,3 +443,58 @@ function useAutoEnhance({
     enhanceMutate,
   ]);
 }
+
+function generateCustomGBNF(templateSections: any[]): string {
+  if (!templateSections || templateSections.length === 0) {
+    return "";
+  }
+
+  // Function to safely escape header text for GBNF string literals
+  function escapeForGBNF(text: string): string {
+    return text
+      .replace(/\\/g, "\\\\")
+      .replace(/"/g, "\\\"")
+      .replace(/\n/g, "\\n")
+      .replace(/\r/g, "\\r")
+      .replace(/\t/g, "\\t");
+  }
+
+  // Validate section titles and provide fallbacks
+  const validatedSections = templateSections.map((section, index) => {
+    let title = section.title || `Section ${index + 1}`;
+
+    title = title
+      .trim()
+      .replace(/[\x00-\x1F\x7F]/g, "") // Remove control characters
+      .substring(0, 100); // Limit length to prevent issues
+
+    return {
+      ...section,
+      safeTitle: title || `Section ${index + 1}`,
+    };
+  });
+
+  // Generate section rules with proper escaping
+  const sectionRules = validatedSections.map((section, index) => {
+    const sectionName = `section${index + 1}`;
+    const escapedHeader = escapeForGBNF(section.safeTitle);
+    return `${sectionName} ::= "# ${escapedHeader}\\n\\n" bline bline bline? bline? bline? "\\n"`;
+  }).join("\n");
+
+  // Generate root rule with all sections
+  const sectionNames = validatedSections.map((_, index) => `section${index + 1}`).join(" ");
+
+  const grammar = `root ::= thinking ${sectionNames}
+
+${sectionRules}
+
+bline ::= "- **" [^*\\n:]+ "**: " ([^*;,[.\\n] | link)+ ".\\n"
+
+hsf ::= "- Objective\\n"
+hd ::= "- " [A-Z] [^[(*\\n]+ "\\n"
+thinking ::= "<thinking>\\n" hsf hd hd? hd? hd? "</thinking>"
+
+link ::= "[" [^\\]]+ "]" "(" [^)]+ ")"`;
+
+  return grammar;
+}

apps/desktop/src/components/settings/components/tab-icon.tsx

@@ -2,6 +2,7 @@ import {
   AudioLinesIcon,
   BellIcon,
   CalendarIcon,
+  FileTextIcon,
   FlaskConicalIcon,
   MessageSquareIcon,
   SettingsIcon,
@@ -19,13 +20,15 @@ export function TabIcon({ tab }: { tab: Tab }) {
     case "sound":
       return <AudioLinesIcon className="h-4 w-4" />;
     case "lab":
-      return <FlaskConicalIcon size={16} />;
+      return <FlaskConicalIcon className="h-4 w-4" />;
     case "feedback":
-      return <MessageSquareIcon size={16} />;
+      return <MessageSquareIcon className="h-4 w-4" />;
     case "ai":
       return <SparklesIcon className="h-4 w-4" />;
     case "calendar":
       return <CalendarIcon className="h-4 w-4" />;
+    case "templates":
+      return <FileTextIcon className="h-4 w-4" />;
     default:
       return null;
   }

apps/desktop/src/components/settings/components/template-sections.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from "@lingui/react/macro";
-import { GripVertical as HandleIcon, PlusIcon } from "lucide-react";
+import { GripVertical as HandleIcon, PlusIcon, XIcon } from "lucide-react";
 import { Reorder, useDragControls } from "motion/react";
 import { useCallback, useState } from "react";
 
@@ -32,11 +32,18 @@ export function SectionsList({
     onChange(items);
   };
 
+  const handleDelete = (itemId: string) => {
+    const newItems = items.filter((item) => item.id !== itemId);
+    setItems(newItems);
+    onChange(newItems);
+  };
+
   const handleReorder = (v: typeof items) => {
     if (disabled) {
       return;
     }
     setItems(v);
+    onChange(v);
   };
 
   const handleAddSection = () => {
@@ -50,24 +57,18 @@ export function SectionsList({
   };
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col space-y-3">
       <Reorder.Group values={items} onReorder={handleReorder}>
-        <div className="flex flex-col">
+        <div className="flex flex-col space-y-2">
           {items.map((item) => (
-            <Reorder.Item key={item.id} value={item} className="mb-4">
-              <div className="relative cursor-move bg-neutral-50">
-                <button
-                  className="absolute left-2 top-1/2 -translate-y-1/2 cursor-move opacity-50 hover:opacity-100"
-                  onPointerDown={(e) => controls.start(e)}
-                >
-                  <HandleIcon className="h-4 w-4" />
-                </button>
-                <SectionItem
-                  disabled={disabled}
-                  item={item}
-                  onChange={handleChange}
-                />
-              </div>
+            <Reorder.Item key={item.id} value={item}>
+              <SectionItem
+                disabled={disabled}
+                item={item}
+                onChange={handleChange}
+                onDelete={handleDelete}
+                dragControls={controls}
+              />
             </Reorder.Item>
           ))}
         </div>
@@ -76,7 +77,7 @@ export function SectionsList({
       <Button
         variant="outline"
         size="sm"
-        className="mt-2"
+        className="mt-2 text-sm"
         onClick={handleAddSection}
         disabled={disabled}
       >
@@ -91,9 +92,11 @@ interface SectionItemProps {
   disabled: boolean;
   item: ReorderItem & { id: string };
   onChange: (item: ReorderItem & { id: string }) => void;
+  onDelete: (itemId: string) => void;
+  dragControls: any;
 }
 
-export function SectionItem({ disabled, item, onChange }: SectionItemProps) {
+export function SectionItem({ disabled, item, onChange, onDelete, dragControls }: SectionItemProps) {
   const { t } = useLingui();
 
   const handleChangeTitle = useCallback(
@@ -110,20 +113,49 @@ export function SectionItem({ disabled, item, onChange }: SectionItemProps) {
     [item, onChange],
   );
 
+  const handleDelete = useCallback(() => {
+    onDelete(item.id);
+  }, [item.id, onDelete]);
+
   return (
-    <div className="ml-8 flex flex-col gap-2 rounded-lg border p-4">
-      <Input
+    <div className="group relative rounded-md border border-border bg-card p-2 transition-all">
+      <button
+        className="absolute left-2 top-2 cursor-move opacity-30 hover:opacity-60 transition-opacity"
+        onPointerDown={(e) => dragControls.start(e)}
         disabled={disabled}
-        value={item.title}
-        onChange={handleChangeTitle}
-        placeholder={t`Enter a section title`}
-      />
-      <Textarea
+      >
+        <HandleIcon className="h-4 w-4 text-muted-foreground" />
+      </button>
+
+      <button
+        className="absolute right-2 top-2 opacity-30 hover:opacity-100 hover:text-red-500 transition-all"
+        onClick={handleDelete}
         disabled={disabled}
-        value={item.description}
-        onChange={handleChangeDescription}
-        placeholder={t`Describe the content and purpose of this section`}
-      />
+      >
+        <XIcon className="h-3 w-3" />
+      </button>
+
+      <div className="ml-5 mr-5 space-y-1">
+        <div>
+          <Input
+            disabled={disabled}
+            value={item.title}
+            onChange={handleChangeTitle}
+            placeholder={t`Enter a section title`}
+            className="border-0 bg-transparent p-0 text-base font-medium focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
+          />
+        </div>
+
+        <div>
+          <Textarea
+            disabled={disabled}
+            value={item.description}
+            onChange={handleChangeDescription}
+            placeholder={t`Describe the content and purpose of this section`}
+            className="min-h-[30px] resize-none border-0 bg-transparent p-0 text-sm text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/50"
+          />
+        </div>
+      </div>
     </div>
   );
 }

apps/desktop/src/components/settings/components/types.ts

@@ -1,14 +1,15 @@
 import type { LucideIcon } from "lucide-react";
-import { Bell, Calendar, MessageSquare, Settings, Sparkles, Volume2 } from "lucide-react";
+import { Bell, Calendar, FileText, MessageSquare, Settings, Sparkles, Volume2 } from "lucide-react";
 
-export type Tab = "general" | "calendar" | "ai" | "notifications" | "sound" | "lab" | "feedback";
+export type Tab = "general" | "calendar" | "ai" | "notifications" | "sound" | "templates" | "lab" | "feedback";
 
 export const TABS: { name: Tab; icon: LucideIcon }[] = [
   { name: "general", icon: Settings },
   { name: "calendar", icon: Calendar },
   { name: "ai", icon: Sparkles },
   { name: "notifications", icon: Bell },
   { name: "sound", icon: Volume2 },
+  { name: "templates", icon: FileText },
   // { name: "lab", icon: FlaskConical },
   { name: "feedback", icon: MessageSquare },
 ];

apps/desktop/src/components/settings/views/general.tsx

@@ -126,6 +126,7 @@ export default function General() {
         telemetry_consent: v.telemetryConsent ?? true,
         jargons: v.jargons.split(",").map((jargon) => jargon.trim()).filter(Boolean),
         save_recordings: v.saveRecordings ?? true,
+        selected_template_id: config.data.general.selected_template_id,
       };
 
       await dbCommands.setConfig({

apps/desktop/src/components/settings/views/index.ts

@@ -9,3 +9,4 @@ export { default as Profile } from "./profile";
 export { default as Sound } from "./sound";
 export { default as Team } from "./team";
 export { default as TemplateEditor } from "./template";
+export { default as TemplatesView } from "./templates";