From d5997071540fb7eed86b7c039a901a298a40abd0 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 12 Feb 2025 16:54:14 +0800
Subject: [PATCH] Fix: After deleting all conversation lists, the chat input
 box can still be used for input. #4907 (#4909)

### What problem does this PR solve?

Fix: After deleting all conversation lists, the chat input box can still
be used for input. #4907

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/components/llm-select/llm-label.tsx   | 32 ++++++++-----------
 .../components/llm-setting-items/index.tsx    |  6 +++-
 web/src/hooks/chat-hooks.ts                   |  8 +++--
 web/src/hooks/llm-hooks.tsx                   |  9 +-----
 web/src/utils/llm-util.ts                     | 13 ++++++++
 web/tailwind.css                              |  5 +++
 6 files changed, 44 insertions(+), 29 deletions(-)
 create mode 100644 web/src/utils/llm-util.ts

diff --git a/web/src/components/llm-select/llm-label.tsx b/web/src/components/llm-select/llm-label.tsx
index dcdffab5e..29c75c91f 100644
--- a/web/src/components/llm-select/llm-label.tsx
+++ b/web/src/components/llm-select/llm-label.tsx
@@ -1,6 +1,5 @@
-import { LlmModelType } from '@/constants/knowledge';
-import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
-import { useMemo } from 'react';
+import { getLLMIconName, getLlmNameAndFIdByLlmId } from '@/utils/llm-util';
+import { LlmIcon } from '../svg-icon';
 
 interface IProps {
   id?: string;
@@ -10,22 +9,19 @@ interface IProps {
 }
 
 const LLMLabel = ({ value }: IProps) => {
-  const modelOptions = useComposeLlmOptionsByModelTypes([
-    LlmModelType.Chat,
-    LlmModelType.Image2text,
-  ]);
+  const { llmName, fId } = getLlmNameAndFIdByLlmId(value);
 
-  const label = useMemo(() => {
-    for (const item of modelOptions) {
-      for (const option of item.options) {
-        if (option.value === value) {
-          return option.label;
-        }
-      }
-    }
-  }, [modelOptions, value]);
-
-  return <div>{label}</div>;
+  return (
+    <div className="flex items-center gap-1">
+      <LlmIcon
+        name={getLLMIconName(fId, llmName)}
+        width={20}
+        height={20}
+        size={'small'}
+      />
+      {llmName}
+    </div>
+  );
 };
 
 export default LLMLabel;
diff --git a/web/src/components/llm-setting-items/index.tsx b/web/src/components/llm-setting-items/index.tsx
index 158761c3e..23d026892 100644
--- a/web/src/components/llm-setting-items/index.tsx
+++ b/web/src/components/llm-setting-items/index.tsx
@@ -54,7 +54,11 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
         {...formItemLayout}
         rules={[{ required: true, message: t('modelMessage') }]}
       >
-        <Select options={modelOptions} showSearch />
+        <Select
+          options={modelOptions}
+          showSearch
+          popupMatchSelectWidth={false}
+        />
       </Form.Item>
       <div className="border rounded-md">
         <div className="flex justify-between bg-slate-100 p-2 mb-2">
diff --git a/web/src/hooks/chat-hooks.ts b/web/src/hooks/chat-hooks.ts
index 44ceda768..93a55421c 100644
--- a/web/src/hooks/chat-hooks.ts
+++ b/web/src/hooks/chat-hooks.ts
@@ -253,8 +253,12 @@ export const useFetchNextConversationList = () => {
     enabled: !!dialogId,
     queryFn: async () => {
       const { data } = await chatService.listConversation({ dialogId });
-      if (data.code === 0 && data.data.length > 0) {
-        handleClickConversation(data.data[0].id, '');
+      if (data.code === 0) {
+        if (data.data.length > 0) {
+          handleClickConversation(data.data[0].id, '');
+        } else {
+          handleClickConversation('', '');
+        }
       }
       return data?.data;
     },
diff --git a/web/src/hooks/llm-hooks.tsx b/web/src/hooks/llm-hooks.tsx
index 2a3451dbc..4bb3c2fb3 100644
--- a/web/src/hooks/llm-hooks.tsx
+++ b/web/src/hooks/llm-hooks.tsx
@@ -13,6 +13,7 @@ import {
 } from '@/interfaces/request/llm';
 import userService from '@/services/user-service';
 import { sortLLmFactoryListBySpecifiedOrder } from '@/utils/common-util';
+import { getLLMIconName } from '@/utils/llm-util';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Flex, message } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
@@ -54,14 +55,6 @@ export const useSelectLlmOptions = () => {
   return embeddingModelOptions;
 };
 
-const getLLMIconName = (fid: string, llm_name: string) => {
-  if (fid === 'FastEmbed') {
-    return llm_name.split('/').at(0) ?? '';
-  }
-
-  return fid;
-};
-
 export const useSelectLlmOptionsByModelType = () => {
   const llmInfo: IThirdOAIModelCollection = useFetchLlmList();
 
diff --git a/web/src/utils/llm-util.ts b/web/src/utils/llm-util.ts
new file mode 100644
index 000000000..0d2a2cfde
--- /dev/null
+++ b/web/src/utils/llm-util.ts
@@ -0,0 +1,13 @@
+export const getLLMIconName = (fid: string, llm_name: string) => {
+  if (fid === 'FastEmbed') {
+    return llm_name.split('/').at(0) ?? '';
+  }
+
+  return fid;
+};
+
+export const getLlmNameAndFIdByLlmId = (llmId?: string) => {
+  const [llmName, fId] = llmId?.split('@') || [];
+
+  return { fId, llmName };
+};
diff --git a/web/tailwind.css b/web/tailwind.css
index 54af4ba53..1e5bae923 100644
--- a/web/tailwind.css
+++ b/web/tailwind.css
@@ -169,4 +169,9 @@
   h4 {
     @apply text-base font-normal;
   }
+
+  img,
+  video {
+    max-width: none;
+  }
 }