|
|
@@ -109,8 +109,8 @@ import { prettyObject } from "../utils/format";
|
|
|
import { ExportMessageModal } from "./exporter";
|
|
|
import { getClientConfig } from "../config/client";
|
|
|
import { useAllModels } from "../utils/hooks";
|
|
|
-import { Button, message, Popover, Select } from 'antd';
|
|
|
-import { RightOutlined } from '@ant-design/icons';
|
|
|
+import { Button, message, Popover, Select, Skeleton, Space } from 'antd';
|
|
|
+import { RightOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
|
|
import api from "@/app/api/api";
|
|
|
|
|
|
const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
|
|
|
@@ -512,6 +512,7 @@ function useScrollToBottom(
|
|
|
}
|
|
|
|
|
|
export function ChatActions(props: {
|
|
|
+ sendStatus: boolean,
|
|
|
setUserInput: (value: string) => void;
|
|
|
doSubmit: (userInput: string) => void;
|
|
|
uploadImage: () => void;
|
|
|
@@ -576,7 +577,6 @@ export function ChatActions(props: {
|
|
|
|
|
|
type GuessList = string[]
|
|
|
const [guessList, setGuessList] = useState<GuessList>([]);
|
|
|
-
|
|
|
const [showSizeSelector, setShowSizeSelector] = useState(false);
|
|
|
const dalle3Sizes: DalleSize[] = ["1024x1024", "1792x1024", "1024x1792"];
|
|
|
const currentSize =
|
|
|
@@ -636,37 +636,47 @@ export function ChatActions(props: {
|
|
|
|
|
|
return (
|
|
|
<div className={styles["chat-input-actions"]}>
|
|
|
- {guessList.length > 0 && (
|
|
|
+ {
|
|
|
+ props.sendStatus &&
|
|
|
<div style={{ color: '#8096ca', fontSize: 13 }}>
|
|
|
<div>
|
|
|
你还可以尝试提问:
|
|
|
</div>
|
|
|
- <div style={{ display: 'flex', marginTop: 10, flexWrap: 'wrap' }}>
|
|
|
- {
|
|
|
- guessList.map((item, index) => {
|
|
|
- return (
|
|
|
- <div
|
|
|
- style={{
|
|
|
- padding: '5px 10px',
|
|
|
- background: '#f2f4f8',
|
|
|
- borderRadius: 5,
|
|
|
- margin: '0 10px 10px 0',
|
|
|
- cursor: 'pointer',
|
|
|
- }}
|
|
|
- onClick={() => {
|
|
|
- props.setUserInput(item);
|
|
|
- props.doSubmit(item)
|
|
|
- }}
|
|
|
- key={index}
|
|
|
- >
|
|
|
- {item}
|
|
|
- </div>
|
|
|
- )
|
|
|
- })
|
|
|
- }
|
|
|
- </div>
|
|
|
+ {
|
|
|
+ guessList.length === 0 ?
|
|
|
+ <Space style={{ margin: '10px 0' }}>
|
|
|
+ <Skeleton.Button size="small" active={true} />
|
|
|
+ <Skeleton.Button size="small" active={true} />
|
|
|
+ <Skeleton.Button size="small" active={true} />
|
|
|
+ </Space>
|
|
|
+ :
|
|
|
+ <div style={{ display: 'flex', marginTop: 10, flexWrap: 'wrap' }}>
|
|
|
+ {
|
|
|
+ guessList.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ style={{
|
|
|
+ padding: '5px 10px',
|
|
|
+ background: '#f2f4f8',
|
|
|
+ borderRadius: 5,
|
|
|
+ margin: '0 10px 10px 0',
|
|
|
+ cursor: 'pointer',
|
|
|
+ }}
|
|
|
+ onClick={() => {
|
|
|
+ props.setUserInput(item);
|
|
|
+ props.doSubmit(item)
|
|
|
+ }}
|
|
|
+ key={index}
|
|
|
+ >
|
|
|
+ {item}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ }
|
|
|
</div>
|
|
|
- )}
|
|
|
+ }
|
|
|
{/* {couldStop && (
|
|
|
<ChatAction
|
|
|
onClick={stopAll}
|
|
|
@@ -931,6 +941,7 @@ function _Chat() {
|
|
|
const inputRef = useRef<HTMLTextAreaElement>(null);
|
|
|
const [userInput, setUserInput] = useState("");
|
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
+ const [sendStatus, setSendStatus] = useState(false);
|
|
|
const { submitKey, shouldSubmit } = useSubmitHandler();
|
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
const isScrolledToBottom = scrollRef?.current
|
|
|
@@ -1109,6 +1120,7 @@ function _Chat() {
|
|
|
setPromptHints([]);
|
|
|
if (!isMobileScreen) inputRef.current?.focus();
|
|
|
setAutoScroll(true);
|
|
|
+ setSendStatus(true);
|
|
|
};
|
|
|
|
|
|
const onPromptSelect = (prompt: RenderPrompt) => {
|
|
|
@@ -1570,6 +1582,13 @@ function _Chat() {
|
|
|
chatStore.updateCurrentSession((values) => {
|
|
|
values.appId = value;
|
|
|
});
|
|
|
+ useChatStore.setState({
|
|
|
+ message: {
|
|
|
+ content: '',
|
|
|
+ role: 'assistant',
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setSendStatus(false);
|
|
|
}}
|
|
|
/>
|
|
|
:
|
|
|
@@ -1782,11 +1801,21 @@ function _Chat() {
|
|
|
</div>
|
|
|
)} */}
|
|
|
</div>
|
|
|
- {showTyping && (
|
|
|
- <div className={styles["chat-message-status"]}>
|
|
|
- {Locale.Chat.Typing}
|
|
|
- </div>
|
|
|
- )}
|
|
|
+ {
|
|
|
+ showTyping ?
|
|
|
+ <div className={styles["chat-message-status"]}>
|
|
|
+ {isUser ? '正在输入…' : '正在查询文档…'}
|
|
|
+ </div>
|
|
|
+ :
|
|
|
+ <div className={styles["chat-message-status"]}>
|
|
|
+ {
|
|
|
+ message.role === 'assistant' && messages.length - 1 === i &&
|
|
|
+ <div>
|
|
|
+ <CheckCircleOutlined /> 文档搜索成功
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ }
|
|
|
<div className={styles["chat-message-item"]}>
|
|
|
<Markdown
|
|
|
key={message.streaming ? "loading" : "done"}
|
|
|
@@ -1902,6 +1931,7 @@ function _Chat() {
|
|
|
<div className={styles["chat-input-panel"]}>
|
|
|
{/* <PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} /> */}
|
|
|
<ChatActions
|
|
|
+ sendStatus={sendStatus}
|
|
|
setUserInput={setUserInput}
|
|
|
doSubmit={doSubmit}
|
|
|
uploadImage={uploadImage}
|
|
|
@@ -1980,7 +2010,9 @@ function _Chat() {
|
|
|
/>
|
|
|
</label>
|
|
|
</div>
|
|
|
-
|
|
|
+ <div style={{ paddingBottom: 20, textAlign: 'center', color: '#888888', fontSize: 12 }}>
|
|
|
+ 内容由AI生成,仅供参考
|
|
|
+ </div>
|
|
|
{showExport && (
|
|
|
<ExportMessageModal onClose={() => setShowExport(false)} />
|
|
|
)}
|