@sciol/xyzen 0.1.3 → 0.1.4

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,104 @@
+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

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

package/src/hooks/useTheme.ts

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,6 @@
+"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";

package/src/lib/Markdown.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import rehypeHighlight from "rehype-highlight";
+import rehypeKatex from "rehype-katex";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+
+import "katex/dist/katex.css";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface MarkdownProps {
+  content: string;
+}
+
+const Markdown: React.FC<MarkdownProps> = function Markdown(props) {
+  const { content = "" } = props;
+  const [copiedCode, setCopiedCode] = useState<string | null>(null);
+
+  const copyToClipboard = (code: string) => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopiedCode(code);
+      setTimeout(() => {
+        setCopiedCode(null);
+      }, 2000);
+    });
+  };
+
+  const MarkdownComponents = {
+    code({
+      inline,
+      className,
+      children,
+      ...props
+    }: React.ComponentPropsWithoutRef<"code"> & { inline?: boolean }) {
+      const match = /language-(\w+)/.exec(className || "");
+      const code = String(children).replace(/\n$/, "");
+
+      return !inline && match ? (
+        <div style={{ position: "relative" }}>
+          <button
+            onClick={() => copyToClipboard(code)}
+            style={{
+              position: "absolute",
+              top: "5px",
+              right: "5px",
+              padding: "4px 8px",
+              backgroundColor: "#282c34",
+              color: "white",
+              border: "1px solid #444",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "12px",
+              zIndex: 2,
+              opacity: 0.8,
+              transition: "opacity 0.2s",
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.opacity = "1";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.opacity = "0.8";
+            }}
+          >
+            {copiedCode === code ? (
+              <span className=" text-green-400">Copied!</span>
+            ) : (
+              "Copy"
+            )}
+          </button>
+          <SyntaxHighlighter style={oneDark} language={match[1]} PreTag="div">
+            {code}
+          </SyntaxHighlighter>
+        </div>
+      ) : (
+        <code className={className} {...props}>
+          {children}
+        </code>
+      );
+    },
+  };
+  return (
+    <ReactMarkdown
+      components={MarkdownComponents}
+      remarkPlugins={[remarkMath, remarkGfm]}
+      rehypePlugins={[
+        rehypeKatex,
+        rehypeRaw,
+        [rehypeHighlight, { ignoreMissing: true }],
+      ]}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+};
+
+export default Markdown;

package/src/lib/formatDate.ts

@@ -0,0 +1,32 @@
+import { format, formatDistanceToNow, isToday, isYesterday } from "date-fns";
+import { zhCN } from "date-fns/locale";
+
+export function formatTime(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+
+  // 使用 formatDistanceToNow 显示相对时间，并添加中文支持
+  // addSuffix: true 会添加 "前" 或 "后"
+  const relativeTime = formatDistanceToNow(date, {
+    addSuffix: true,
+    locale: zhCN,
+  });
+
+  // 如果是一天内，直接返回相对时间，例如 "约5小时前"
+  if (now.getTime() - date.getTime() < 24 * 60 * 60 * 1000) {
+    return relativeTime;
+  }
+
+  // 如果是昨天
+  if (isYesterday(date)) {
+    return `昨天 ${format(date, "HH:mm")}`;
+  }
+
+  // 如果是今天（理论上被前一个if覆盖，但作为保险）
+  if (isToday(date)) {
+    return format(date, "HH:mm");
+  }
+
+  // 如果是更早的时间，显示具体日期
+  return format(date, "yyyy-MM-dd");
+}

package/src/main.tsx

@@ -0,0 +1,9 @@
+import { Xyzen } from "@/app/App";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <Xyzen />
+  </StrictMode>,
+);

package/src/service/xyzenService.ts

@@ -0,0 +1,90 @@
+import { type Message } from "@/store/xyzenStore";
+
+interface StatusChangePayload {
+  connected: boolean;
+  error: string | null;
+}
+
+type ServiceCallback<T> = (payload: T) => void;
+
+class XyzenService {
+  private ws: WebSocket | null = null;
+  private onMessageCallback: ServiceCallback<Message> | null = null;
+  private onStatusChangeCallback: ServiceCallback<StatusChangePayload> | null =
+    null;
+  private backendUrl = "";
+
+  public setBackendUrl(url: string) {
+    this.backendUrl = url;
+  }
+
+  public connect(
+    sessionId: string,
+    topicId: string,
+    onMessage: ServiceCallback<Message>,
+    onStatusChange: ServiceCallback<StatusChangePayload>,
+  ) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      console.log("WebSocket is already connected.");
+      return;
+    }
+
+    this.onMessageCallback = onMessage;
+    this.onStatusChangeCallback = onStatusChange;
+
+    const wsUrl = `${this.backendUrl.replace(
+      /^http(s?):\/\//,
+      "ws$1://",
+    )}/ws/v1/chat/sessions/${sessionId}/topics/${topicId}`;
+    this.ws = new WebSocket(wsUrl);
+
+    this.ws.onopen = () => {
+      console.log("XyzenService: WebSocket connected");
+      this.onStatusChangeCallback?.({ connected: true, error: null });
+    };
+
+    this.ws.onmessage = (event) => {
+      try {
+        const messageData = JSON.parse(event.data);
+        this.onMessageCallback?.(messageData);
+      } catch (error) {
+        console.error("XyzenService: Failed to parse message data:", error);
+      }
+    };
+
+    this.ws.onclose = () => {
+      console.log("XyzenService: WebSocket disconnected");
+      this.onStatusChangeCallback?.({
+        connected: false,
+        error: "Connection closed.",
+      });
+    };
+
+    this.ws.onerror = (error) => {
+      console.error("XyzenService: WebSocket error:", error);
+      this.onStatusChangeCallback?.({
+        connected: false,
+        error: "A connection error occurred.",
+      });
+    };
+  }
+
+  public sendMessage(message: string) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify({ message }));
+    } else {
+      console.error("XyzenService: WebSocket is not connected.");
+    }
+  }
+
+  public disconnect() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+}
+
+// Export a singleton instance of the service
+const xyzenService = new XyzenService();
+export default xyzenService;