pi-mono

src/apps/officer-web/Screens/Dashboard/CapabilityPage.tsx

@@ -8,12 +8,13 @@ import { ArrowLeft, Pencil, Plus, Check, X, Trash2, Search, ChevronRight } from
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 import { useClient } from 'hooks/useClient';
-import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels, useVisiblePiMonoModels } from '@/state/useModels';
 import { useSettings } from '@/state/useSettings';
 import { Card } from '@/components/Card';
 import type { ChatMessage } from 'apps/Chat';
 import { useClaude } from '@/Screens/Dashboard/Chat/useClaude';
 import { useOpenCode } from '@/Screens/Dashboard/Chat/useOpenCode';
+import { usePiMono } from '@/Screens/Dashboard/Chat/usePiMono';
 import { EmbeddableChat } from '@/Screens/Dashboard/Chat/EmbeddableChat';
 type CapabilitySummary = {
   dirName: string;
@@ -60,7 +61,7 @@ type CapabilityChatProps = {
 };
 
 type CapabilityChatInnerProps = CapabilityChatProps & {
-  onProviderChange: (p: 'claude' | 'opencode') => void;
+  onProviderChange: (p: 'claude' | 'opencode' | 'pi-mono') => void;
 };
 
 const CapabilityChatClaude = ({
@@ -174,15 +175,59 @@ const CapabilityChatOpenCode = ({
   );
 };
 
+const CapabilityChatPiMono = ({
+  kind,
+  filePath,
+  resourceDir,
+  isNew,
+  description,
+  onResponseEnd,
+  onProviderChange,
+}: CapabilityChatInnerProps) => {
+  const piMonoModels = useVisiblePiMonoModels();
+  const seedFile = `${kind.toUpperCase()}.md`;
+  const promptFrontmatter = `<frontmatter>\ninput file: ${filePath}\n${seedFile}: ${filePath}\ndir: ${resourceDir}\n\nBe aware of any extra files alongside the same dir as the ${kind} file we're handling, for possible extra context. You can also, if pertinent, create scripts or other files that will help you in the future.\n</frontmatter>`;
+  const defaultInput = isNew
+    ? description ?? `Help me create the content for this new ${kind} file`
+    : `Help me understand and improve this ${kind} file`;
+
+  const piMono = usePiMono(undefined, undefined, { replaceUrl: false });
+
+  const onResponseEndRef = useRef(onResponseEnd);
+  onResponseEndRef.current = onResponseEnd;
+
+  const wasGenerating = useRef(false);
+  useEffect(() => {
+    if (wasGenerating.current && !piMono.isGenerating) {
+      onResponseEndRef.current?.();
+    }
+    wasGenerating.current = piMono.isGenerating;
+  }, [piMono.isGenerating]);
+
+  return (
+    <EmbeddableChat
+      chat={piMono}
+      provider="pi-mono"
+      availableModels={piMonoModels}
+      onProviderChange={onProviderChange}
+      defaultInput={defaultInput}
+      promptPrefix={promptFrontmatter}
+      className="h-full"
+    />
+  );
+};
+
 export const CapabilityChat = (props: CapabilityChatProps) => {
   const { settings } = useSettings();
-  const [provider, setProvider] = useState<'claude' | 'opencode'>(settings.chat.defaultProvider);
+  const [provider, setProvider] = useState<'claude' | 'opencode' | 'pi-mono'>(settings.chat.defaultProvider);
 
-  return provider === 'claude' ? (
-    <CapabilityChatClaude key="claude" {...props} onProviderChange={setProvider} />
-  ) : (
-    <CapabilityChatOpenCode key="opencode" {...props} onProviderChange={setProvider} />
-  );
+  if (provider === 'claude') {
+    return <CapabilityChatClaude key="claude" {...props} onProviderChange={setProvider} />;
+  }
+  if (provider === 'opencode') {
+    return <CapabilityChatOpenCode key="opencode" {...props} onProviderChange={setProvider} />;
+  }
+  return <CapabilityChatPiMono key="pi-mono" {...props} onProviderChange={setProvider} />;
 };
 
 export const FrontmatterBlock = ({ yaml }: { yaml: string }) => {