Feat: Allow chat to use meta data #3221 (#9393)

### What problem does this PR solve?

Feat:  Allow chat to use meta data #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { PanelRightClose } from 'lucide-react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
@@ -7,7 +8,8 @@ import { ChatModelSettings } from './chat-model-settings';
 import { ChatPromptEngine } from './chat-prompt-engine';
 import { useChatSettingSchema } from './use-chat-setting-schema';
 
-export function ChatSettings() {
+type ChatSettingsProps = { switchSettingVisible(): void };
+export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
   const formSchema = useChatSettingSchema();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -33,11 +35,18 @@ export function ChatSettings() {
   }
 
   return (
-    <section className="py-6">
+    <section className="p-5  w-[400px] max-w-[20%]">
+      <div className="flex justify-between items-center text-base">
+        Chat Settings
+        <PanelRightClose
+          className="size-4 cursor-pointer"
+          onClick={switchSettingVisible}
+        />
+      </div>
       <FormProvider {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 overflow-auto max-h-[88vh] pr-4"
+          className="space-y-6 overflow-auto max-h-[87vh] pr-4"
         >
           <ChatBasicSetting></ChatBasicSetting>
           <ChatPromptEngine></ChatPromptEngine>

web/src/pages/next-chats/chat/chat-box.tsx

@@ -23,7 +23,7 @@ interface IProps {
 export function ChatBox({ controller }: IProps) {
   const {
     value,
-    scrollRef,
+    // scrollRef,
     messageContainerRef,
     sendLoading,
     derivedMessages,
@@ -43,8 +43,8 @@ export function ChatBox({ controller }: IProps) {
   const sendDisabled = useSendButtonDisabled(value);
 
   return (
-    <section className="border-x  flex flex-col p-5 w-full">
-      <div ref={messageContainerRef} className="flex-1 overflow-auto">
+    <section className="border-x  flex flex-col p-5 flex-1 min-w-0">
+      <div ref={messageContainerRef} className="flex-1 overflow-auto min-h-0">
         <div className="w-full">
           {derivedMessages?.map((message, i) => {
             return (
@@ -75,7 +75,7 @@ export function ChatBox({ controller }: IProps) {
             );
           })}
         </div>
-        <div ref={scrollRef} />
+        {/* <div ref={scrollRef} /> */}
       </div>
       <NextMessageInput
         disabled={disabled}

web/src/pages/next-chats/chat/index.tsx

@@ -7,10 +7,12 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
+import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchDialog } from '@/hooks/use-chat-request';
 import { useTranslation } from 'react-i18next';
 import { useHandleClickConversationCard } from '../hooks/use-click-card';
+import { ChatSettings } from './app-settings/chat-settings';
 import { ChatBox } from './chat-box';
 import { Sessions } from './sessions';
 
@@ -20,6 +22,8 @@ export default function Chat() {
   const { t } = useTranslation();
   const { handleConversationCardClick, controller } =
     useHandleClickConversationCard();
+  const { visible: settingVisible, switchVisible: switchSettingVisible } =
+    useSetModalState(true);
 
   return (
     <section className="h-full flex flex-col">
@@ -39,10 +43,18 @@ export default function Chat() {
         </Breadcrumb>
       </PageHeader>
       <div className="flex flex-1 min-h-0">
-        <Sessions
-          handleConversationCardClick={handleConversationCardClick}
-        ></Sessions>
-        <ChatBox controller={controller}></ChatBox>
+        <div className="flex flex-1 min-w-0">
+          <Sessions
+            handleConversationCardClick={handleConversationCardClick}
+            switchSettingVisible={switchSettingVisible}
+          ></Sessions>
+          <ChatBox controller={controller}></ChatBox>
+        </div>
+        {settingVisible && (
+          <ChatSettings
+            switchSettingVisible={switchSettingVisible}
+          ></ChatSettings>
+        )}
       </div>
     </section>
   );

web/src/pages/next-chats/chat/sessions.tsx

@@ -1,21 +1,30 @@
 import { MoreButton } from '@/components/more-button';
+import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import { useGetChatSearchParams } from '@/hooks/use-chat-request';
+import { useSetModalState } from '@/hooks/common-hooks';
+import {
+  useFetchDialog,
+  useGetChatSearchParams,
+} from '@/hooks/use-chat-request';
 import { cn } from '@/lib/utils';
-import { Plus } from 'lucide-react';
+import { PanelLeftClose, PanelRightClose, Plus } from 'lucide-react';
 import { useCallback } from 'react';
 import { useHandleClickConversationCard } from '../hooks/use-click-card';
 import { useSelectDerivedConversationList } from '../hooks/use-select-conversation-list';
-import { ChatSettingSheet } from './app-settings/chat-settings-sheet';
 
 type SessionProps = Pick<
   ReturnType<typeof useHandleClickConversationCard>,
   'handleConversationCardClick'
->;
-export function Sessions({ handleConversationCardClick }: SessionProps) {
+> & { switchSettingVisible(): void };
+export function Sessions({
+  handleConversationCardClick,
+  switchSettingVisible,
+}: SessionProps) {
   const { list: conversationList, addTemporaryConversation } =
     useSelectDerivedConversationList();
+  const { data } = useFetchDialog();
+  const { visible, switchVisible } = useSetModalState(true);
 
   const handleCardClick = useCallback(
     (conversationId: string, isNew: boolean) => () => {
@@ -26,9 +35,32 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
 
   const { conversationId } = useGetChatSearchParams();
 
+  if (!visible) {
+    return (
+      <PanelRightClose
+        className="cursor-pointer size-4 mt-8"
+        onClick={switchVisible}
+      />
+    );
+  }
+
   return (
     <section className="p-6 w-[400px] max-w-[20%] flex flex-col">
-      <div className="flex justify-between items-center mb-4">
+      <section className="flex items-center text-base justify-between gap-2">
+        <div className="flex gap-3 items-center min-w-0">
+          <RAGFlowAvatar
+            avatar={data.icon}
+            name={data.name}
+            className="size-8"
+          ></RAGFlowAvatar>
+          <span className="flex-1 truncate">{data.name}</span>
+        </div>
+        <PanelLeftClose
+          className="cursor-pointer size-4"
+          onClick={switchVisible}
+        />
+      </section>
+      <div className="flex justify-between items-center mb-4 pt-10">
         <span className="text-xl font-bold">Conversations</span>
         <Button variant={'ghost'} onClick={addTemporaryConversation}>
           <Plus></Plus>
@@ -51,9 +83,9 @@ export function Sessions({ handleConversationCardClick }: SessionProps) {
         ))}
       </div>
       <div className="py-2">
-        <ChatSettingSheet>
-          <Button className="w-full">Chat Settings</Button>
-        </ChatSettingSheet>
+        <Button className="w-full" onClick={switchSettingVisible}>
+          Chat Settings
+        </Button>
       </div>
     </section>
   );