From 8094d5e1288a6a17ccb670f52208b5b12eedf1d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=85=83=E5=9D=A4?= <zhangyuankun@dlautotech.com>
Date: Thu, 10 Jul 2025 09:36:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=94=A8=E6=88=B7=E5=8F=8D?=
 =?UTF-8?q?=E9=A6=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/chat-with-history/index.tsx | 287 ++++++++++-----------
 1 file changed, 141 insertions(+), 146 deletions(-)

diff --git a/app/components/chat-with-history/index.tsx b/app/components/chat-with-history/index.tsx
index 493cb8c..f873b38 100644
--- a/app/components/chat-with-history/index.tsx
+++ b/app/components/chat-with-history/index.tsx
@@ -1,33 +1,26 @@
-import type { FC } from 'react'
-import {
-  useEffect,
-  useState,
-} from 'react'
-import { useAsyncEffect } from 'ahooks'
-import { useThemeContext } from '@/app/components/chat/embedded-chatbot/theme/theme-context'
-import {
-  ChatWithHistoryContext,
-  useChatWithHistoryContext,
-} from './context'
-import { useChatWithHistory } from './hooks'
-import Sidebar from './sidebar'
-import HeaderInMobile from './header-in-mobile'
-import ConfigPanel from './config-panel'
-import ChatWrapper from './chat-wrapper'
-import type { InstalledApp } from '@/models/explore'
-import Loading from '@/app/components/base/loading'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { useRouter } from 'next/navigation'
-import AppUnavailable from '@/app/components/base/app-unavailable'
+import type { FC } from "react";
+import "antd/dist/reset.css"; // 引入 antd 的样式
+import { useEffect, useState } from "react";
+import { useAsyncEffect } from "ahooks";
+import { useThemeContext } from "@/app/components/chat/embedded-chatbot/theme/theme-context";
+import { ChatWithHistoryContext, useChatWithHistoryContext } from "./context";
+import { useChatWithHistory } from "./hooks";
+import Sidebar from "./sidebar";
+import HeaderInMobile from "./header-in-mobile";
+import ConfigPanel from "./config-panel";
+import ChatWrapper from "./chat-wrapper";
+import type { InstalledApp } from "@/models/explore";
+import Loading from "@/app/components/base/loading";
+import useBreakpoints, { MediaType } from "@/hooks/use-breakpoints";
+import { useRouter } from "next/navigation";
+import AppUnavailable from "@/app/components/base/app-unavailable";
 
 type ChatWithHistoryProps = {
-  className?: string
-  userStr?: string
-}
-const ChatWithHistory: FC<ChatWithHistoryProps> = ({
-  className,
-  userStr,
-}) => {
+  className?: string;
+  userStr?: string;
+};
+
+const ChatWithHistory: FC<ChatWithHistoryProps> = ({ className, userStr }) => {
   const {
     appInfoError,
     appData,
@@ -38,82 +31,78 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     chatShouldReloadKey,
     isMobile,
     themeBuilder,
-  } = useChatWithHistoryContext()
+  } = useChatWithHistoryContext();
 
