@alpaca-editor/core 1.0.4112 → 1.0.4118

package/src/editor/ai/AgentTerminal.tsx

@@ -5,7 +5,16 @@ import React, {
   useCallback,
   useLayoutEffect,
 } from "react";
-import { Send, AlertCircle, Loader2, User, Wand2, Square } from "lucide-react";
+import {
+  Send,
+  AlertCircle,
+  Loader2,
+  User,
+  Wand2,
+  Square,
+  Mic,
+  MicOff,
+} from "lucide-react";
 import { DancingDots } from "./DancingDots";
 import {
   AgentChatMessage,
@@ -197,6 +206,12 @@ export function AgentTerminal({
   const [agentMetadata, setAgentMetadata] = useState<AgentMetadata | null>(
     null,
   );
+  // Voice input state
+  const [isVoiceSupported, setIsVoiceSupported] = useState(false);
+  const [isListening, setIsListening] = useState(false);
+  const recognitionRef = useRef<any>(null);
+  const prevPlaceholderRef = useRef<string | null>(null);
+  const [voiceError, setVoiceError] = useState<string | null>(null);
   const [isWaitingForResponse, setIsWaitingForResponse] = useState(false);
   const isWaitingRef = useRef<boolean>(false);
   useEffect(() => {
@@ -256,7 +271,8 @@ export function AgentTerminal({
   const [selectedModelId, setSelectedModelId] = useState<string | undefined>(
     undefined,
   );
-  const [mode, setMode] = useState<"agent" | "ask">("agent");
+  type AgentMode = "agent" | "ask" | "restricted";
+  const [mode, setMode] = useState<AgentMode>("restricted");
 
   // Read deterministic flags from query string once
   const deterministicFlags = React.useMemo(() => {
@@ -337,6 +353,120 @@ export function AgentTerminal({
     container.scrollTop = container.scrollHeight;
   }, []);
 
+  // Detect speech recognition support (client-only)
+  useEffect(() => {
+    try {
+      if (typeof window === "undefined") return;
+      const SR =
+        (window as any).SpeechRecognition ||
+        (window as any).webkitSpeechRecognition;
+      setIsVoiceSupported(!!SR);
+    } catch {
+      setIsVoiceSupported(false);
+    }
+  }, []);
+
+  // Start voice recognition
+  const startVoice = useCallback(() => {
+    try {
+      if (isListening) return;
+      if (typeof window === "undefined") return;
+      const SR: any =
+        (window as any).SpeechRecognition ||
+        (window as any).webkitSpeechRecognition;
+      if (!SR) {
+        setVoiceError("Voice input is not supported in this browser");
+        return;
+      }
+      const r = new SR();
+      r.lang = (editContext?.currentItemDescriptor?.language as any) || "en-US";
+      r.continuous = true;
+      r.interimResults = true;
+      r.onstart = () => {
+        setIsListening(true);
+        prevPlaceholderRef.current = inputPlaceholder;
+        setVoiceError(null);
+        setInputPlaceholder("Listening...");
+      };
+      r.onresult = (event: any) => {
+        let finalText = "";
+        let interimText = "";
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const res = event.results[i];
+          if (res.isFinal) finalText += res[0]?.transcript || "";
+          else interimText += res[0]?.transcript || "";
+        }
+        if (interimText) {
+          setInputPlaceholder(`Listening... ${interimText.trim()}`);
+        } else {
+          setInputPlaceholder("Listening...");
+        }
+        if (finalText && finalText.trim()) {
+          setPrompt((prev) => {
+            const prefix = prev && !prev.endsWith(" ") ? prev + " " : prev;
+            return (prefix || "") + finalText.trim() + " ";
+          });
+          if (textareaRef.current) {
+            try {
+              const v = textareaRef.current.value || "";
+              textareaRef.current.selectionStart = v.length;
+              textareaRef.current.selectionEnd = v.length;
+            } catch {}
+          }
+        }
+      };
+      r.onerror = (e: any) => {
+        console.warn("Speech recognition error", e);
+        setVoiceError(e?.error || "Voice input error");
+      };
+      r.onend = () => {
+        setIsListening(false);
+        if (prevPlaceholderRef.current !== null) {
+          setInputPlaceholder(prevPlaceholderRef.current);
+          prevPlaceholderRef.current = null;
+        }
+        recognitionRef.current = null;
+      };
+      recognitionRef.current = r;
+      r.start();
+    } catch (e) {
+      console.error("Failed to start voice input", e);
+      setVoiceError("Failed to start voice input");
+    }
+  }, [
+    editContext?.currentItemDescriptor?.language,
+    inputPlaceholder,
+    isListening,
+  ]);
+
+  const stopVoice = useCallback(() => {
+    try {
+      const r = recognitionRef.current;
+      if (r) r.stop();
+    } catch {}
+  }, []);
+
+  const toggleVoice = useCallback(() => {
+    if (isListening) stopVoice();
+    else startVoice();
+  }, [isListening, startVoice, stopVoice]);
+
+  // Cleanup any active recognition on unmount
+  useEffect(() => {
+    return () => {
+      try {
+        const r = recognitionRef.current;
+        if (r) {
+          r.onresult = null;
+          r.onerror = null;
+          r.onend = null;
+          r.stop();
+        }
+      } catch {}
+      recognitionRef.current = null;
+    };
+  }, []);
+
   // Check if user is at the bottom of the scroll container
   const isAtBottom = useCallback(() => {
     const container = messagesContainerRef.current;
@@ -1240,22 +1370,31 @@ export function AgentTerminal({
       const metaMode = (agentMetadata as any)?.mode as
         | "agent"
         | "ask"
+        | "restricted"
         | undefined;
-      if (metaMode === "agent" || metaMode === "ask") {
+      if (
+        metaMode === "agent" ||
+        metaMode === "ask" ||
+        metaMode === "restricted"
+      ) {
         setMode(metaMode);
         return;
       }
     } catch {}
     try {
       const serverMode = (agent as any)?.mode as string | undefined;
-      if (serverMode === "agent" || serverMode === "ask") {
+      if (
+        serverMode === "agent" ||
+        serverMode === "ask" ||
+        serverMode === "restricted"
+      ) {
         setMode(serverMode);
       }
     } catch {}
   }, [agentMetadata, (agent as any)?.mode]);
 
   const updateMode = useCallback(
-    async (nextMode: "agent" | "ask") => {
+    async (nextMode: AgentMode) => {
       setMode(nextMode);
       const current = agentMetadata || ({} as AgentMetadata);
       const nextMeta: AgentMetadata = {
@@ -1305,7 +1444,7 @@ export function AgentTerminal({
       if (!pending) return;
       const payload: {
         model?: string | null;
-        mode?: "agent" | "ask" | string | null;
+        mode?: AgentMode | string | null;
       } = {};
       if (pending.modelName) payload.model = pending.modelName;
       if (pending.mode) payload.mode = pending.mode;
@@ -1393,7 +1532,7 @@ export function AgentTerminal({
         version: editContext.currentItemDescriptor?.version || 1,
         selection: effectiveSelection,
         selectedText: selectedTextFromCtx,
-        mode: mode,
+        mode: mode as any,
         allowedFunctions:
           mode === "ask"
             ? activeProfile?.askModeTools &&
@@ -1572,7 +1711,7 @@ export function AgentTerminal({
         version: editContext.currentItemDescriptor?.version || 1,
         selection: effectiveSelection,
         selectedText: selectedTextFromCtx,
-        mode: mode,
+        mode: mode as any,
         allowedFunctions:
           mode === "ask"
             ? activeProfile?.askModeTools &&
@@ -2369,6 +2508,7 @@ export function AgentTerminal({
               aria-label="Mode"
               data-testid="agent-mode-select"
             >
+              <option value="restricted">Restricted</option>
               <option value="agent">Agent</option>
               <option value="ask">Ask</option>
             </select>
@@ -2461,22 +2601,46 @@ export function AgentTerminal({
                 </PopoverContent>
               </Popover>
             ) : null}
-            <AgentCostDisplay totalTokens={totalTokens} />
           </div>
-          <Button
-            onClick={isExecuting ? handleStop : handleSubmit}
-            disabled={!isExecuting && !prompt.trim()}
-            size="sm"
-            className="h-5.5 w-5.5 cursor-pointer self-end rounded-full"
-            title={isExecuting ? "Stop" : "Send"}
-            aria-label={isExecuting ? "Stop" : "Send"}
-          >
-            {isExecuting ? (
-              <Square className="size-3" strokeWidth={1} />
-            ) : (
-              <Send className="size-3" strokeWidth={1} />
-            )}
-          </Button>
+          <div className="flex items-center gap-1 self-end">
+            {isVoiceSupported ? (
+              <Button
+                onClick={toggleVoice}
+                size="sm"
+                className="h-5.5 w-5.5 cursor-pointer rounded-full"
+                title={isListening ? "Stop voice input" : "Start voice input"}
+                aria-label={
+                  isListening ? "Stop voice input" : "Start voice input"
+                }
+                aria-pressed={isListening}
+              >
+                {isListening ? (
+                  <MicOff className="size-3" strokeWidth={1} />
+                ) : (
+                  <Mic className="size-3" strokeWidth={1} />
+                )}
+              </Button>
+            ) : null}
+            <Button
+              onClick={isExecuting ? handleStop : handleSubmit}
+              disabled={!isExecuting && !prompt.trim()}
+              size="sm"
+              className="h-5.5 w-5.5 cursor-pointer rounded-full"
+              title={isExecuting ? "Stop" : "Send"}
+              aria-label={isExecuting ? "Stop" : "Send"}
+              data-testid="agent-send-stop-button"
+              data-executing={isExecuting ? "true" : "false"}
+            >
+              {isExecuting ? (
+                <Square className="size-3" strokeWidth={1} />
+              ) : (
+                <Send className="size-3" strokeWidth={1} />
+              )}
+            </Button>
+          </div>
+        </div>
+        <div className="mt-1 flex justify-start">
+          <AgentCostDisplay totalTokens={totalTokens} />
         </div>
       </div>
     </div>

package/src/editor/ai/Agents.tsx

@@ -545,7 +545,7 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
             <div
               key={agent.id}
               className={cn(
-                "flex min-w-0 cursor-pointer items-center gap-1 border-r border-gray-200 px-3 py-2 text-xs",
+                "flex min-w-0 cursor-pointer items-center gap-1 border-r border-gray-200 px-2 py-2 pr-1.5 text-xs",
                 activeAgentId === agent.id
                   ? "border-b-white bg-white"
                   : "hover:bg-gray-100",
@@ -594,7 +594,7 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
                   e.stopPropagation();
                   closeAgent(agent.id);
                 }}
-                icon={<X className="size-2" strokeWidth={1} />}
+                icon={<X className="size-3" strokeWidth={1} />}
                 label="Close"
                 className="ml-1 opacity-60 hover:opacity-100"
               />

package/src/editor/ai/ContextInfoBar.tsx

@@ -537,9 +537,11 @@ export function ContextInfoBar({
         />
       </div>
       {!isCollapsed && (
-        <div className="flex items-center justify-between text-xs text-gray-600">
-          <div className="flex flex-wrap items-center gap-2">{chips}</div>
-          <div className="ml-2 flex flex-col items-end gap-1">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between text-xs text-gray-600">
+            <div className="flex flex-wrap items-center gap-2">{chips}</div>
+          </div>
+          <div className="flex flex-col items-start gap-1">
             {canAddPage && (
               <Button size="xs" variant="outline" onClick={addPagesToContext}>
                 <Plus className="mr-1 h-3 w-3" strokeWidth={1} /> Add current
@@ -556,9 +558,9 @@ export function ContextInfoBar({
                 components
               </Button>
             )}
-            <div className="text-2xs text-gray-400">
-              Tip: Drag items or components here to add them
-            </div>
+          </div>
+          <div className="text-2xs text-gray-400">
+            Tip: Drag items or components here to add them
           </div>
         </div>
       )}

package/src/editor/client/EditorShell.tsx

@@ -142,6 +142,7 @@ import { FullscreenControls } from "./ui/FullscreenControls";
 import { EditorChrome } from "./ui/EditorChrome";
 import { useWorkbox } from "./hooks/useWorkbox";
 import { useMediaSelector } from "./hooks/useMediaSelector";
+import { useGlobalEditorKeyDown } from "./hooks/useGlobalEditorKeyDown";
 
 export type FieldAction = {
   field: FieldDescriptor;
@@ -1525,6 +1526,8 @@ export function EditorShell({
     executeCommand,
   });
 
+  useGlobalEditorKeyDown(handleKeyDown);
+
   useEffect(() => {
     const handleGlobalBlur = () => {
       operations.onFieldBlur?.();

package/src/editor/client/GenericDialog.tsx

@@ -1,5 +1,9 @@
-import { Dialog } from "primereact/dialog";
-
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
 import { forwardRef, useImperativeHandle, useState } from "react";
 
 export interface GenericDialogHandle {
@@ -38,13 +42,13 @@ export const GenericDialog = forwardRef<GenericDialogHandle>((_, ref) => {
   }));
 
   return (
-    <Dialog
-      onHide={() => setVisible(false)}
-      visible={visible}
-      header={title}
-      style={{ width, height }}
-    >
-      {content}
+    <Dialog open={visible} onOpenChange={(open) => !open && setVisible(false)}>
+      <DialogContent className="max-w-none" style={{ width, height }}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 overflow-auto p-6">{content}</div>
+      </DialogContent>
     </Dialog>
   );
 });

package/src/editor/client/hooks/useGlobalEditorKeyDown.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export function useGlobalEditorKeyDown(onKeyDown: (ev: KeyboardEvent) => void) {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [onKeyDown]);
+}

package/src/editor/client/ui/EditorChrome.tsx

@@ -34,7 +34,7 @@ export function EditorChrome(props: {
       centerPanelView={centerPanelView}
       rightSidebar={
         currentView.rightSidebar &&
-        editContext.page &&
+        (editContext.page || editContext.contentEditorItem?.hasLayout) &&
         showComponentNavigator && (
           <SidebarView
             sidebar={currentView.rightSidebar}
@@ -49,9 +49,13 @@ export function EditorChrome(props: {
       farRightSidebar={
         showAgentsPanel &&
         !editContext.currentWizardId &&
-        !["splash-screen", "open-page", "new-page", "page-wizard", "control-center"].includes(
-          viewName,
-        ) && (
+        ![
+          "splash-screen",
+          "open-page",
+          "new-page",
+          "page-wizard",
+          "control-center",
+        ].includes(viewName) && (
           <SidebarView
             sidebar={{
               title: "Agents",

package/src/editor/commands/localizeItem/LocalizeItemDialog.tsx

@@ -1,5 +1,10 @@
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../../../components/ui/dialog";
 import { useEffect, useState } from "react";
 import DialogButtons from "../../ui/DialogButtons";
 import { DialogProps } from "../../client/editContext";
@@ -119,7 +124,9 @@ export function LocalizeItemDialog(
             </div>
           )}
           <DialogButtons>
-            <Button onClick={() => props.onClose?.(null)} label="Close" />
+            <Button onClick={() => props.onClose?.(null)} size="sm">
+              Close
+            </Button>
           </DialogButtons>
         </div>
       );
@@ -179,8 +186,12 @@ export function LocalizeItemDialog(
           </div>
         </div>
         <DialogButtons>
-          <Button onClick={startLocalization} label="Start" />
-          <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+          <Button onClick={startLocalization} size="sm">
+            Start
+          </Button>
+          <Button onClick={() => props.onClose?.(null)} size="sm">
+            Cancel
+          </Button>
         </DialogButtons>
       </div>
     );
@@ -188,14 +199,22 @@ export function LocalizeItemDialog(
 
   return (
     <Dialog
-      visible={true}
-      onHide={() => {
-        props.onClose?.(null);
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          props.onClose?.(null);
+        }
       }}
-      style={{ width: "75vw", height: "75vh" }}
-      header="Localize"
     >
-      {dialogContent}
+      <DialogContent
+        className="max-w-none"
+        style={{ width: "75vw", height: "75vh" }}
+      >
+        <DialogHeader>
+          <DialogTitle>Localize</DialogTitle>
+        </DialogHeader>
+        <div className="flex-1 overflow-auto">{dialogContent}</div>
+      </DialogContent>
     </Dialog>
   );
 }

package/src/editor/context-menu/CopyMoveMenu.tsx

@@ -3,7 +3,7 @@ import { useEditContext } from "../client/editContext";
 import { MoveCopyItemsCommand } from "../commands/itemCommands";
 import { FullItem, ItemDescriptor } from "../pageModel";
 import { ScrollingContentTree } from "../ScrollingContentTree";
-import { Button } from "primereact/button";
+import { Button } from "../../components/ui/button";
 
 export const CopyMoveMenuTemplate = ({
   items,
@@ -85,7 +85,7 @@ export const CopyMoveMenuTemplate = ({
           </div>
           <div className="flex justify-end">
             <Button
-              label={mode === "copy" ? "Copy" : "Move"}
+              size="sm"
               onClick={() => {
                 if (!selectedItem) return;
                 const result = editContext?.executeCommand({
@@ -94,7 +94,9 @@ export const CopyMoveMenuTemplate = ({
                 });
                 commandCallback?.(command, result);
               }}
-            />
+            >
+              {mode === "copy" ? "Copy" : "Move"}
+            </Button>
           </div>
         </div>
       </div>