@amaster.ai/components-templates 1.3.0

package/components/ai-assistant/template/hooks/useDisplayMode.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { IDisplayMode } from "../components/chat-display-mode-switcher";
+
+const getStorageKey = () => `${location.hostname}-ai-assistant-display-mode`;
+
+export const useDisplayMode = (enabled: boolean) => {
+  const STORAGE_KEY = getStorageKey();
+  const [displayMode, setDisplayMode] = useState<IDisplayMode>(
+    (localStorage.getItem(STORAGE_KEY) as IDisplayMode) || "floating",
+  );
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, displayMode);
+
+    const layoutRoot =
+      document.querySelector<HTMLElement>("[data-role='main-layout']") ||
+      document.querySelector<HTMLElement>("#root") ||
+      document.body;
+
+    if (!layoutRoot) return;
+
+    const removeAttr = () => layoutRoot.removeAttribute("data-display-mode");
+
+    removeAttr();
+
+    if (enabled) {
+      if (displayMode === "side-left") {
+        layoutRoot.setAttribute("data-display-mode", "side-left");
+      } else if (displayMode === "side-right") {
+        layoutRoot.setAttribute("data-display-mode", "side-right");
+      }
+    }
+
+    return () => {
+      removeAttr();
+    };
+  }, [displayMode, enabled]);
+
+  const removeStyle = () => {
+    const style = document.getElementById("ai-assistant-display-mode-style");
+    if (style) {
+      document.head.removeChild(style);
+    }
+  };
+
+  useEffect(() => {
+    if (!document.getElementById("ai-assistant-display-mode-style")) {
+      const style = document.createElement("style");
+      style.id = "ai-assistant-display-mode-style";
+      style.innerHTML = `
+      [data-display-mode="side-left"] {
+        padding-left: 420px !important;
+        padding-right: 0 !important;
+      }
+      
+      [data-display-mode="side-right"] {
+        padding-left: 0 !important;
+        padding-right: 420px !important;
+      }
+    `;
+      document.head.appendChild(style);
+    }
+
+    if (!enabled) {
+      removeStyle();
+    }
+
+    return () => {
+      removeStyle();
+    };
+  }, [enabled]);
+
+  return [displayMode, setDisplayMode] as const;
+};

package/components/ai-assistant/template/hooks/useDraggable.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Position } from "../types";
+
+interface UseDraggableProps {
+  isFullscreen: boolean;
+  getActualPosition: () => Position;
+  clampToBounds: (pos: Position) => Position;
+  snapToEdge: (pos: Position) => Position;
+  setPosition: React.Dispatch<React.SetStateAction<Position>>;
+  savePosition: (pos: Position) => void;
+}
+
+export const useDraggable = ({
+  isFullscreen,
+  getActualPosition,
+  clampToBounds,
+  snapToEdge,
+  setPosition,
+  savePosition,
+}: UseDraggableProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const dragRef = useRef<{
+    startX: number;
+    startY: number;
+    startPosX: number;
+    startPosY: number;
+  } | null>(null);
+
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      if (isFullscreen) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const actualPos = getActualPosition();
+      dragRef.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        startPosX: actualPos.x,
+        startPosY: actualPos.y,
+      };
+      setIsDragging(true);
+    },
+    [isFullscreen, getActualPosition],
+  );
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (isFullscreen) return;
+
+      const touch = e.touches[0];
+      if (!touch) return;
+
+      const actualPos = getActualPosition();
+      dragRef.current = {
+        startX: touch.clientX,
+        startY: touch.clientY,
+        startPosX: actualPos.x,
+        startPosY: actualPos.y,
+      };
+      setIsDragging(true);
+    },
+    [isFullscreen, getActualPosition],
+  );
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMove = (clientX: number, clientY: number) => {
+      if (!dragRef.current) return;
+
+      const deltaX = clientX - dragRef.current.startX;
+      const deltaY = clientY - dragRef.current.startY;
+
+      const newX = dragRef.current.startPosX + deltaX;
+      const newY = dragRef.current.startPosY + deltaY;
+
+      setPosition(clampToBounds({ x: newX, y: newY }));
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      handleMove(e.clientX, e.clientY);
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      if (touch) {
+        handleMove(touch.clientX, touch.clientY);
+      }
+    };
+
+    const handleEnd = (event) => {
+      if (dragRef.current) {
+        setPosition((prev) => {
+          const snapped = snapToEdge(
+            prev.x === -1 && prev.y === -1 ? { x: event.x, y: event.y } : prev,
+          );
+          savePosition(snapped);
+          return snapped;
+        });
+      }
+      dragRef.current = null;
+      setIsDragging(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleEnd);
+    document.addEventListener("touchmove", handleTouchMove, { passive: true });
+    document.addEventListener("touchend", handleEnd);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleEnd);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleEnd);
+    };
+  }, [isDragging, snapToEdge, clampToBounds, setPosition, savePosition]);
+
+  return {
+    isDragging,
+    handleDragStart,
+    handleTouchStart,
+  };
+};

