@sciol/xyzen 0.1.4 → 0.1.6

package/src/components/layouts/components/ChatBubble.tsx

@@ -1,140 +0,0 @@
-import Markdown from "@/lib/Markdown";
-
-import { motion } from "framer-motion";
-import React, { useEffect, useState } from "react";
-
-export interface Message {
-  id: string;
-  sender: string;
-  content: string;
-  timestamp: string;
-  avatar?: string;
-  isCurrentUser?: boolean;
-}
-
-interface ChatBubbleProps {
-  message: Message;
-}
-
-const ChatBubble: React.FC<ChatBubbleProps> = ({ message }) => {
-  const { isCurrentUser, content, timestamp, avatar } = message;
-  const [imageError, setImageError] = useState(false);
-  const [userAvatar, setUserAvatar] = useState<string | undefined>(avatar);
-
-  // 如果是当前用户，从localStorage获取最新的用户头像
-  useEffect(() => {
-    if (isCurrentUser) {
-      try {
-        const userInfoStr = localStorage.getItem("userInfo");
-        if (userInfoStr) {
-          const userInfo = JSON.parse(userInfoStr);
-          if (userInfo.avatar) {
-            setUserAvatar(userInfo.avatar);
-          }
-        }
-      } catch (e) {
-        console.error("Failed to get avatar from localStorage", e);
-      }
-    }
-  }, [isCurrentUser]);
-
-  // Updated time format to include seconds
-  const formattedTime = new Date(timestamp).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-
-  // Different styles for user vs AI messages
-  const messageStyles = isCurrentUser
-    ? "border-l-4 border-blue-400 bg-blue-50/50 dark:border-blue-600 dark:bg-blue-900/20"
-    : "border-l-4 border-neutral-300 bg-white dark:border-neutral-600 dark:bg-neutral-800/50";
-
-  // 获取头像 URL 但避免使用不存在的默认头像文件
-  const getAvatarUrl = (avatarPath?: string) => {
-    if (!avatarPath) return null;
-
-    // 如果已经是完整URL就直接使用
-    if (avatarPath.startsWith("http")) {
-      return avatarPath;
-    }
-
-    // 如果是相对路径，根据环境添加正确的基本URL
-    const baseUrl = process.env.NEXT_PUBLIC_API_URL || "";
-    return avatarPath.startsWith("/")
-      ? `${baseUrl}${avatarPath}`
-      : `${baseUrl}/${avatarPath}`;
-  };
-
-  // 渲染头像，使用初始字母作为最后的备用选项
-  const renderAvatar = () => {
-    // 如果已经知道图像加载失败，或者没有提供头像
-    if (imageError || !userAvatar) {
-      // 显示用户或AI的首字母作为头像
-      const initial = isCurrentUser
-        ? message.sender?.charAt(0)?.toUpperCase() || "U"
-        : "A";
-
-      return (
-        <div
-          className={`flex h-6 w-6 items-center justify-center rounded-full ${
-            isCurrentUser
-              ? "bg-blue-500 text-white"
-              : "bg-purple-500 text-white"
-          }`}
-        >
-          <span className="text-xs font-medium">{initial}</span>
-        </div>
-      );
-    }
-
-    // 尝试加载实际头像
-    const avatarUrl = getAvatarUrl(userAvatar);
-    return (
-      <img
-        src={avatarUrl || ""}
-        alt={isCurrentUser ? "You" : "Assistant"}
-        className="h-6 w-6 rounded-full shadow-sm transition-transform duration-200 group-hover:scale-110"
-        onError={() => setImageError(true)} // 加载失败时设置状态，不再尝试加载图片
-      />
-    );
-  };
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.3, ease: "easeOut" }}
-      className="group relative w-full pl-8"
-    >
-      {/* Timestamp - hidden by default, shown on hover */}
-      <div className="absolute -top-6 left-8 z-10 transform opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-        <span className="rounded px-2 py-1 text-xs text-neutral-500  dark:text-neutral-400">
-          {formattedTime}
-        </span>
-      </div>
-
-      {/* Avatar - positioned to the left */}
-      <div className="absolute left-0 top-1">{renderAvatar()}</div>
-
-      {/* Message content */}
-      <div
-        className={`w-full rounded-none ${messageStyles} transition-all duration-200 hover:shadow-sm`}
-      >
-        <div className="p-3">
-          <div
-            className={`prose prose-neutral dark:prose-invert prose-sm max-w-none ${
-              isCurrentUser
-                ? "text-sm text-neutral-800 dark:text-neutral-200"
-                : "text-sm text-neutral-700 dark:text-neutral-300"
-            }`}
-          >
-            {isCurrentUser ? <p>{content}</p> : <Markdown content={content} />}
-          </div>
-        </div>
-      </div>
-    </motion.div>
-  );
-};
-
-export default ChatBubble;

