no model ui

sdcb · Dec 5, 2024 · 5a8d2ec · 5a8d2ec
1 parent bc62ee1
commit 5a8d2ec
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 43 deletions.
diff --git a/src/FE/components/Chat/Chat.tsx b/src/FE/components/Chat/Chat.tsx
@@ -33,6 +33,7 @@ import { HomeContext } from '@/contexts/Home.context';
 import { cn } from '@/lib/utils';
 import Decimal from 'decimal.js';
 import { v4 as uuidv4 } from 'uuid';
+import NoModel from './NoModel';
 
 interface Props {
   stopConversationRef: MutableRefObject<boolean>;
@@ -377,33 +378,31 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
           ref={chatContainerRef}
           onScroll={handleScroll}
         >
-          {selectChat?.id && (
-            <div className="sticky top-0 pt-1 z-10 text-sm bg-background right-0">
-              <div className="flex items-center justify-between h-10">
-                <div
-                  className={cn(
-                    'flex justify-start items-center ml-24',
-                    settings.showChatBar && 'ml-6',
-                  )}
-                >
-                  {hasModel() && (
-                    <ChangeModel
-                      className="font-semibold text-base"
-                      content={selectModel?.name}
-                      onChangeModel={(model) => {
-                        homeDispatch({
-                          field: 'selectModel',
-                          value: model,
-                        });
-                        putUserChatModel(selectChat.id, model.modelId);
-                      }}
-                    />
-                  )}
-                </div>
-                <div className="mr-2 md:mr-4">{<ModeToggle />}</div>
+          <div className="sticky top-0 pt-1 z-10 text-sm bg-background right-0">
+            <div className="flex items-center justify-between h-10">
+              <div
+                className={cn(
+                  'flex justify-start items-center ml-24',
+                  settings.showChatBar && 'ml-6',
+                )}
+              >
+                {hasModel() && (
+                  <ChangeModel
+                    className="font-semibold text-base"
+                    content={selectModel?.name}
+                    onChangeModel={(model) => {
+                      homeDispatch({
+                        field: 'selectModel',
+                        value: model,
+                      });
+                      putUserChatModel(selectChat.id, model.modelId);
+                    }}
+                  />
+                )}
               </div>
+              <div className="mr-2 md:mr-4">{<ModeToggle />}</div>
             </div>
-          )}
+          </div>
           {selectMessages?.length === 0 ? (
             <>
               <div className="mx-auto flex flex-col space-y-5 md:space-y-10 px-3 pt-[52px] sm:max-w-[600px]">
@@ -542,6 +541,7 @@ export const Chat = memo(({ stopConversationRef }: Props) => {
             onChangePrompt={onChangePrompt}
           />
         )}
+        {!hasModel() && <NoModel />}
       </>
     </div>
   );

diff --git a/src/FE/components/Chat/ChatError.tsx b/src/FE/components/Chat/ChatError.tsx
@@ -27,7 +27,7 @@ const ChatError = (props: Props) => {
       className="bg-background my-2 mt-0 border-none p-0 px-1 pt-1"
     >
       <AlertDescription className="flex items-center gap-1">
-        <IconError stroke="#ef4444" />
+        <IconError stroke="#7f1d1d" size={24} />
         {errorMessage()}
       </AlertDescription>
     </Alert>

diff --git a/src/FE/components/Chat/NoModel.tsx b/src/FE/components/Chat/NoModel.tsx
@@ -0,0 +1,27 @@
+import useTranslation from '@/hooks/useTranslation';
+
+import { IconModelSearch } from '../Icons';
+
+const NoModel = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="w-full flex items-center flex-wrap justify-center gap-10">
+      <div className="grid gap-4 w-60">
+        <div className="w-20 h-20 mx-auto">
+          <IconModelSearch size={64} />
+        </div>
+        <div>
+          <h2 className="text-center text-lg font-semibold leading-relaxed pb-1">
+            {t("There's no model here")}
+          </h2>
+          <p className="text-center text-sm font-normal leading-snug pb-4">
+            {t('You can contact the administrator or create one yourself')}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NoModel;
diff --git a/src/FE/components/Icons/index.tsx b/src/FE/components/Icons/index.tsx
@@ -628,7 +628,7 @@ const IconBulbFilled = (props: IconProps) => {
   );
 };
 
-const IconMistOff = (props: IconProps) => {
+const IconSearch = (props: IconProps) => {
   const { className, size = 20, strokeWidth = 2, stroke, onClick } = props;
 
   return (
@@ -645,14 +645,8 @@ const IconMistOff = (props: IconProps) => {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 5h9" />
-      <path d="M3 10h7" />
-      <path d="M18 10h1" />
-      <path d="M5 15h5" />
-      <path d="M14 15h1m4 0h2" />
-      <path d="M3 20h9m4 0h3" />
-      <path d="M3 3l18 18" />
+      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+      <path d="M21 21l-6 -6" />
     </svg>
   );
 };
@@ -1473,6 +1467,30 @@ var IconLoader = (props: IconProps) => {
   );
 };
 
+var IconModelSearch = (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="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+      <path d="M21 21l-6 -6" />
+      <path d="M10 13v.01" />
+      <path d="M10 7v3" />
+    </svg>
+  );
+};
 var Icon = (props: IconProps) => {
   const { className, size = 20, strokeWidth = 2, stroke, onClick } = props;
 
@@ -1516,7 +1534,7 @@ export {
   IconX,
   IconClipboard,
   IconBulbFilled,
-  IconMistOff,
+  IconSearch,
   IconPlus,
   IconSquareRoundedX,
   IconChartPie,
@@ -1547,4 +1565,5 @@ export {
   IconSun,
   IconMoon,
   IconLoader,
+  IconModelSearch,
 };
diff --git a/src/FE/components/Markdown/CodeBlock.tsx b/src/FE/components/Markdown/CodeBlock.tsx
@@ -31,7 +31,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
 
   return (
     <div className="codeblock relative font-sans text-[16px]">
-      <div className="flex items-center justify-between w-full py-[6px] px-3 bg-[#282C34]">
+      <div className="flex items-center justify-between w-full py-[6px] px-3 bg-[#3d3d3d]">
         <span className="text-xs lowercase text-white">{language}</span>
 
         <div className="flex items-center">

diff --git a/src/FE/components/Promptbar/components/Prompt.tsx b/src/FE/components/Promptbar/components/Prompt.tsx
@@ -6,7 +6,6 @@ import SidebarActionButton from '@/components/Button/SidebarActionButton';
 import {
   IconBulbFilled,
   IconCheck,
-  IconMistOff,
   IconTrash,
   IconX,
 } from '@/components/Icons/index';

diff --git a/src/FE/components/Sidebar/Sidebar.tsx b/src/FE/components/Sidebar/Sidebar.tsx
@@ -5,7 +5,7 @@ import useTranslation from '@/hooks/useTranslation';
 import {
   IconLayoutSidebar,
   IconLayoutSidebarRight,
-  IconMistOff,
+  IconSearch,
   IconSquarePlus,
 } from '@/components/Icons/index';
 import Search from '@/components/Search';
@@ -102,8 +102,8 @@ const Sidebar = <T,>({
           {items?.length > 0 ? (
             <div className="pt-2">{itemComponent}</div>
           ) : (
-            <div className="mt-8 select-none text-center opacity-50">
-              <IconMistOff className="mx-auto mb-3" />
+            <div className="select-none text-center flex flex-col justify-center h-56 opacity-50">
+              <IconSearch className="mx-auto mb-3" />
               <span className="text-[14px] leading-normal">{t('No data')}</span>
             </div>
           )}

diff --git a/src/FE/locales/zh-CN.json b/src/FE/locales/zh-CN.json
@@ -356,5 +356,8 @@
   "File Count": "文件数量",
   "File is empty.": "文件为空。",
   "File is too large.": "文件过大。",
-  "Invalid file name.": "无效的文件名。"
+  "Invalid file name.": "无效的文件名。",
+
+  "There's no model here": "这里没有模型",
+  "You can contact the administrator or create one yourself": "你可以联系管理员或者自己创建一个"
 }
diff --git a/src/FE/pages/globals.css b/src/FE/pages/globals.css
@@ -117,7 +117,7 @@ html {
   max-width: 100ch !important;
 }
 
-.prose > pre {
+.prose pre {
   padding: 0;
 }