Merge branch 'feature/chat-span' of https://github.com/sdcb/chats int…

…o feature/chat-span
sdcb · Dec 26, 2024 · 086eb1d · 086eb1d
2 parents b7f188d + b1def27
commit 086eb1d
Show file tree

Hide file tree

Showing 20 changed files with 312 additions and 485 deletions.
diff --git a/src/FE/components/ChatIcon/ChatIcon.tsx b/src/FE/components/ChatIcon/ChatIcon.tsx
@@ -2,37 +2,27 @@ import useTranslation from '@/hooks/useTranslation';
 
 import { feModelProviders } from '@/types/model';
 
-import { IconShare } from '@/components/Icons';
-
 import { cn } from '@/lib/utils';
 
 interface Props {
   providerId: number;
   className?: string;
-  isShard?: boolean;
 }
 
 const ChatIcon = (props: Props) => {
-  const { providerId, isShard, className } = props;
+  const { providerId, className } = props;
   const { t } = useTranslation();
 
   if (providerId === undefined) return null;
 
   return (
-    <div className="flex">
-      <img
-        key={`img-${providerId}`}
-        src={feModelProviders[providerId].icon}
-        alt={t(feModelProviders[providerId].name)}
-        style={{ background: 'transparent' }}
-        className={cn('h-5 w-5 rounded-md dark:bg-white', className)}
-      />
-      {/* {isShard && (
-        <span className="w-2 h-2 absolute top-[22px] left-[21px]">
-          <IconShare stroke={'hsl(var(--primary))'} className="w-2 h-2" />
-        </span>
-      )} */}
-    </div>
+    <img
+      key={`img-${providerId}`}
+      src={feModelProviders[providerId].icon}
+      alt={t(feModelProviders[providerId].name)}
+      style={{ background: 'transparent' }}
+      className={cn('h-5 w-5 rounded-md', className)}
+    />
   );
 };
 export default ChatIcon;
diff --git a/src/FE/components/Icons/index.tsx b/src/FE/components/Icons/index.tsx
@@ -1513,6 +1513,29 @@ var IconMinus = (props: IconProps) => {
     </svg>
   );
 };