package/src/components/layouts/components/ChatInput.tsx

@@ -1,173 +0,0 @@
-import {
-  type DragEndEvent,
-  type DragMoveEvent,
-  DndContext,
-  PointerSensor,
-  useDraggable,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import { PaperAirplaneIcon } from "@heroicons/react/24/solid";
-import React, { useEffect, useRef, useState } from "react";
-
-interface ChatInputProps {
-  onSendMessage: (message: string) => void;
-  disabled?: boolean;
-  placeholder?: string;
-  onHeightChange?: (height: number) => void; // New prop to report height changes
-}
-
-// Draggable resize handle component
-const ResizeHandle = () => {
-  const { attributes, listeners, setNodeRef } = useDraggable({
-    id: "resize-handle",
-  });
-
-  return (
-    <div
-      ref={setNodeRef}
-      {...listeners}
-      {...attributes}
-      className="absolute -top-2 left-0 right-0 -mx-2 h-0.5 cursor-ns-resize transition-colors hover:bg-indigo-600"
-      title="拖动调整高度"
-    />
-  );
-};
-
-export const ChatInput: React.FC<ChatInputProps> = ({
-  onSendMessage,
-  disabled = false,
-  placeholder = "输入消息...",
-  onHeightChange,
-}) => {
-  const [inputMessage, setInputMessage] = useState("");
-  const [textareaHeight, setTextareaHeight] = useState(() => {
-    // Try to get saved height from localStorage
-    const savedHeight = localStorage.getItem("chatInputHeight");
-    return savedHeight ? parseInt(savedHeight, 10) : 80; // Default 80px
-  });
-  // 添加一个状态来跟踪输入法的组合状态
-  const [isComposing, setIsComposing] = useState(false);
-
-  // Keep track of initial height when drag starts
-  const initialHeightRef = useRef(textareaHeight);
-  // Keep track of total delta during drag
-  const dragDeltaRef = useRef(0);
-
-  // Setup dnd sensors with lower activation distance for more responsiveness
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 0, // Decreased from 1 to improve responsiveness
-      },
-    }),
-  );
-
-  // Save height to localStorage when it changes and report height changes to parent
-  useEffect(() => {
-    localStorage.setItem("chatInputHeight", textareaHeight.toString());
-    if (onHeightChange) {
-      onHeightChange(textareaHeight);
-    }
-  }, [textareaHeight, onHeightChange]);
-
-  // Handle drag start to set initial height reference
-  const handleDragStart = () => {
-    initialHeightRef.current = textareaHeight;
-    dragDeltaRef.current = 0;
-  };
-
-  // Handle drag move to update height in real-time
-  const handleDragMove = (event: DragMoveEvent) => {
-    const { delta } = event;
-    dragDeltaRef.current = delta.y;
-
-    // Calculate new height based on initial height and total delta
-    const newHeight = Math.max(60, initialHeightRef.current - delta.y);
-    setTextareaHeight(newHeight);
-  };
-
-  // Handle drag end for final cleanup
-  const handleDragEnd = (_: DragEndEvent) => {
-    // Final height adjustment already done during move, just ensure it's saved
-    const finalHeight = Math.max(
-      60,
-      initialHeightRef.current - dragDeltaRef.current,
-    );
-    setTextareaHeight(finalHeight);
-
-    // Reset the refs
-    dragDeltaRef.current = 0;
-  };
-
-  const handleSendMessage = () => {
-    if (!inputMessage.trim()) return;
-    onSendMessage(inputMessage);
-    setInputMessage("");
-  };
-
-  // 处理输入法组合开始事件
-  const handleCompositionStart = () => {
-    setIsComposing(true);
-  };
-
-  // 处理输入法组合结束事件
-  const handleCompositionEnd = () => {
-    setIsComposing(false);
-  };
-
-  // Handle Enter key to send message
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    // 如果是在输入法组合状态中，不处理回车键事件
-    if (e.key === "Enter" && !e.shiftKey && !isComposing) {
-      e.preventDefault();
-      handleSendMessage();
-    }
-  };
-
-  return (
-    <div className="w-full">
-      <DndContext
-        sensors={sensors}
-        onDragStart={handleDragStart}
-        onDragMove={handleDragMove}
-        onDragEnd={handleDragEnd}
-      >
-        <div className="group relative">
-          {/* Drag handle - only visible on hover */}
-          <ResizeHandle />
-
-          <textarea
-            value={inputMessage}
-            onChange={(e) => setInputMessage(e.target.value)}
-            onKeyDown={handleKeyPress}
-            onCompositionStart={handleCompositionStart}
-            onCompositionEnd={handleCompositionEnd}
-            placeholder={placeholder}
-            className="w-full resize-none  bg-white py-2 pl-3 pr-12 text-sm placeholder-neutral-500 focus:outline-none  dark:bg-black dark:text-white dark:placeholder-neutral-400"
-            style={{
-              height: `${textareaHeight}px`,
-              transition: "none", // Remove transition to make height follow mouse exactly
-            }}
-            disabled={disabled}
-          />
-          <button
-            onClick={handleSendMessage}
-            disabled={disabled || !inputMessage.trim()}
-            className="absolute bottom-4 right-2 rounded-md
-             bg-indigo-600 p-1.5 text-white transition-colors
-              hover:bg-indigo-700 disabled:bg-neutral-300 disabled:text-neutral-500 dark:disabled:bg-neutral-700 dark:disabled:text-neutral-400"
-            aria-label="Send message"
-          >
-            <PaperAirplaneIcon className="h-4 w-4" />
-          </button>
-        </div>
-      </DndContext>
-      <p className="mt-0.5 text-xs text-neutral-500">
-        按 Enter 发送，Shift+Enter 换行
-      </p>
-    </div>
-  );
-};
-
-export default ChatInput;

