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