@mxmweb/aichat 1.1.7 → 1.1.8

package/src/components/AiChat.types.tsx

@@ -0,0 +1,110 @@
+
+
+
+export interface RetrieveTestProps {
+  messages?: Message[];
+  onSearch?: (query: string, config: any) => void;
+  setKbInfo?: any;
+}
+
+export interface FilePreview {
+  file: File;
+  preview?: string;
+  type: "image" | "document";
+}
+
+export interface FormItemProps {
+  type: 'input' | 'select' | 'number' | 'slider' | 'switch' | 'date' | 'radio' | 'textarea' | 'divider';
+  label: string;
+  description?: string;
+  control?: string[];
+  controlledItems?: string[];
+  name: string;
+  defaultValue?: any;
+  options?: { label: string; value: string }[];
+  range?: { min: number; max: number };
+  step?: number;
+  unit?: string;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+}
+
+export interface BaseChatMessage {
+  id?:string;
+  type: "user" | "ai";
+  time: string;
+  content: any;
+  [key: string]: any;
+}
+
+export interface ChatMessageProps {
+  type: "user" | "ai";
+  time: string;
+  content: any;
+  id?:string;
+  hasLLMConfig?: boolean;
+  retrievedChunks?: Array<{ [key: string]: any }>;
+  prompt?: string;
+  configInfo?: {
+    textChunks: number;
+    topP: number;
+    topN: number;
+    denseWeight: number;
+    enableKG: boolean;
+    enableRerank: boolean;
+    model: string;
+    temperature?: number;
+    diversity?: number;
+    maxTokens?: number;
+    recallModel: string;
+    llmModel: string;
+    respTime?: number;
+    tokens?: number;
+    search_type?: string | string[];
+    search_policy?: string;
+  };
+  streaming?: boolean;
+  isLatest?: boolean;
+  finished?: boolean;
+}
+export interface Message {
+  type: "user" | "ai";
+  time: string;
+  content: string;
+  hasLLMConfig?: boolean;
+  retrievedChunks?: Array<{
+    content: string;
+    similarity: number;
+    rerank: number;
+    chunk_id: number;
+    source: string;
+  }>;
+  prompt?: string;
+  configInfo?: any;
+  queryId?: string;
+  fullContent?: string;
+  finished?: boolean;
+  typedLength?: number;
+}
+export interface ConversationData{
+  id:string;
+  messages:Message[] ;
+  [key: string]: any;
+}
+
+
+export interface ListItemType {
+  label: string;
+  sessionId: string;
+  gmtModified: number;
+  [key: string]: any;
+}
+export interface ListType {
+  activedItem?: string;
+  data: ListItemType[];
+  sortRules?: { label: string; dayPeriod: number }[];
+}
+

package/src/components/DefaultAppError.tsx

@@ -0,0 +1,7 @@
+export default function DefaultAppError() {
+  return (
+    <div className="main relative h-full w-full flex items-center justify-center">
+      <div className="text-2xl font-bold">app error...</div>
+    </div>
+  );
+}

package/src/components/DefaultAppLoading.tsx

@@ -0,0 +1,7 @@
+export default function DefaultAppLoading() {
+  return (
+    <div className="main relative h-full w-full flex items-center justify-center">
+      <div className="text-2xl font-bold">app loading...</div>
+    </div>
+  );
+}

package/src/components/DefaultDisplayError.tsx

@@ -0,0 +1,7 @@
+export default function DefaultDisplayError() {
+  return (
+    <div className="main relative h-full w-full flex items-center justify-center">
+      <div className="text-2xl font-bold">display error...</div>
+    </div>
+  );
+}

package/src/components/DefaultDisplayLoading.tsx

@@ -0,0 +1,7 @@
+export default function DefaultDisplayLoading() {
+  return (
+    <div className="main relative h-full w-full flex items-center justify-center">
+      <div className="text-2xl font-bold">display loading...</div>
+    </div>
+  );
+}

package/src/components/DefaultNewChatWelcome.tsx