package/src/components/layouts/components/EmptyChat.tsx

@@ -1,117 +0,0 @@
-import { motion } from "framer-motion";
-import React, { useState } from "react";
-
-const EmptyChat: React.FC = () => {
-  const [isCreating] = useState(false);
-
-  // const handleStartNewChat = async () => {
-  //   setIsCreating(true);
-
-  //   try {
-  //     // 使用service中的创建默认频道方法，它会处理UUID生成、连接创建以及视图切换
-  //     await createDefaultChannel();
-  //   } catch (error) {
-  //     console.error('Failed to create chat:', error);
-  //   } finally {
-  //     setTimeout(() => setIsCreating(false), 1000);
-  //   }
-  // };
-
-  return (
-    <div className="flex h-full flex-col items-center justify-center space-y-6 p-4 text-center">
-      <motion.div
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.5 }}
-        className="rounded-full bg-neutral-100 p-4 dark:bg-neutral-800"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-8 w-8 text-neutral-500 dark:text-neutral-400"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
-          />
-        </svg>
-      </motion.div>
-
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.2, duration: 0.5 }}
-      >
-        <h3 className="text-lg font-medium text-neutral-900 dark:text-white">
-          开始一个新对话
-        </h3>
-        <p className="mt-2 max-w-md text-sm text-neutral-600 dark:text-neutral-300">
-          您可以从列表选择一个专业助手，或者直接开始一个自由对话。
-        </p>
-      </motion.div>
-
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.4, duration: 0.5 }}
-        className="flex flex-col space-y-3 sm:flex-row sm:space-x-3 sm:space-y-0"
-      >
-        <button
-          onClick={() => {}}
-          disabled={isCreating}
-          className={`flex items-center justify-center rounded-md ${
-            isCreating
-              ? "bg-indigo-400 dark:bg-indigo-700"
-              : "bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600"
-          } px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`}
-        >
-          {isCreating ? (
-            <>
-              <svg className="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24">
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                  fill="none"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                />
-              </svg>
-              创建中...
-            </>
-          ) : (
-            <>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="mr-2 h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M12 4v16m8-8H4"
-                />
-              </svg>
-              开始新对话
-            </>
-          )}
-        </button>
-      </motion.div>
-    </div>
-  );
-};
-
-export default EmptyChat;

package/src/components/layouts/components/WelcomeMessage.tsx

