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/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>
   );