@@ -0,0 +1,10 @@
+export default function DefaultNewChatWelcome() {
+  return (
+
+        <div className="flex flex-col items-center justify-center h-full w-full">
+          <div className="text-2xl text-blue-500 font-bold mb-4">您好，我是您的专属AI助理【小鲸】</div>
+          <div className="text-zinc-500">请输入您的问题或需求，我会尽力为您解答。</div>
+        </div>
+
+  );
+}

package/src/components/Displayer/DefaultAiChatBox.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { Copy, ThumbsUp, ThumbsDown } from 'lucide-react';
+
+export default function DefaultAiChatBox({
+  content,
+  time,
+  sessionContext,
+  eventsEmit,
+  feedbackResult,
+}: any) {
+  const handleCopy = (event: any) => {
+    eventsEmit?.('action_copy:click', { content, event });
+  };
+  const handleThumbsup = () => {
+    eventsEmit?.('action_thumbsup', { result: feedbackResult, sessionContext });
+  };
+  const handleThumbsdown = () => {
+    eventsEmit?.('action_thumbsdown', { content, sessionContext });
+  };
+  return (
+    <div className="flex items-start mb-6 animate-fadeIn w-full text-wrap">
+      <div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-400 to-purple-500 flex items-center justify-center mr-3 shadow-sm">
+        <span className="text-white w-8 h-8 flex items-center justify-center text-xs">AI</span>
+      </div>
+      <div className="flex-1 w-[calc(100%-40px)]">
+        <div className="flex flex-col w-full relative">
+          <div className="text-xs text-gray-400 mb-3">
+            {dayjs(time).format('YYYY-MM-DD HH:mm:ss')}
+          </div>
+          <div className="bg-white rounded-lg shadow-md w-full overflow-hidden border border-gray-100 p-4 relative prose prose-sm">
+            <span className="text-gray-800 w-full leading-relaxed break-words">{content}</span>
+          </div>
+          <div className="w-full mt-2 actions-btns flex py-2 items-center justify-end gap-2 px-2">
+            <button
+              className="flex items-center gap-1 text-sm text-gray-500 hover:text-blue-700"
+              onClick={handleCopy}
+              title="复制"
+            >
+              <Copy className="w-4 h-4" />
+              <span className="hidden sm:inline">复制</span>
+            </button>
+            <button
+              className={`flex items-center gap-1 text-sm text-gray-500 hover:text-blue-700 ${feedbackResult === 1 ? 'text-blue-700' : ''}`}
+              onClick={handleThumbsup}
+              title="点赞"
+            >
+              <ThumbsUp className="w-4 h-4" />
+              <span className="hidden sm:inline">赞</span>
+            </button>
+            <button
+              className={`flex items-center gap-1 text-sm text-gray-500 hover:text-blue-700 ${feedbackResult === 0 ? 'text-blue-700' : ''}`}
+              onClick={handleThumbsdown}
+              title="点踩"
+            >
+              <ThumbsDown className="w-4 h-4" />
+              <span className="hidden sm:inline">踩</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Displayer/DefaultUserChatBox.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { RefreshCcw } from 'lucide-react';
+
+export default function DefaultUserChatBox({ content, time, sessionContext, eventsEmit }: any) {
+  const handleRetry = () => {
+    eventsEmit?.('action_retry', { content, sessionContext });
+  };
+  return (
+    <div className="flex items-start mb-6 animate-fadeIn w-full text-wrap">
+      <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-400 to-blue-500 flex items-center justify-center mr-3 shadow-sm">
+        <span className="text-white text-xs">我</span>
+      </div>
+      <div className="flex-1">
+        <div className="flex-col">
+          <div className="text-xs text-gray-400 mb-3">{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}</div>
+          <div className="bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg p-4 inline-block max-w-[80%] shadow-sm relative prose prose-sm">
+            <span className="text-gray-700 break-words">{content}</span>
+          </div>
+          <div className="w-full mt-2 actions-btns flex py-2 items-center justify-end gap-2 px-2">
+            <button
+              className="flex items-center gap-1 text-sm text-gray-500 hover:text-blue-700"
+              onClick={handleRetry}
+              title="重发"
+            >
+              <RefreshCcw className="w-4 h-4" />
+              <span className="hidden sm:inline">重发</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Displayer/index.tsx

@@ -0,0 +1,107 @@
+import React, { useRef, useEffect } from 'react';
+import { BaseChatMessage } from '../AiChat.types';
+import DefaultUserChatBox from './DefaultUserChatBox';
+import DefaultAiChatBox from './DefaultAiChatBox';
+import { FixedSizeList as List } from 'react-window';
+import { uid } from 'uid';
+
+interface ChatDisplayerProps {
+  messages?: BaseChatMessage[];
+  AiChatBox?: React.ComponentType<any>;
+  UserChatBox?: React.ComponentType<any>;
+  renderAiChatBox?: (msg: any, idx: number) => React.ReactNode;
+  renderUserChatBox?: (msg: any, idx: number) => React.ReactNode;
+  sessionContext?: any;
+  status?: 'ready' | 'loading' | 'error' | 'processing' | 'uploading' | 'thinking' |'analyzing';
+  eventsEmit?: (eventName: string, data?: any) => void;
+}
+
+export default function ChatDisplayer({
+  messages = [],
+  renderAiChatBox,
+  renderUserChatBox,
+  sessionContext,
+  status,
+  eventsEmit,
+}: ChatDisplayerProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  // 虚拟滚动渲染单条消息
+  const renderRow = ({ index, style }: { index: number; style: React.CSSProperties }) => {
+    const msg = messages[index];
+    return (
+      <div key={msg.clientSideId || msg.queryId || msg.id || index} style={style} className="mb-2">
+        {msg.istype === 'user' ? (
+          renderUserChatBox ? (
+            <div style={{ direction: 'ltr' }}>{renderUserChatBox(msg, index)}</div>
+          ) : (
+            <div style={{ direction: 'ltr' }}>
+              <DefaultUserChatBox
+                {...msg}
+                sessionContext={sessionContext}
+                eventsEmit={eventsEmit}
+              />
+            </div>
+          )
+        ) : renderAiChatBox ? (
+          <div style={{ direction: 'ltr' }}>{renderAiChatBox(msg, index)}</div>
+        ) : (
+          <div style={{ direction: 'ltr' }}>
+            <DefaultAiChatBox {...msg} sessionContext={sessionContext} eventsEmit={eventsEmit} />
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      style={{ direction: 'rtl', transform: 'rotate(180deg)' }}
+      className=" max-w-[1000px] min-w-[650px] mx-auto"
+    >
+      {messages.length > 50 ? (
+        <List
+          height={600}
+          itemCount={messages.length}
+          itemSize={80}
+          width={'100%'}
+          style={{ direction: 'ltr', transform: 'rotate(180deg)' }}
+        >
+          {renderRow}
+        </List>
+      ) : (
+        messages.map((msg, idx) =>{
+          //console.log('msg',msg,msg['reference']);
+          return  (
+            <div key={msg.istype === 'user'?msg.queryId: 'relatedTo-'+msg.queryId} className="mb-6">
+              {msg.istype === 'user' ? (
+                renderUserChatBox ? (
+                  <div style={{ direction: 'ltr' }}>{renderUserChatBox(msg, idx)}</div>
+                ) : (
+                  <div style={{ direction: 'ltr' }}>
+                    <DefaultUserChatBox
+                      {...msg}
+                      sessionContext={sessionContext}
+                      eventsEmit={eventsEmit}
+                    />
+                  </div>
+                )
+              ) : renderAiChatBox ? (
+                <div style={{ direction: 'ltr' }}>{renderAiChatBox(msg, idx)}</div>
+              ) : (
+                <div style={{ direction: 'ltr' }}>
+                  <DefaultAiChatBox
+                    {...msg}
+                    sessionContext={sessionContext}
+                    eventsEmit={eventsEmit}
+                  />
+                </div>
+              )}
+            </div>
+          )
+        })
+      )}
+      <div ref={bottomRef} />
+    </div>
+  );
+}