+
+var IconMore = (props: IconProps) => {
+  const { className, size = 20, strokeWidth = 2, stroke, onClick } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+      className={className}
+      width={size}
+      height={size}
+      strokeWidth={strokeWidth}
+      stroke={stroke || 'hsl(var(--foreground))'}
+      viewBox="0 0 24 24"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z"></path>
+    </svg>
+  );
+};
+
 var Icon = (props: IconProps) => {
   const { className, size = 20, strokeWidth = 2, stroke, onClick } = props;
 
@@ -1589,4 +1612,5 @@ export {
   IconLoader,
   IconModelSearch,
   IconMinus,
+  IconMore,
 };
diff --git a/src/FE/components/TemperatureSlider/TemperatureSlider.tsx b/src/FE/components/TemperatureSlider/TemperatureSlider.tsx
@@ -61,16 +61,10 @@ const TemperatureSlider: FC<Props> = ({
         value={[temperature]}
         onValueChange={handleChange}
       />
-      <ul className="mt-2 pb-8 flex justify-between px-[24px] text-sm">
-        <li className="flex justify-center">
-          <span className="absolute">{t('Precise')}</span>
-        </li>
-        <li className="flex justify-center">
-          <span className="absolute">{t('Neutral')}</span>
-        </li>
-        <li className="flex justify-center">
-          <span className="absolute">{t('Creative')}</span>
-        </li>
+      <ul className="mt-2 pb-8 flex justify-between text-sm">
+        <span>{t('Precise')}</span>
+        <span>{t('Neutral')}</span>
+        <span>{t('Creative')}</span>
       </ul>
     </div>
   );

diff --git a/src/FE/pages/home/_actions/chat.actions.ts b/src/FE/pages/home/_actions/chat.actions.ts
@@ -19,10 +19,13 @@ export const setChats = (chats: SetChatsType): ChatAction => ({
   payload: chats,
 });
 
-export const setSelectedChat = (chat?: SetSelectedChatType): ChatAction => ({
-  type: ChatActionTypes.SET_SELECTED_CHAT,
-  payload: chat,
-});
+export const setSelectedChat = (chat?: SetSelectedChatType): ChatAction => {
+  console.log('chat', chat);
+  return {
+    type: ChatActionTypes.SET_SELECTED_CHAT,
+    payload: chat,
+  };
+};
 
 export const setChangeSelectedChatSpan = (
   chat: IChat,

diff --git a/src/FE/pages/home/_actions/model.actions.ts b/src/FE/pages/home/_actions/model.actions.ts
@@ -1,6 +1,9 @@
+import { AdminModelDto } from '@/types/adminApis';
+
 import {
   ModelAction,
   ModelActionTypes,
+  SetModelMapType,
   SetModelsType,
   SetSelectModelType,
   SetSelectModelsType,
@@ -25,4 +28,15 @@ export const setSelectedModels = (
   payload: selectedModels,
 });
 
+export const setModelMap = (models: SetModelsType): ModelAction => {
+  const modelMap: Record<string, AdminModelDto> = {};
+  models.forEach((x) => {
+    modelMap[x.modelId] = x;
+  });
+  return {
+    type: ModelActionTypes.SET_MODEL_MAP,
+    payload: modelMap,
+  };
+};
+
 export default function () {}
diff --git a/src/FE/pages/home/_components/Chat/Chat.tsx b/src/FE/pages/home/_components/Chat/Chat.tsx
@@ -23,6 +23,8 @@ import {
 } from '@/types/chatMessage';
 import { Prompt } from '@/types/prompt';
 
+import ChatError from '@/components/ChatError/ChatError';
+import ChatIcon from '@/components/ChatIcon/ChatIcon';
 import ResponseMessage from '@/components/ChatMessage/ResponseMessage';
 import ResponseMessageActions from '@/components/ChatMessage/ResponseMessageActions';
 import UserMessage from '@/components/ChatMessage/UserMessage';
@@ -55,11 +57,11 @@ const Chat = memo(() => {
       selectedMessages,
 
       models,
+      modelMap,
       selectModel,
 
       defaultPrompt,
     },
-    handleChatIsError,
 
     hasModel,
     chatDispatch,
@@ -144,22 +146,30 @@ const Chat = memo(() => {
   };
 
   const updateSelectedResponseMessage = (
-    messages: ChatMessage[][],
+    selectedMsgs: ChatMessage[][],
     messageId: string,
     text: string,
-    error?: string,
+    status?: ChatStatus,
+    finalMessageId?: string,
   ) => {
-    const messageCount = messages.length - 1;
-    let messageList = messages[messageCount];
+    const messageCount = selectedMsgs.length - 1;
+    let messageList = selectedMsgs[messageCount];
     messageList.map((x) => {
       if (x.id === messageId) {
         x.content.text += text;
-        x.content.error = error;
+        if (status) {
+          x.status = status;
+          status === ChatStatus.Failed && (x.content.error = text);
+          if (status === ChatStatus.None) {
+            x.siblingIds.push(messageId);
+            x.id = finalMessageId!;
+          }
+        }
       }
       return x;
     });
-    messages.splice(messageCount, 1, messageList);
-    messageDispatch(setSelectedMessages(messages));
+    selectedMsgs.splice(messageCount, 1, messageList);
+    messageDispatch(setSelectedMessages(selectedMsgs));
   };
 
   const handleSend = useCallback(
@@ -177,7 +187,11 @@ const Chat = memo(() => {
         spans: chatSpans.map((x) => ({
           id: x.spanId,
           systemPrompt: defaultPrompt?.content,
+          setsTemperature: true,
+          enableSearch: x.enableSearch,
+          temperature: x.temperature,
         })),
+        utcOffset: new Date().getTimezoneOffset(),
         parentAssistantMessageId: messageId || null,
         userMessage: message.content,
       };
@@ -286,13 +300,13 @@ const Chat = memo(() => {
     let messageList = [...messages];
     const data = response.body;
     if (!response.ok) {
-      handleChatIsError();
+      // handleChatIsError();
       const result = await response.json();
       toast.error(t(result?.message) || response.statusText);
       return;
     }
     if (!data) {
-      handleChatIsError();
+      // handleChatIsError();
       return;
     }
 
@@ -302,7 +316,6 @@ const Chat = memo(() => {
     async function* processBuffer() {
       while (true) {
         const { done, value } = await reader.read();
-        console.log(done, value);
         if (done) {
           break;
         }
@@ -325,21 +338,30 @@ const Chat = memo(() => {
       if (value.k === SseResponseKind.StopId) {
         chatDispatch(setStopIds([value.r]));
       } else if (value.k === SseResponseKind.Segment) {
-        const msgId = `${ResponseMessageTempId}-${value.i}`;
-        updateSelectedResponseMessage(selectedMessageList, msgId, value.r);
+        const { r: msg, i: spanId } = value;
+        const msgId = `${ResponseMessageTempId}-${spanId}`;
+        updateSelectedResponseMessage(selectedMessageList, msgId, msg);
       } else if (value.k === SseResponseKind.Error) {
-        const msgId = `${ResponseMessageTempId}-${value.i}`;
+        const { r: msg, i: spanId } = value;
+        const msgId = `${ResponseMessageTempId}-${spanId}`;
         updateSelectedResponseMessage(
           selectedMessageList,
           msgId,
-          value.r,
-          value.r,
+          msg,
+          ChatStatus.Failed,
         );
       } else if (value.k === SseResponseKind.UserMessage) {
-        const msg = value.r;
-        messageList.push(msg);
+        messageList.push(value.r);
       } else if (value.k === SseResponseKind.ResponseMessage) {
-        const msg = value.r;
+        const { r: msg, i: spanId } = value;
+        const msgId = `${ResponseMessageTempId}-${spanId}`;
+        updateSelectedResponseMessage(
+          selectedMessageList,
+          msgId,
+          '',
+          ChatStatus.None,
+          msg.id,
+        );
         messageList.push(msg);
       } else if (value.k === SseResponseKind.UpdateTitle) {
         updateChatTitle(value.r);
@@ -430,6 +452,7 @@ const Chat = memo(() => {
         ) : (
           <div className="w-4/5 m-auto p-4">
             {selectedMessages.map((messages, index) => {
+              const hasMultipleSpan = selectedChat.spans.length > 1;
               return (
                 <div
                   key={'message-group-' + index}
@@ -461,14 +484,27 @@ const Chat = memo(() => {
                         )}
                         {message.role === ChatRole.Assistant && (
                           <div
-                            onClick={() => handelMessageActive(message.id)}
+                            onClick={() =>
+                              hasMultipleSpan && handelMessageActive(message.id)
+                            }
                             key={'response-message-' + message.id}
                             className={cn(
-                              'border-[1px] rounded-md p-4',
-                              message.isActive && 'border-primary/50',
+                              'border-[1px] rounded-md p-4 flex',
+                              hasMultipleSpan &&
+                                message.isActive &&
+                                'border-primary/50',
                             )}
                           >
+                            {/* <ChatIcon
+                              className="w-7 h-7 mr-1"
+                              providerId={
+                                modelMap[message.modelId!].modelProviderId
+                              }
+                            /> */}
                             <div className="prose dark:prose-invert rounded-r-md">
+                              {message.status === ChatStatus.Failed && (
+                                <ChatError error={message.content.error} />
+                              )}
                               <ResponseMessage
                                 chatStatus={message.status}
                                 currentChatMessageId={message.id}

diff --git a/src/FE/pages/home/_components/Chat/ChatHeader.tsx b/src/FE/pages/home/_components/Chat/ChatHeader.tsx
@@ -80,6 +80,18 @@ const ChatHeader = () => {
       <div className="flex justify-between h-auto">
         <div className={cn('flex justify-start ml-24', showChatBar && 'ml-6')}>
           <div className="flex flex-col gap-y-1">
+            <div>
+              {selectedChat.spans.length < MAX_SELECT_MODEL_COUNT && (
+                <ChangeChatModelDropdownMenu
+                  models={models}
+                  className="font-semibold text-base"
+                  content={t('Add another model')}
+                  onChangeModel={(model) => {
+                    handleAddChatModel(model.modelId);
+                  }}
+                />
+              )}
+            </div>
             <div className="flex flex-col gap-x-1">
               {selectedChat.spans.map((span) => (
                 <div className="flex" key={'chat-header-' + span.spanId}>
@@ -113,18 +125,6 @@ const ChatHeader = () => {
                 </div>
               ))}
             </div>
-            <div>
-              {selectedChat.spans.length < MAX_SELECT_MODEL_COUNT && (
-                <ChangeChatModelDropdownMenu
-                  models={models}
-                  className="font-semibold text-base"
-                  content={t('Add another model')}
-                  onChangeModel={(model) => {
-                    handleAddChatModel(model.modelId);
-                  }}
-                />
-              )}
-            </div>
           </div>
         </div>
         <div className="mr-2 md:mr-4">{<ModeToggle />}</div>