xinyu-pro 0.21.0

package/components/MathCurveLoader.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+// ==================== 数学曲线核心逻辑 ====================
+
+/** Original Thinking 曲线配置 */
+const CURVE_CONFIG = {
+  baseRadius: 7,
+  detailAmplitude: 3,
+  petalCount: 7,
+  curveScale: 3.9,
+  particleCount: 64,
+  trailSpan: 0.38,
+  durationMs: 4600,
+  rotationDurationMs: 28000,
+  pulseDurationMs: 4200,
+  strokeWidth: 5.5,
+  rotate: true,
+};
+
+function normalizeProgress(progress: number) {
+  return ((progress % 1) + 1) % 1;
+}
+
+function curvePoint(progress: number, detailScale: number) {
+  const t = progress * Math.PI * 2;
+  const { baseRadius, detailAmplitude, petalCount, curveScale } = CURVE_CONFIG;
+  const x = baseRadius * Math.cos(t) - detailAmplitude * detailScale * Math.cos(petalCount * t);
+  const y = baseRadius * Math.sin(t) - detailAmplitude * detailScale * Math.sin(petalCount * t);
+  return {
+    x: 50 + x * curveScale,
+    y: 50 + y * curveScale,
+  };
+}
+
+function buildPath(detailScale: number, steps = 480) {
+  return Array.from({ length: steps + 1 }, (_, index) => {
+    const point = curvePoint(index / steps, detailScale);
+    return `${index === 0 ? 'M' : 'L'} ${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+  }).join(' ');
+}
+
+function getParticle(index: number, progress: number, detailScale: number) {
+  const tailOffset = index / (CURVE_CONFIG.particleCount - 1);
+  const point = curvePoint(
+    normalizeProgress(progress - tailOffset * CURVE_CONFIG.trailSpan),
+    detailScale,
+  );
+  const fade = Math.pow(1 - tailOffset, 0.56);
+  return {
+    x: point.x,
+    y: point.y,
+    radius: 0.9 + fade * 2.7,
+    opacity: 0.04 + fade * 0.96,
+  };
+}
+
+function getDetailScale(time: number) {
+  const pulseProgress =
+    (time % CURVE_CONFIG.pulseDurationMs) / CURVE_CONFIG.pulseDurationMs;
+  const pulseAngle = pulseProgress * Math.PI * 2;
+  return 0.52 + ((Math.sin(pulseAngle + 0.55) + 1) / 2) * 0.48;
+}
+
+function getRotation(time: number) {
+  if (!CURVE_CONFIG.rotate) return 0;
+  return -((time % CURVE_CONFIG.rotationDurationMs) / CURVE_CONFIG.rotationDurationMs) * 360;
+}
+
+// ==================== React 组件 ====================
+
+interface MathCurveLoaderProps {
+  /** 尺寸，默认 120 */
+  size?: number;
+  /** 轨迹颜色，默认使用 CSS 变量 --color-accent */
+  color?: string;
+  /** 轨迹线宽倍率，默认 1 */
+  strokeWidthScale?: number;
+  /** 自定义 className */
+  className?: string;
+}
+
+export default function MathCurveLoader({
+  size = 120,
+  color,
+  strokeWidthScale = 1,
+  className,
+}: MathCurveLoaderProps) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const groupRef = useRef<SVGGElement>(null);
+  const pathRef = useRef<SVGPathElement>(null);
+  const particlesRef = useRef<SVGCircleElement[]>([]);
+  const rafRef = useRef<number>(0);
+  const startTimeRef = useRef<number>(0);
+
+  useEffect(() => {
+    startTimeRef.current = performance.now();
+
+    const render = (now: number) => {
+      const time = now - startTimeRef.current;
+      const progress =
+        (time % CURVE_CONFIG.durationMs) / CURVE_CONFIG.durationMs;
+      const detailScale = getDetailScale(time);
+      const rotation = getRotation(time);
+
+      // 旋转整个 group
+      if (groupRef.current) {
+        groupRef.current.setAttribute('transform', `rotate(${rotation} 50 50)`);
+      }
+
+      // 更新轨迹路径
+      if (pathRef.current) {
+        pathRef.current.setAttribute('d', buildPath(detailScale));
+      }
+
+      // 更新粒子
+      particlesRef.current.forEach((node, index) => {
+        const particle = getParticle(index, progress, detailScale);
+        node.setAttribute('cx', particle.x.toFixed(2));
+        node.setAttribute('cy', particle.y.toFixed(2));
+        node.setAttribute('r', (particle.radius * strokeWidthScale).toFixed(2));
+        node.setAttribute('opacity', particle.opacity.toFixed(3));
+      });
+
+      rafRef.current = requestAnimationFrame(render);
+    };
+
+    rafRef.current = requestAnimationFrame(render);
+
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [strokeWidthScale]);
+
+  const strokeColor = color || 'var(--color-accent)';
+
+  return (
+    <svg
+      ref={svgRef}
+      viewBox="0 0 100 100"
+      width={size}
+      height={size}
+      className={className}
+      style={{ color: strokeColor }}
+    >
+      <g ref={groupRef}>
+        {/* 轨迹路径 */}
+        <path
+          ref={pathRef}
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.15"
+          style={{ strokeWidth: CURVE_CONFIG.strokeWidth * strokeWidthScale }}
+        />
+        {/* 粒子 */}
+        {Array.from({ length: CURVE_CONFIG.particleCount }, (_, i) => (
+          <circle
+            key={i}
+            ref={(el) => {
+              if (el) particlesRef.current[i] = el;
+            }}
+            fill="currentColor"
+            r="0"
+            opacity="0"
+          />
+        ))}
+      </g>
+    </svg>
+  );
+}

package/components/MessageBubble.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { ChatMessage } from '@/lib/types';
+import { usePluginContext } from '@/components/ui/PluginProvider';
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+}
+
+/** 渲染消息气泡（纯展示，不含插件管道逻辑） */
+function renderBubble(
+  message: ChatMessage,
+  content: React.ReactNode,
+  isUser: boolean,
+  isSystem: boolean,
+  isNotice: boolean,
+): React.ReactNode {
+  // 系统消息样式
+  if (isSystem) {
+    return (
+      <div className="flex justify-center px-4 py-1.5">
+        <div
+          className="px-4 py-2 rounded-xl text-xs text-center max-w-[80%]"
+          style={{
+            backgroundColor: 'var(--color-bg-tertiary)',
+            color: 'var(--color-text-secondary)',
+          }}
+        >
+          {message.content}
+        </div>
+      </div>
+    );
+  }
+
+  // 通知消息：插件自定义 HTML，不发给 AI，持久化到聊天记录
+  if (isNotice) {
+    return (
+      <div className="flex justify-center px-4 py-1.5">
+        <div
+          className="max-w-[80%] px-4 py-2 rounded-xl text-xs text-center"
+          style={{ color: 'var(--color-text-secondary)' }}
+          dangerouslySetInnerHTML={{ __html: message.content }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} px-4 py-1.5`}>
+      <div
+        className="max-w-[80%] sm:max-w-[70%] px-4 py-3 rounded-2xl text-sm leading-relaxed whitespace-pre-wrap"
+        style={{
+          backgroundColor: isUser
+            ? 'var(--color-user-bubble)'
+            : 'var(--color-ai-bubble)',
+          color: isUser ? '#fff' : 'var(--color-text-primary)',
+          borderBottomRightRadius: isUser ? '4px' : undefined,
+          borderBottomLeftRadius: !isUser ? '4px' : undefined,
+          boxShadow: '0 2px 8px var(--color-shadow)',
+        }}
+      >
+        {/* AI 消息显示角色标识 */}
+        {!isUser && (
+          <div
+            className="text-xs font-medium mb-1.5"
+            style={{ color: 'var(--color-accent)' }}
+          >
+            🌍 世界主持人
+          </div>
+        )}
+        {content}
+      </div>
+    </div>
+  );
+}
+
+export function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.role === 'user';
+  const isSystem = message.role === 'system';
+  const isNotice = message.role === 'notice';
+  const pluginCtx = usePluginContext();
+
+  // 异步执行 onRenderMessage 管道（支持 async handler）
+  const [pipelineResult, setPipelineResult] = useState<string | null | undefined>(undefined);
+
+  useEffect(() => {
+    let cancelled = false;
+    pluginCtx.applyRenderMessagePipeline(message).then((result) => {
+      if (!cancelled) setPipelineResult(result);
+    });
+    return () => { cancelled = true; };
+  }, [message, pluginCtx]);
+
+  // 管道尚未完成时，先渲染原始内容
+  if (pipelineResult === undefined) {
+    const safeContent = typeof message.content === 'string' ? message.content : String(message.content);
+    return renderBubble(message, safeContent, isUser, isSystem, isNotice);
+  }
+
+  // 尝试使用插件消息渲染器
+  let renderedContent: React.ReactNode = message.content;
+  let skipRender = false;
+
+  // 管道返回 null 表示跳过渲染
+  if (pipelineResult === null) {
+    skipRender = true;
+  } else {
+    const processedMessage = { ...message, content: pipelineResult };
+
+    for (const renderer of pluginCtx.messageRenderers) {
+        try {
+          if (renderer.matcher(processedMessage)) {
+            const rendered = renderer.renderer(processedMessage);
+            if (rendered === null) {
+              // renderer 返回 null 表示跳过渲染
+              skipRender = true;
+              break;
+            }
+            if (rendered && rendered !== processedMessage.content) {
+              renderedContent = <span dangerouslySetInnerHTML={{ __html: rendered }} />;
+              break;
+            }
+          }
+        } catch (e) {
+          console.error('[MessageBubble] 插件渲染器执行出错:', e);
+        }
+      }
+
+    // 如果 onRenderMessage 管道修改了内容但未触发自定义渲染器，使用修改后的内容
+    if (!skipRender && renderedContent === message.content && processedMessage.content !== message.content) {
+      renderedContent = processedMessage.content;
+    }
+  }
+
+  // 插件标记跳过渲染
+  if (skipRender) {
+    return null;
+  }
+
+  // 确保 renderedContent 是可渲染的 ReactNode
+  const finalContent = typeof renderedContent === 'string'
+    ? renderedContent
+    : (renderedContent ?? String(message.content));
+
+  return renderBubble(message, finalContent, isUser, isSystem, isNotice);
+}

