@amaster.ai/components-templates 1.5.0 → 1.6.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,156 @@
+// 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
+  // 如果需要代码高亮，可以在这里加 highlight 函数
+})
+
+function renderToken(token: any, key: string): JSX.Element | null {
+  const children = token.children
+    ? token.children.map((t: any, i: number) => renderToken(t, `${key}-child-${i}`))
+    : null
+
+  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'
+
+      return (
+        <View key={key} className={hClasses}>
+          {children}
+        </View>
+      )
+    }
+
+    // 段落
+    case 'paragraph_open':
+      return (
+        <View key={key} className="mb-1 leading-relaxed text-base">
+          {children}
+        </View>
+      )
+
+    // 文本节点
+    case 'text':
+    case 'softbreak':
+    case 'hardbreak':
+      return <Text key={key}>{token.content}</Text>
+
+    // 粗体
+    case 'strong_open':
+      return (
+        <Text key={key} className="font-bold text-gray-900 dark:text-gray-100">
+          {children}
+        </Text>
+      )
+
+    // 斜体
+    case 'em_open':
+      return (
+        <Text key={key} className="italic text-gray-700 dark:text-gray-300">
+          {children}
+        </Text>
+      )
+
+    // 行内代码
+    case 'code_inline':
+      return (
+        <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>
+      )
+
+    // 代码块
+    case 'fence': {
+      const lang = token.info ? token.info.trim() : ''
+      return (
+        <View
+          key={key}
+          className="my-2 bg-gray-900 text-gray-200 p-6 rounded-xl overflow-x-auto shadow-lg font-mono text-sm leading-6">
+          <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>
+      )
+    }
+
+    // 图片
+    case 'image': {
+      const src = token.attrs?.find((a: string[]) => a[0] === 'src')?.[1] || ''
+      return (
+        <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]})}
+        />
+      )
+    }
+
+    // 链接
+    case 'link_open': {
+      const href = token.attrs?.find((a: string[]) => a[0] === 'href')?.[1] || ''
+      return (
+        <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>
+      )
+    }
+
+    // 关闭标签（我们通常不渲染 closing token 的内容，因为 children 已处理）
+    case 'heading_close':
+    case 'paragraph_close':
+    case 'strong_close':
+    case 'em_close':
+    case 'link_close':
+      return null
+
+    // 其他未处理的 token，直接渲染 children（兜底）
+    default:
+      return children ? <View key={key}>{children}</View> : null
+  }
+}
+
+interface MarkdownLiteProps {
+  content: string
+  className?: string
+}
+
+const MarkdownLite = memo(({content, className}: MarkdownLiteProps) => {
+  const tokens = useMemo(() => {
+    if (!content) return []
+    return md.parse(content, {})
+  }, [content])
+
+  return <View className={`text-lg ${className}`}>{tokens.map((token, i) => renderToken(token, `root-${i}`))}</View>
+})
+
+export default MarkdownLite