@amaster.ai/components-templates 1.5.0 → 1.8.0

package/components/ai-assistant-taro/template/components/VoiceInput.tsx

@@ -0,0 +1,169 @@
+import { Text, View } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import type React from "react";
+import { useCallback, useRef, useState } from "react";
+import { useVoiceInput, type VoiceInputStatus } from "../hooks/useVoiceInput";
+import { useAiAssistantI18n } from "../i18n";
+
+interface VoiceInputProps {
+  onResult: (text: string) => void;
+  onError?: (error: string) => void;
+  disabled?: boolean;
+}
+
+const getStatusIcon = (status: VoiceInputStatus): string => {
+  switch (status) {
+    case "recording":
+      return "i-lucide-mic";
+    case "recognizing":
+      return "i-lucide-brain";
+    default:
+      return "i-lucide-mic";
+  }
+};
+
+const getStatusColor = (status: VoiceInputStatus): string => {
+  switch (status) {
+    case "recording":
+      return "bg-red-500";
+    case "recognizing":
+      return "bg-blue-500";
+    default:
+      return "bg-gray-500";
+  }
+};
+
+export const VoiceInput: React.FC<VoiceInputProps> = ({
+  onResult,
+  disabled = false,
+}) => {
+  const [showOverlay, setShowOverlay] = useState(false);
+  const shouldStopRef = useRef(false);
+  const { t } = useAiAssistantI18n();
+
+  const getStatusText = (status: VoiceInputStatus): string => {
+    switch (status) {
+      case "recording":
+        return t.VoiceInputStatus.recording;
+      case "recognizing":
+        return t.VoiceInputStatus.recognizing;
+      default:
+        return "";
+    }
+  };
+
+  const handleStatusChange = useCallback((newStatus: VoiceInputStatus) => {
+    if (newStatus === "idle") {
+      setShowOverlay(false);
+      // setTimeout(() => {
+      // }, 500);
+    }
+  }, []);
+
+  const handleResult = useCallback(
+    (text: string) => {
+      if (text) {
+        onResult(text);
+      }
+    },
+    [onResult],
+  );
+
+  const { status, startRecording, stopRecording } = useVoiceInput({
+    onResult: handleResult,
+    onError: (error) => {
+      let errorType = error;
+      if (error.includes("deny")) {
+        errorType = "MIC_PERMISSION_DENIED";
+      }
+      Taro.showToast({
+        title: t.voiceInputError[errorType] || error,
+        icon: "none",
+      });
+    },
+    onStatusChange: handleStatusChange,
+  });
+
+  const handleTouchStart = () => {
+    if (disabled) return;
+    shouldStopRef.current = false;
+    setShowOverlay(true);
+    startRecording();
+  };
+
+  const handleTouchEnd = () => {
+    shouldStopRef.current = true;
+    stopRecording();
+  };
+
+  return (
+    <>
+      {showOverlay && (
+        <View
+          className="fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-[9999] flex items-center justify-center"
+          style={{ backgroundColor: "rgba(0, 0, 0, 0.6)" }}
+          catchMove
+        >
+          <View className="flex flex-col items-center gap-6 px-20 py-10 bg-black/80 rounded-3xl shadow-2xl relative">
+            <View
+              className={`size-20 rounded-full ${getStatusColor(status)} flex items-center justify-center shadow-lg ${status === "recording" ? "animate-pulse" : ""}`}
+            >
+              <View
+                className={`text-white text-5xl ${getStatusIcon(status)}`}
+              />
+            </View>
+
+            <Text className="text-white text-center text-xl font-medium whitespace-pre-line leading-relaxed">
+              {getStatusText(status)}
+            </Text>
+
+            {(status === "recording" || status === "idle") && (
+              <View className="flex items-center gap-2 mt-2">
+                <View className="w-2 h-2 bg-red-400 rounded-full animate-pulse" />
+                <View
+                  className="w-2 h-2 bg-red-400 rounded-full animate-pulse"
+                  style={{ animationDelay: "150ms" }}
+                />
+                <View
+                  className="w-2 h-2 bg-red-400 rounded-full animate-pulse"
+                  style={{ animationDelay: "300ms" }}
+                />
+              </View>
+            )}
+
+            {/* 点击结束 */}
+            <View
+              className="w-6 h-6 i-lucide-x text-white rounded-full bg-gray-500 absolute top-2 right-2"
+              onClick={() => {
+                stopRecording();
+              }}
+            />
+          </View>
+        </View>
+      )}
+
+      <View
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onTouchCancel={handleTouchEnd}
+        onLongPress={handleTouchStart}
+        className={`flex items-center justify-center gap-1.5 px-4 py-2 bg-danger rounded-xl active:opacity-80 transition-all duration-200 shadow-sm ${
+          disabled
+            ? "bg-gray-200 opacity-50"
+            : status !== "idle"
+              ? "bg-red-500 shadow-md"
+              : "bg-gradient-to-r from-primary to-primary/80 active:opacity-80 shadow-md"
+        }`}
+        hoverClass={disabled ? "" : "opacity-90"}
+      >
+        <View
+          className={`i-lucide-mic text-lg ${
+            disabled ? "text-gray-400" : "text-white"
+          }`}
+        />
+      </View>
+    </>
+  );
+};
+
+export default VoiceInput;