package/components/WorldCardPreview.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React from 'react';
+
+interface WorldCardPreviewProps {
+  setting: Record<string, unknown>;
+}
+
+export function WorldCardPreview({ setting }: WorldCardPreviewProps) {
+  const internalKeys = new Set(['_plugins', '_labels', '_fieldMeta', '_fieldOrder']);
+  const entries = Object.entries(setting).filter(
+    ([key, value]) => !internalKeys.has(key) && value !== null && value !== undefined && value !== ''
+  );
+
+  if (entries.length === 0) {
+    return (
+      <div
+        className="rounded-xl border p-5 w-full max-w-lg mx-auto text-center"
+        style={{
+          backgroundColor: 'var(--color-bg-secondary)',
+          borderColor: 'var(--color-border)',
+          boxShadow: '0 4px 16px var(--color-shadow)',
+        }}
+      >
+        <span style={{ color: 'var(--color-text-muted)', fontSize: '13px' }}>暂无世界设定数据</span>
+      </div>
+    );
+  }
+
+  // 第一个字段作为标题展示
+  const [firstKey, firstValue] = entries[0];
+  const restEntries = entries.slice(1);
+
+  return (
+    <div
+      className="rounded-xl border p-5 w-full max-w-lg mx-auto"
+      style={{
+        backgroundColor: 'var(--color-bg-secondary)',
+        borderColor: 'var(--color-border)',
+        boxShadow: '0 4px 16px var(--color-shadow)',
+      }}
+    >
+      {/* 标题区：第一个字段 */}
+      <div className="mb-4">
+        <h2
+          className="text-xl font-bold"
+          style={{ color: 'var(--color-accent)' }}
+        >
+          {Array.isArray(firstValue) ? firstValue.join('、') : String(firstValue)}
+        </h2>
+        <span
+          className="text-xs px-2 py-0.5 rounded-full"
+          style={{
+            backgroundColor: 'var(--color-bg-tertiary)',
+            color: 'var(--color-text-secondary)',
+          }}
+        >
+          {firstKey}
+        </span>
+      </div>
+
+      {/* 其余字段 */}
+      <div className="space-y-3">
+        {restEntries.map(([key, value]) => (
+          <div key={key}>
+            <label
+              className="text-xs font-medium uppercase tracking-wide"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
+              {key}
+            </label>
+            {Array.isArray(value) && value.length > 0 ? (
+              <div className="flex flex-wrap gap-1.5 mt-1">
+                {value.map((item, i) => (
+                  <span
+                    key={i}
+                    className="text-xs px-2 py-0.5 rounded-full border"
+                    style={{
+                      borderColor: 'var(--color-border)',
+                      color: 'var(--color-text-secondary)',
+                      backgroundColor: 'var(--color-bg-tertiary)',
+                    }}
+                  >
+                    {String(item)}
+                  </span>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm mt-0.5" style={{ color: 'var(--color-text-primary)' }}>
+                {String(value)}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/WorldCardUploader.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+
+interface WorldCardUploaderProps {
+  onFileLoaded: (file: File) => void;
+}
+
+export function WorldCardUploader({ onFileLoaded }: WorldCardUploaderProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFile = async (file: File) => {
+    if (!file.name.endsWith('.svg')) {
+      onFileLoaded(Object.assign(file, { _error: '请上传 SVG 格式的世界卡片文件' }) as File);
+      return;
+    }
+    onFileLoaded(file);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (file) handleFile(file);
+  };
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".svg"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) handleFile(file);
+          e.target.value = '';
+        }}
+      />
+      <button
+        onClick={() => fileInputRef.current?.click()}
+        onDrop={handleDrop}
+        onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+        onDragLeave={() => setIsDragging(false)}
+        className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors"
+        style={{
+          borderColor: isDragging ? 'var(--color-accent)' : 'var(--color-border)',
+          color: 'var(--color-text-primary)',
+          backgroundColor: isDragging ? 'var(--color-bg-tertiary)' : 'var(--color-bg-secondary)',
+        }}
+      >
+        <i className="fa-solid fa-upload" style={{ fontSize: '12px' }} />
+        上传世界卡片
+      </button>
+    </>
+  );
+}

package/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import React, { useEffect, useCallback } from 'react';
+import { useTheme } from './ThemeProvider';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  ignoreText?: string;
+  danger?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  onIgnore?: () => void;
+}
+
+export default function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmText = '确认',
+  cancelText = '取消',
+  ignoreText,
+  danger = false,
+  onConfirm,
+  onCancel,
+  onIgnore,
+}: ConfirmDialogProps) {
+  const { activeTheme } = useTheme();
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!open) return;
+      if (e.key === 'Escape') onCancel();
+      if (e.key === 'Enter') onConfirm();
+    },
+    [open, onCancel, onConfirm]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ animation: 'fadeIn 0.15s ease' }}
+    >
+      {/* 遮罩 */}
+      <div
+        className="absolute inset-0"
+        style={{ backgroundColor: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}
+        onClick={onCancel}
+      />
+      {/* 弹窗 */}
+      <div
+        className="relative w-full max-w-sm rounded-xl border p-6"
+        style={{
+          backgroundColor: 'var(--color-bg-secondary)',
+          borderColor: 'var(--color-border)',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+          animation: 'scaleIn 0.2s ease',
+        }}
+      >
+        {/* 标题 */}
+        <h3
+          className="text-base font-semibold mb-2"
+          style={{ color: 'var(--color-text-primary)' }}
+        >
+          {title}
+        </h3>
+        {/* 内容 */}
+        <p
+          className="text-sm mb-6 leading-relaxed whitespace-pre-line"
+          style={{ color: 'var(--color-text-secondary)' }}
+        >
+          {message}
+        </p>
+        {/* 按钮 */}
+        <div className="flex gap-3 justify-end flex-wrap">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 rounded-lg text-sm font-medium border transition-colors"
+            style={{
+              borderColor: 'var(--color-border)',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            {cancelText}
+          </button>
+          {onIgnore && ignoreText && (
+            <button
+              onClick={onIgnore}
+              className="px-4 py-2 rounded-lg text-sm font-medium border transition-colors"
+              style={{
+                borderColor: 'var(--color-border)',
+                color: 'var(--color-text-muted)',
+              }}
+            >
+              {ignoreText}
+            </button>
+          )}
+          <button
+            onClick={onConfirm}
+            className="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+            style={{
+              backgroundColor: danger
+                ? '#ef4444'
+                : 'var(--color-accent)',
+              color: danger ? '#fff' : activeTheme.isDark ? '#000' : '#fff',
+            }}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes scaleIn {
+          from { opacity: 0; transform: scale(0.95) translateY(8px); }
+          to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}