-  const chatReady = (!showConfigPanelBeforeChat || !!appPrevChatTree.length)
-  const customConfig = appData?.custom_config
-  const site = appData?.site
+  const chatReady = !showConfigPanelBeforeChat || !!appPrevChatTree.length;
+  const customConfig = appData?.custom_config;
+  const site = appData?.site;
 
   useEffect(() => {
-    themeBuilder?.buildTheme(site?.chat_color_theme, site?.chat_color_theme_inverted)
+    themeBuilder?.buildTheme(
+      site?.chat_color_theme,
+      site?.chat_color_theme_inverted
+    );
     if (site) {
-      if (customConfig)
-        document.title = `${site.title}`
-      else
-        document.title = `${site.title} - Powered by Dify`
+      if (customConfig) document.title = `${site.title}`;
+      else document.title = `${site.title} - Powered by Dify`;
     }
-  }, [site, customConfig, themeBuilder])
+  }, [site, customConfig, themeBuilder]);
 
   if (appInfoLoading) {
-    return (
-      <Loading type='app' />
-    )
+    return <Loading type="app" />;
   }
 
   if (appInfoError) {
-    return (
-      <AppUnavailable />
-    )
+    return <AppUnavailable />;
   }
 
   return (
-    <div className={`h-full flex bg-white ${className} ${isMobile && 'flex-col'}`}>
-      {
-        !isMobile && (
-          <Sidebar userStr={userStr} />
-        )
-      }
-      {
-        isMobile && (
-          <HeaderInMobile />
-        )
-      }
-      <div className={`grow overflow-hidden ${showConfigPanelBeforeChat && !appPrevChatTree.length && 'flex items-center justify-center'}`}>
-        {
-          showConfigPanelBeforeChat && !appChatListDataLoading && !appPrevChatTree.length && (
-            <div className={`flex w-full items-center justify-center h-full ${isMobile && 'px-4'}`}>
+    <div
+      className={`h-full flex bg-white ${className} ${isMobile && "flex-col"}`}
+    >
+      {!isMobile && <Sidebar userStr={userStr} />}
+      {isMobile && <HeaderInMobile />}
+      <div
+        className={`grow overflow-hidden ${
+          showConfigPanelBeforeChat &&
+          !appPrevChatTree.length &&
+          "flex items-center justify-center"
+        }`}
+      >
+        {showConfigPanelBeforeChat &&
+          !appChatListDataLoading &&
+          !appPrevChatTree.length && (
+            <div
+              className={`flex w-full items-center justify-center h-full ${
+                isMobile && "px-4"
+              }`}
+            >
               <ConfigPanel />
             </div>
-          )
-        }
-        {
-          appChatListDataLoading && chatReady && (
-            <Loading type='app' />
-          )
-        }
-        {
-          chatReady && !appChatListDataLoading && (
-            <ChatWrapper key={chatShouldReloadKey} />
-          )
-        }
+          )}
+        {appChatListDataLoading && chatReady && <Loading type="app" />}
+        {chatReady && !appChatListDataLoading && (
+          <ChatWrapper key={chatShouldReloadKey} />
+        )}
       </div>
     </div>
-  )
-}
+  );
+};
 
 export type ChatWithHistoryWrapProps = {
-  installedAppInfo?: InstalledApp
-  className?: string
-  userStr?: string
-}
+  installedAppInfo?: InstalledApp;
+  className?: string;
+  userStr?: string;
+};
+
 const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
   installedAppInfo,
   className,
   userStr,
 }) => {
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
-  const themeBuilder = useThemeContext()
+  const media = useBreakpoints();
+  const isMobile = media === MediaType.mobile;
+  const themeBuilder = useThemeContext();
 
   const {
     appInfoError,
@@ -146,93 +135,99 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
     appId,
     handleFeedback,
     currentChatInstanceRef,
-  } = useChatWithHistory(installedAppInfo)
+    feedbackModal,
+  } = useChatWithHistory(installedAppInfo);
 
   return (
-    <ChatWithHistoryContext.Provider value={{
-      appInfoError,
-      appInfoLoading,
-      appData,
-      appParams,
-      appMeta,
-      appChatListDataLoading,
-      currentConversationId,
-      currentConversationItem,
-      appPrevChatTree,
-      pinnedConversationList,
-      conversationList,
-      showConfigPanelBeforeChat,
-      newConversationInputs,
-      newConversationInputsRef,
-      handleNewConversationInputsChange,
-      inputsForms,
-      handleNewConversation,
-      handleStartChat,
-      handleChangeConversation,
-      handlePinConversation,
-      handleUnpinConversation,
-      handleDeleteConversation,
-      conversationRenaming,
-      handleRenameConversation,
-      handleNewConversationCompleted,
-      chatShouldReloadKey,
-      isMobile,
-      isInstalledApp,
-      appId,
-      handleFeedback,
-      currentChatInstanceRef,
-      themeBuilder,
-    }}>
+    <ChatWithHistoryContext.Provider
+      value={{
+        appInfoError,
+        appInfoLoading,
+        appData,
+        appParams,
+        appMeta,
+        appChatListDataLoading,
+        currentConversationId,
+        currentConversationItem,
+        appPrevChatTree,
+        pinnedConversationList,
+        conversationList,
+        showConfigPanelBeforeChat,
+        newConversationInputs,
+        newConversationInputsRef,
+        handleNewConversationInputsChange,
+        inputsForms,
+        handleNewConversation,
+        handleStartChat,
+        handleChangeConversation,
+        handlePinConversation,
+        handleUnpinConversation,
+        handleDeleteConversation,
+        conversationRenaming,
+        handleRenameConversation,
+        handleNewConversationCompleted,
+        chatShouldReloadKey,
+        isMobile,
+        isInstalledApp,
+        appId,
+        handleFeedback,
+        currentChatInstanceRef,
+        themeBuilder,
+      }}
+    >
       <ChatWithHistory className={className} userStr={userStr} />
+      {feedbackModal} {/* 确保 feedbackModal 正确渲染 */}
     </ChatWithHistoryContext.Provider>
-  )
-}
+  );
+};
 
 const ChatWithHistoryWrapWithCheckToken: FC<ChatWithHistoryWrapProps> = ({
   installedAppInfo,
   className,
 }) => {
-  const [initialized, setInitialized] = useState(false)
-  const [appUnavailable, setAppUnavailable] = useState<boolean>(false)
-  const [resCode, setResCode] = useState<number>(200)
-  const router = useRouter()
-  const [userName, setUserName] = useState('')
-  const [nickName, setNickName] = useState('')
+  const [initialized, setInitialized] = useState(false);
+  const [appUnavailable, setAppUnavailable] = useState<boolean>(false);
+  const [resCode, setResCode] = useState<number>(200);
+  const router = useRouter();
+  const [userName, setUserName] = useState("");
+  const [nickName, setNickName] = useState("");
+
   useAsyncEffect(async () => {
     if (!initialized) {
       if (!installedAppInfo) {
-        const accessToken = localStorage.getItem('token')
+        const accessToken = localStorage.getItem("token");
         if (!accessToken) {
-          router.replace('/login')
+          router.replace("/login");
         } else {
           fetch(`${process.env.NEXT_PUBLIC_BASE_API_URL}/getInfo`, {
-            method: 'GET',
+            method: "GET",
             headers: {
               Authorization: `Bearer ${accessToken}`,
             },
-          }).then(res => res.json()).then(data => {
-            if (data.code !== 200) {
-              localStorage.removeItem('token')
-              router.replace('/login')
-            } else {
-              setUserName(data.user.userName)
-              setNickName(data.user.nickName)
-            }
-          }).catch(() => {
-            setResCode(500)
-            setAppUnavailable(true)
           })
+            .then((res) => res.json())
+            .then((data) => {
+              if (data.code !== 200) {
+                localStorage.removeItem("token");
+                router.replace("/login");
+              } else {
+                setUserName(data.user.userName);
+                setNickName(data.user.nickName);
+              }
+            })
+            .catch(() => {
+              setResCode(500);
+              setAppUnavailable(true);
+            });
         }
       }
-      setInitialized(true)
+      setInitialized(true);
     }
-  }, [])
+  }, []);
 
-  if (!initialized)
-    return null
+  if (!initialized) return null;
 
-  if (appUnavailable)
-    return <AppUnavailable code={resCode} />
+  if (appUnavailable) return <AppUnavailable code={resCode} />;
 
   return (
     <ChatWithHistoryWrap
@@ -240,7 +235,7 @@ const ChatWithHistoryWrapWithCheckToken: FC<ChatWithHistoryWrapProps> = ({
       className={className}
       userStr={`${nickName}[${userName}]`}
     />
-  )
-}
+  );
+};
 
-export default ChatWithHistoryWrapWithCheckToken
+export default ChatWithHistoryWrapWithCheckToken;