package/components/ai-assistant-taro/template/components/markdown.tsx

@@ -0,0 +1,362 @@
+// components/MarkdownLite.tsx
+
+import { Image, Text, View } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import MarkdownIt from "markdown-it";
+import { memo, useMemo } from "react";
+
+const md = new MarkdownIt({
+  html: true,
+  breaks: true,
+  linkify: true,
+});
+
+function buildTokenPairs(tokens: any[]): Map<number, number> {
+  const pairs = new Map<number, number>();
+  const stack: number[] = [];
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token.nesting === 1) {
+      stack.push(i);
+    } else if (token.nesting === -1) {
+      const openIndex = stack.pop();
+      if (openIndex !== undefined) {
+        pairs.set(openIndex, i);
+      }
+    }
+  }
+
+  return pairs;
+}
+
+interface RenderResult {
+  elements: JSX.Element[];
+  nextIndex: number;
+}
+
+function renderTokens(
+  tokens: any[],
+  pairs: Map<number, number>,
+  startIndex: number,
+  endIndex: number,
+  keyPrefix: string,
+  listContext?: { isOrdered: boolean; start: number },
+): RenderResult {
+  const elements: JSX.Element[] = [];
+  let i = startIndex;
+
+  while (i < endIndex) {
+    const token = tokens[i];
+    const key = `${keyPrefix}-${i}`;
+
+    switch (token.type) {
+      case "heading_open": {
+        const level = token.markup.length;
+        const hClasses =
+          {
+            1: "text-4xl font-bold mt-4 mb-4 border-b border-gray-200 dark:border-gray-700",
+            2: "text-3xl font-bold mt-3 mb-3 border-l-4 border-blue-500",
+            3: "text-2xl font-bold mt-2 mb-2",
+            4: "text-xl font-bold mt-1 mb-1",
+            5: "text-lg font-bold",
+            6: "text-base font-bold",
+          }[level] || "text-lg font-bold mt-2 mb-2";
+
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+        );
+        elements.push(
+          <View key={key} className={hClasses}>
+            {children}
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "paragraph_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+        elements.push(
+          <View key={key} className="mb-1 leading-relaxed text-base">
+            {children}
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "bullet_list_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          { isOrdered: false, start: 1 },
+        );
+        elements.push(
+          <View key={key} className="my-2 pl-2">
+            {children}
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "ordered_list_open": {
+        const start = token.attrGet?.("start") || 1;
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          { isOrdered: true, start },
+        );
+        elements.push(
+          <View key={key} className="my-2 pl-2">
+            {children}
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "list_item_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        let itemIndex = 0;
+        for (let j = startIndex; j < i; j++) {
+          if (
+            tokens[j].type === "list_item_open" &&
+            tokens[j].level === token.level
+          ) {
+            itemIndex++;
+          }
+        }
+        const itemNumber = (listContext?.start || 1) + itemIndex;
+
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+
+        elements.push(
+          <View key={key} className="flex flex-row items-start mb-1">
+            <Text className="mr-2 text-gray-700 dark:text-gray-300 w-5 text-right shrink-0">
+              {listContext?.isOrdered ? `${itemNumber}.` : "•"}
+            </Text>
+            <View className="flex-1 overflow-hidden">{children}</View>
+          </View>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "strong_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+        elements.push(
+          <Text
+            key={key}
+            className="font-bold text-gray-900 dark:text-gray-100"
+          >
+            {children}
+          </Text>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "em_open": {
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+        elements.push(
+          <Text key={key} className="italic text-gray-700 dark:text-gray-300">
+            {children}
+          </Text>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "link_open": {
+        const href =
+          token.attrs?.find((a: string[]) => a[0] === "href")?.[1] || "";
+        const closeIndex = pairs.get(i) ?? tokens.length;
+        const { elements: children } = renderTokens(
+          tokens,
+          pairs,
+          i + 1,
+          closeIndex,
+          key,
+          listContext,
+        );
+        elements.push(
+          <Text
+            key={key}
+            className="text-blue-600 dark:text-blue-400 no-underline hover:underline cursor-pointer"
+            onClick={() => {
+              if (href) {
+                Taro.setClipboardData({ data: href }).then(() =>
+                  Taro.showToast({ title: "链接已复制", icon: "none" }),
+                );
+              }
+            }}
+          >
+            {children}
+          </Text>,
+        );
+        i = closeIndex + 1;
+        break;
+      }
+
+      case "code_inline":
+        elements.push(
+          <Text
+            key={key}
+            className="font-mono text-red-600 dark:text-red-400 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded"
+          >
+            {token.content}
+          </Text>,
+        );
+        i++;
+        break;
+
+      case "fence": {
+        const lang = token.info ? token.info.trim() : "";
+        elements.push(
+          <View
+            key={key}
+            className="my-2 bg-gray-900 text-gray-200 p-4 rounded-xl overflow-x-auto shadow-lg font-mono text-sm leading-6 relative"
+          >
+            <Text className="whitespace-pre">{token.content.trim()}</Text>
+            {lang && (
+              <View className="absolute top-2 right-3 text-xs text-gray-500 bg-gray-800 px-2 py-1 rounded">
+                {lang}
+              </View>
+            )}
+          </View>,
+        );
+        i++;
+        break;
+      }
+
+      case "image": {
+        const src =
+          token.attrs?.find((a: string[]) => a[0] === "src")?.[1] || "";
+        elements.push(
+          <Image
+            key={key}
+            src={src}
+            mode="widthFix"
+            lazyLoad
+            className="rounded-xl shadow-md my-2 max-w-full inline-block"
+            onClick={() => src && Taro.previewImage({ urls: [src] })}
+          />,
+        );
+        i++;
+        break;
+      }
+
+      case "text":
+        elements.push(<Text key={key}>{token.content}</Text>);
+        i++;
+        break;
+
+      case "softbreak":
+      case "hardbreak":
+        elements.push(<Text key={key}> </Text>);
+        i++;
+        break;
+
+      case "heading_close":
+      case "paragraph_close":
+      case "strong_close":
+      case "em_close":
+      case "link_close":
+      case "bullet_list_close":
+      case "ordered_list_close":
+      case "list_item_close":
+        // 这些由对应的 open 处理，直接跳过
+        i++;
+        break;
+
+      default:
+        if (token.children && token.children.length > 0) {
+          const childPairs = buildTokenPairs(token.children);
+          const { elements: childElements } = renderTokens(
+            token.children,
+            childPairs,
+            0,
+            token.children.length,
+            key,
+            listContext,
+          );
+          elements.push(<Text key={key}>{childElements}</Text>);
+        }
+        i++;
+        break;
+    }
+  }
+
+  return { elements, nextIndex: i };
+}
+
+interface MarkdownLiteProps {
+  content: string;
+  className?: string;
+}
+
+const MarkdownLite = memo(({ content, className }: MarkdownLiteProps) => {
+  const elements = useMemo(() => {
+    if (!content) return [];
+    const tokens = md.parse(content, {});
+    const pairs = buildTokenPairs(tokens);
+    const { elements: rendered } = renderTokens(
+      tokens,
+      pairs,
+      0,
+      tokens.length,
+      "root",
+    );
+    return rendered;
+  }, [content]);
+
+  return <View className={`text-lg ${className || ""}`}>{elements}</View>;
+});
+
+export default MarkdownLite;