package/components/ai-assistant/template/hooks/usePosition.ts

@@ -0,0 +1,206 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Position } from "../types";
+
+const DEFAULT_POSITION: Position = { x: -1, y: -1 };
+const POSITION_STORAGE_KEY = "ai-assistant-position";
+
+const getSavedPosition = (): Position => {
+  try {
+    const saved = localStorage.getItem(POSITION_STORAGE_KEY);
+    if (saved) {
+      const parsed = JSON.parse(saved);
+      if (
+        typeof parsed.x === "number" &&
+        typeof parsed.y === "number" &&
+        parsed.x >= 0 &&
+        parsed.y >= 0 &&
+        parsed.x < window.innerWidth &&
+        parsed.y < window.innerHeight
+      ) {
+        return parsed;
+      }
+    }
+  } catch {
+    // Ignore parsing errors
+  }
+  return DEFAULT_POSITION;
+};
+
+const savePosition = (pos: Position) => {
+  try {
+    localStorage.setItem(POSITION_STORAGE_KEY, JSON.stringify(pos));
+  } catch {
+    // Ignore storage errors
+  }
+};
+
+export const usePosition = (isOpen: boolean, isFullscreen: boolean) => {
+  const [position, setPosition] = useState<Position>(getSavedPosition);
+  // 使用 ref 来跟踪是否已经初始化，避免重复执行
+  const initializedRef = useRef(false);
+  const edgeDistance = 16; // 距离边缘的最小距离
+
+  const getElementDimensions = useCallback(() => {
+    const buttonSize = 56;
+    const dialogWidth = 420;
+    const dialogHeight =
+      window.innerHeight < 600 ? window.innerHeight : window.innerHeight - 200;
+    return {
+      width: isOpen ? dialogWidth : buttonSize,
+      height: isOpen ? dialogHeight : buttonSize,
+    };
+  }, [isOpen]);
+
+  const getActualPosition = useCallback((): Position => {
+    if (position.x < 0 || position.y < 0) {
+      return {
+        x: window.innerWidth - edgeDistance,
+        y: window.innerHeight - edgeDistance,
+      };
+    }
+    return position;
+  }, [position]);
+
+  const clampToBounds = useCallback(
+    (pos: Position): Position => {
+      const margin = edgeDistance;
+      const { width, height } = getElementDimensions();
+
+      const minX = width + margin;
+      const minY = height + margin;
+      const maxX = window.innerWidth - margin;
+      const maxY = window.innerHeight - margin;
+
+      return {
+        x: Math.max(minX, Math.min(pos.x, maxX)),
+        y: Math.max(minY, Math.min(pos.y, maxY)),
+      };
+    },
+    [getElementDimensions],
+  );
+
+  const snapToEdge = useCallback(
+    (pos: Position): Position => {
+      const { width, height } = getElementDimensions();
+
+      const minX = width + edgeDistance;
+      const minY = height + edgeDistance;
+      const maxX = window.innerWidth - edgeDistance;
+      const maxY = window.innerHeight - edgeDistance;
+      const snapDistance = edgeDistance;
+
+      let newX = Math.max(minX, Math.min(pos.x, maxX));
+      let newY = Math.max(minY, Math.min(pos.y, maxY));
+
+      const leftEdge = newX - width;
+      const distToLeft = leftEdge - edgeDistance;
+      const distToRight = maxX - newX;
+
+      if (distToLeft < distToRight && distToLeft < snapDistance) {
+        newX = width + edgeDistance;
+      } else if (distToRight < snapDistance) {
+        newX = maxX;
+      }
+
+      const topEdge = newY - height;
+      const distToTop = topEdge - edgeDistance;
+      const distToBottom = maxY - newY;
+
+      if (distToTop < distToBottom && distToTop < snapDistance) {
+        newY = height + edgeDistance;
+      } else if (distToBottom < snapDistance) {
+        newY = maxY;
+      }
+
+      return { x: newX, y: newY };
+    },
+    [getElementDimensions],
+  );
+
+  const getPositionStyles = useCallback((): React.CSSProperties => {
+    if (isFullscreen) {
+      return {};
+    }
+
+    const actualPos = getActualPosition();
+    const { width, height } = getElementDimensions();
+
+    const rightPx = window.innerWidth - actualPos.x;
+    const bottomPx = window.innerHeight - actualPos.y;
+
+    return {
+      position: "fixed",
+      right: Math.max(
+        0,
+        Math.min(rightPx, window.innerWidth - width - edgeDistance),
+      ),
+      bottom: Math.max(
+        0,
+        Math.min(bottomPx, window.innerHeight - height - edgeDistance),
+      ),
+      width,
+      height,
+      left: "auto",
+      top: "auto",
+    };
+  }, [isFullscreen, getActualPosition, getElementDimensions]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setPosition((prev) => {
+        if (prev.x < 0 || prev.y < 0) return prev;
+        return clampToBounds(prev);
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [clampToBounds]);
+
+  // 修复：只在 isOpen 状态改变时检查边界，避免无限循环
+  useEffect(() => {
+    if (position.x < 0 || position.y < 0) {
+      initializedRef.current = true;
+      return;
+    }
+
+    // 只在状态变化时执行一次
+    if (!initializedRef.current) {
+      const clamped = clampToBounds(position);
+      if (clamped.x !== position.x || clamped.y !== position.y) {
+        setPosition(clamped);
+        savePosition(clamped);
+      }
+      initializedRef.current = true;
+    }
+  }, [isOpen, clampToBounds]); // 移除 position 依赖，避免循环
+
+  const setPositionTo = useCallback(
+    (x: "left" | "right", y: "top" | "bottom") => {
+      const { width, height } = getElementDimensions();
+      const newPos: Position = {
+        x:
+          x === "left"
+            ? width + edgeDistance
+            : window.innerWidth - edgeDistance,
+        y:
+          y === "top"
+            ? height + edgeDistance
+            : window.innerHeight - 200,
+      };
+      setPosition(newPos);
+      savePosition(newPos);
+    },
+    [],
+  );
+  return {
+    position,
+    setPosition,
+    getActualPosition,
+    setPositionTo,
+    clampToBounds,
+    snapToEdge,
+    getPositionStyles,
+    savePosition,
+  };
+};

package/components/ai-assistant/template/hooks/useSpeak.ts

@@ -0,0 +1,50 @@
+import { client } from "@/lib/client";
+import type { TTSClient } from "@amaster.ai/client";
+import { useState } from "react";
+
+let globalTTSClient: TTSClient | null = null;
+let globalVoice: string = "Cherry";
+
+const createTTSClient = async (): Promise<TTSClient> => {
+  const ttsClient = client.tts({
+    voice: globalVoice,
+    autoPlay: true,
+    audioFormat: "pcm",
+    sampleRate: 24000
+  });
+
+  await ttsClient.connect();
+  globalTTSClient = ttsClient;
+  return ttsClient;
+};
+
+const stopTTS = () => {
+  if (globalTTSClient) {
+    globalTTSClient.stop();
+  }
+};
+
+export const useSpeak = () => {
+  const [speaking, setSpeaking] = useState(false);
+
+  const speak = async (text: string) => {
+    if (!text) return;
+    stopTTS();
+    setSpeaking(true);
+    if (!globalTTSClient) {
+      globalTTSClient = await createTTSClient();
+    }
+    globalTTSClient.speak(text);
+  };
+
+  const stop = () => {
+    stopTTS();
+    setSpeaking(false);
+  };
+
+  return {
+    speak,
+    stop,
+    speaking,
+  };
+};

package/components/ai-assistant/template/hooks/useVoiceInput.ts

@@ -0,0 +1,172 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { getText } from "../i18n";
+import { client } from "@/lib/client";
+import { ASRClient } from "@amaster.ai/client";
+import { toast } from "@/hooks/use-toast";
+
+type Status =
+  | "idle"
+  | "starting"
+  | "ready"
+  | "speaking"
+  | "recording"
+  | "stopping"
+  | "ended"
+  | "error"
+  | "closed";
+
+export const useVoiceInput = ({
+  onChange,
+  value = "",
+  disabled,
+}: {
+  onChange: (value: string) => void;
+  value?: string;
+  disabled?: boolean;
+}) => {
+  const [status, setStatus] = useState<Status>("idle");
+  const [waitingEnd, setWaitingEnd] = useState(false);
+  const waitingEndTimer = useRef<NodeJS.Timeout | null>(null);
+  const AsrClientRef = useRef<ASRClient | null>(null);
+  const runningRef = useRef(false);
+  const stoppable = useMemo(() => {
+    return ["ready", "speaking", "recording"].includes(status);
+  }, [status]);
+  const disabledClick = useMemo(() => {
+    return ["starting", "ended", "closed", "error", "stopping"].includes(
+      status,
+    );
+  }, [status]);
+  const running = useMemo(() => {
+    return status !== "idle";
+  }, [status]);
+
+  const start = async () => {
+    if (runningRef.current) {
+      return;
+    }
+
+    let result = value || "";
+    let temp = "";
+
+    const asrClient = client.asr({
+      onReady() {
+        setStatus("ready");
+      },
+      onSpeechStart() {
+        setStatus((status) => (status !== "stopping" ? "recording" : status));
+      },
+
+      onSpeechEnd() {
+        setStatus((status) => (status !== "stopping" ? "recording" : status));
+      },
+      onTranscript(text, isFinal) {
+        if (!isFinal) {
+          temp = text;
+          onChange(result + temp);
+        } else {
+          temp = "";
+          result += text;
+          onChange(result);
+        }
+      },
+      onSessionFinished() {
+        setStatus("ended");
+      },
+      onError() {
+        reset();
+      },
+      onClose() {
+        setStatus((status) => (status !== "closed" ? "closed" : status));
+      },
+    });
+
+    setStatus("starting");
+
+    try {
+      await asrClient.connect();
+      await asrClient.startRecording();
+      AsrClientRef.current = asrClient;
+    } catch (error) {
+      const message = error.message;
+      const showError = (title: string) => toast({title})
+      if (message.includes("Microphone access denied")) {
+        showError(getText().voiceInputError.microphoneAccessDenied);
+      } else if (message.includes("No speech detected")) {
+        showError(getText().voiceInputError.noSpeechDetected);
+      } else if (message.includes("Network error")) {
+        showError(getText().voiceInputError.networkError);
+      } else if (message.includes("Unsupported browser")) {
+        showError(getText().voiceInputError.unknownError);
+      } else if (message.includes("Permission denied")) {
+        showError(getText().voiceInputError.permissionDenied);
+      } else {
+        console.error(error);
+        showError(getText().voiceInputError.unknownError);
+      }
+      reset();
+    }
+  };
+
+  const stop = () => {
+    setStatus("stopping");
+    AsrClientRef.current?.stopRecording();
+    AsrClientRef.current?.close();
+    waitClose();
+  };
+
+  const reset = () => {
+    AsrClientRef.current = null;
+    waitingEndTimer.current && clearTimeout(waitingEndTimer.current);
+    setWaitingEnd(false);
+    setStatus("idle");
+  };
+
+  const waitClose = () => {
+    setWaitingEnd(true);
+    waitingEndTimer.current && clearTimeout(waitingEndTimer.current);
+    waitingEndTimer.current = setTimeout(() => {
+      setStatus("closed");
+    }, 3000);
+  };
+
+  useEffect(() => {
+    return () => {
+      stop();
+      reset();
+    };
+  }, []);
+
+  useEffect(() => {
+    runningRef.current = running;
+  }, [running]);
+
+  useEffect(() => {
+    if (status === "closed") {
+      reset();
+    }
+  }, [status]);
+
+  const statusTextMap = {
+    // idle: t('translation:voiceInputStatus.idle'),
+    idle: "",
+    starting: getText().voiceInputStatus.starting,
+    ready: getText().voiceInputStatus.ready,
+    speaking: getText().voiceInputStatus.speaking,
+    recording: getText().voiceInputStatus.recording,
+    stopping: getText().voiceInputStatus.stopping,
+    ended: getText().voiceInputStatus.ended,
+    error: getText().voiceInputStatus.error,
+    closed: getText().voiceInputStatus.closed,
+  };
+
+  return {
+    running,
+    stoppable,
+    disabled: disabled || waitingEnd || disabledClick,
+    start,
+    stop,
+    status,
+    statusText: statusTextMap[status],
+  };
+};