@@ -1,104 +0,0 @@
-import { motion } from "framer-motion";
-import React from "react";
-
-export interface ChatData {
-  id: string;
-  title: string;
-  assistant?: string; // 助手ID
-  assistant_name?: string; // 助手名称
-  messages_count: number;
-  last_message?: {
-    content: string;
-    timestamp: string;
-  };
-  created_at: string;
-  updated_at: string;
-  is_pinned: boolean;
-}
-
-export interface Assistant {
-  id: string;
-  key?: string; // 助手的唯一标识符
-  title: string;
-  description: string;
-  iconType: string;
-  iconColor: string;
-  category: string;
-  chats?: ChatData[]; // 与该助手的历史对话列表
-}
-
-interface WelcomeMessageProps {
-  assistant?: Assistant | null;
-}
-
-const WelcomeMessage: React.FC<WelcomeMessageProps> = ({ assistant }) => {
-  const iconColor = assistant?.iconColor || "indigo";
-
-  // Fix dynamic class name issue by mapping to pre-defined classes
-  const iconColorMap: Record<string, string> = {
-    blue: "bg-blue-100 dark:bg-blue-900/30",
-    green: "bg-green-100 dark:bg-green-900/30",
-    purple: "bg-purple-100 dark:bg-purple-900/30",
-    amber: "bg-amber-100 dark:bg-amber-900/30",
-    red: "bg-red-100 dark:bg-red-900/30",
-    indigo: "bg-indigo-100 dark:bg-indigo-900/30",
-  };
-
-  const iconTextColorMap: Record<string, string> = {
-    blue: "text-blue-600 dark:text-blue-400",
-    green: "text-green-600 dark:text-green-400",
-    purple: "text-purple-600 dark:text-purple-400",
-    amber: "text-amber-600 dark:text-amber-400",
-    red: "text-red-600 dark:text-red-400",
-    indigo: "text-indigo-600 dark:text-indigo-400",
-  };
-
-  const bgColorClass = iconColorMap[iconColor] || iconColorMap.indigo;
-  const textColorClass = iconTextColorMap[iconColor] || iconTextColorMap.indigo;
-
-  // Determine title and message based on whether an assistant is selected
-  const title = assistant ? `欢迎使用 ${assistant.title}` : "欢迎使用自由对话";
-  const description =
-    assistant?.description ||
-    "您现在可以自由提问任何问题。无需选择特定助手，系统将根据您的问题提供合适的回复。";
-
-  return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.6 }}
-      className="flex flex-col items-center justify-center space-y-4 p-6 text-center"
-    >
-      <div className={`rounded-full ${bgColorClass} p-5`}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className={`h-10 w-10 ${textColorClass}`}
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
-          />
-        </svg>
-      </div>
-      <motion.div
-        initial={{ y: 20, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ delay: 0.2, duration: 0.5 }}
-      >
-        <h3 className="text-lg font-medium text-neutral-900 dark:text-white">
-          {title}
-        </h3>
-        <p className="mt-2 max-w-md text-sm leading-relaxed text-neutral-600 dark:text-neutral-300">
-          {description}
-        </p>
-      </motion.div>
-    </motion.div>
-  );
-};
-
-export default WelcomeMessage;

package/src/configs/index.ts

@@ -1 +0,0 @@
-export const DEFAULT_BACKEND_URL = "http://localhost:8000";

package/src/hooks/useTheme.ts

@@ -1,79 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-type Theme = "light" | "dark" | "system";
-
-const useTheme = () => {
-  const [theme, setTheme] = useState<Theme>("system");
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  const applyTheme = useCallback(
-    (selectedTheme: Theme) => {
-      if (!isClient) return;
-
-      const root = window.document.documentElement;
-      const isDark =
-        selectedTheme === "dark" ||
-        (selectedTheme === "system" &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches);
-
-      // 注入CSS以禁用过渡
-      const style = document.createElement("style");
-      style.innerHTML =
-        "*, *::before, *::after { transition: none !important; }";
-      document.head.appendChild(style);
-
-      root.classList.toggle("dark", isDark);
-      localStorage.setItem("theme", selectedTheme);
-
-      // 在短时间后移除样式，以恢复过渡效果
-      // 这确保了仅在主题切换的瞬间禁用过渡
-      setTimeout(() => {
-        if (document.head.contains(style)) {
-          document.head.removeChild(style);
-        }
-      }, 50);
-    },
-    [isClient],
-  );
-
-  useEffect(() => {
-    if (!isClient) return;
-
-    const savedTheme = localStorage.getItem("theme") as Theme | null;
-    const initialTheme = savedTheme || "system";
-    setTheme(initialTheme);
-    applyTheme(initialTheme);
-  }, [isClient, applyTheme]);
-
-  useEffect(() => {
-    if (!isClient) return;
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      if (theme === "system") {
-        applyTheme("system");
-      }
-    };
-
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [isClient, theme, applyTheme]);
-
-  const cycleTheme = () => {
-    if (!isClient) return;
-
-    const themes: Theme[] = ["light", "dark", "system"];
-    const currentIndex = themes.indexOf(theme);
-    const nextTheme = themes[(currentIndex + 1) % themes.length];
-    setTheme(nextTheme);
-    applyTheme(nextTheme);
-  };
-
-  return { theme, cycleTheme };
-};
-
-export default useTheme;

package/src/index.ts

@@ -1,6 +0,0 @@
-"use client";
-
-export { Xyzen, type XyzenProps } from "@/app/App";
-export { default as useTheme } from "@/hooks/useTheme";
-export { default as xyzenService } from "@/service/xyzenService";
-export { useXyzen } from "@/store/xyzenStore";