mirror of
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git
synced 2025-10-09 19:46:37 +08:00
861 lines
26 KiB
TypeScript
861 lines
26 KiB
TypeScript
import { useDebounce, useDebouncedCallback } from "use-debounce";
|
||
import { memo, useState, useRef, useEffect, useLayoutEffect } from "react";
|
||
|
||
import SendWhiteIcon from "../icons/send-white.svg";
|
||
import BrainIcon from "../icons/brain.svg";
|
||
import RenameIcon from "../icons/rename.svg";
|
||
import ExportIcon from "../icons/share.svg";
|
||
import ReturnIcon from "../icons/return.svg";
|
||
import CopyIcon from "../icons/copy.svg";
|
||
import DownloadIcon from "../icons/download.svg";
|
||
import LoadingIcon from "../icons/three-dots.svg";
|
||
import BotIcon from "../icons/bot.svg";
|
||
import AddIcon from "../icons/add.svg";
|
||
import DeleteIcon from "../icons/delete.svg";
|
||
import MaxIcon from "../icons/max.svg";
|
||
import MinIcon from "../icons/min.svg";
|
||
|
||
import LightIcon from "../icons/light.svg";
|
||
import DarkIcon from "../icons/dark.svg";
|
||
import AutoIcon from "../icons/auto.svg";
|
||
import BottomIcon from "../icons/bottom.svg";
|
||
import StopIcon from "../icons/pause.svg";
|
||
|
||
import {
|
||
Message,
|
||
SubmitKey,
|
||
useChatStore,
|
||
BOT_HELLO,
|
||
ROLES,
|
||
createMessage,
|
||
useAccessStore,
|
||
Theme,
|
||
} from "../store";
|
||
|
||
import {
|
||
copyToClipboard,
|
||
downloadAs,
|
||
getEmojiUrl,
|
||
isMobileScreen,
|
||
selectOrCopy,
|
||
autoGrowTextArea,
|
||
} from "../utils";
|
||
|
||
import dynamic from "next/dynamic";
|
||
|
||
import { ControllerPool } from "../requests";
|
||
import { Prompt, usePromptStore } from "../store/prompt";
|
||
import Locale from "../locales";
|
||
|
||
import { IconButton } from "./button";
|
||
import styles from "./home.module.scss";
|
||
import chatStyle from "./chat.module.scss";
|
||
|
||
import { Input, Modal, showModal } from "./ui-lib";
|
||
|
||
const Markdown = dynamic(
|
||
async () => memo((await import("./markdown")).Markdown),
|
||
{
|
||
loading: () => <LoadingIcon />,
|
||
},
|
||
);
|
||
|
||
const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
|
||
loading: () => <LoadingIcon />,
|
||
});
|
||
|
||
export function Avatar(props: { role: Message["role"] }) {
|
||
const config = useChatStore((state) => state.config);
|
||
|
||
if (props.role !== "user") {
|
||
return (
|
||
<div className="no-dark">
|
||
<BotIcon className={styles["user-avtar"]} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className={styles["user-avtar"]}>
|
||
<Emoji unified={config.avatar} size={18} getEmojiUrl={getEmojiUrl} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function exportMessages(messages: Message[], topic: string) {
|
||
const mdText =
|
||
`# ${topic}\n\n` +
|
||
messages
|
||
.map((m) => {
|
||
return m.role === "user"
|
||
? `## ${Locale.Export.MessageFromYou}:\n${m.content}`
|
||
: `## ${Locale.Export.MessageFromChatGPT}:\n${m.content.trim()}`;
|
||
})
|
||
.join("\n\n");
|
||
const filename = `${topic}.md`;
|
||
|
||
showModal({
|
||
title: Locale.Export.Title,
|
||
children: (
|
||
<div className="markdown-body">
|
||
<pre className={styles["export-content"]}>{mdText}</pre>
|
||
</div>
|
||
),
|
||
actions: [
|
||
<IconButton
|
||
key="copy"
|
||
icon={<CopyIcon />}
|
||
bordered
|
||
text={Locale.Export.Copy}
|
||
onClick={() => copyToClipboard(mdText)}
|
||
/>,
|
||
<IconButton
|
||
key="download"
|
||
icon={<DownloadIcon />}
|
||
bordered
|
||
text={Locale.Export.Download}
|
||
onClick={() => downloadAs(mdText, filename)}
|
||
/>,
|
||
],
|
||
});
|
||
}
|
||
|
||
function PromptToast(props: {
|
||
showToast?: boolean;
|
||
showModal?: boolean;
|
||
setShowModal: (_: boolean) => void;
|
||
}) {
|
||
const chatStore = useChatStore();
|
||
const session = chatStore.currentSession();
|
||
const context = session.context;
|
||
|
||
const addContextPrompt = (prompt: Message) => {
|
||
chatStore.updateCurrentSession((session) => {
|
||
session.context.push(prompt);
|
||
});
|
||
};
|
||
|
||
const removeContextPrompt = (i: number) => {
|
||
chatStore.updateCurrentSession((session) => {
|
||
session.context.splice(i, 1);
|
||
});
|
||
};
|
||
|
||
const updateContextPrompt = (i: number, prompt: Message) => {
|
||
chatStore.updateCurrentSession((session) => {
|
||
session.context[i] = prompt;
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className={chatStyle["prompt-toast"]} key="prompt-toast">
|
||
{props.showToast && (
|
||
<div
|
||
className={chatStyle["prompt-toast-inner"] + " clickable"}
|
||
role="button"
|
||
onClick={() => props.setShowModal(true)}
|
||
>
|
||
<BrainIcon />
|
||
<span className={chatStyle["prompt-toast-content"]}>
|
||
{Locale.Context.Toast(context.length)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
{props.showModal && (
|
||
<div className="modal-mask">
|
||
<Modal
|
||
title={Locale.Context.Edit}
|
||
onClose={() => props.setShowModal(false)}
|
||
actions={[
|
||
<IconButton
|
||
key="reset"
|
||
icon={<CopyIcon />}
|
||
bordered
|
||
text={Locale.Memory.Reset}
|
||
onClick={() =>
|
||
confirm(Locale.Memory.ResetConfirm) &&
|
||
chatStore.resetSession()
|
||
}
|
||
/>,
|
||
<IconButton
|
||
key="copy"
|
||
icon={<CopyIcon />}
|
||
bordered
|
||
text={Locale.Memory.Copy}
|
||
onClick={() => copyToClipboard(session.memoryPrompt)}
|
||
/>,
|
||
]}
|
||
>
|
||
<>
|
||
<div className={chatStyle["context-prompt"]}>
|
||
{context.map((c, i) => (
|
||
<div className={chatStyle["context-prompt-row"]} key={i}>
|
||
<select
|
||
value={c.role}
|
||
className={chatStyle["context-role"]}
|
||
onChange={(e) =>
|
||
updateContextPrompt(i, {
|
||
...c,
|
||
role: e.target.value as any,
|
||
})
|
||
}
|
||
>
|
||
{ROLES.map((r) => (
|
||
<option key={r} value={r}>
|
||
{r}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<Input
|
||
value={c.content}
|
||
type="text"
|
||
className={chatStyle["context-content"]}
|
||
rows={1}
|
||
onInput={(e) =>
|
||
updateContextPrompt(i, {
|
||
...c,
|
||
content: e.currentTarget.value as any,
|
||
})
|
||
}
|
||
/>
|
||
<IconButton
|
||
icon={<DeleteIcon />}
|
||
className={chatStyle["context-delete-button"]}
|
||
onClick={() => removeContextPrompt(i)}
|
||
bordered
|
||
/>
|
||
</div>
|
||
))}
|
||
|
||
<div className={chatStyle["context-prompt-row"]}>
|
||
<IconButton
|
||
icon={<AddIcon />}
|
||
text={Locale.Context.Add}
|
||
bordered
|
||
className={chatStyle["context-prompt-button"]}
|
||
onClick={() =>
|
||
addContextPrompt({
|
||
role: "system",
|
||
content: "",
|
||
date: "",
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className={chatStyle["memory-prompt"]}>
|
||
<div className={chatStyle["memory-prompt-title"]}>
|
||
<span>
|
||
{Locale.Memory.Title} ({session.lastSummarizeIndex} of{" "}
|
||
{session.messages.length})
|
||
</span>
|
||
|
||
<label className={chatStyle["memory-prompt-action"]}>
|
||
{Locale.Memory.Send}
|
||
<input
|
||
type="checkbox"
|
||
checked={session.sendMemory}
|
||
onChange={() =>
|
||
chatStore.updateCurrentSession(
|
||
(session) =>
|
||
(session.sendMemory = !session.sendMemory),
|
||
)
|
||
}
|
||
></input>
|
||
</label>
|
||
</div>
|
||
<div className={chatStyle["memory-prompt-content"]}>
|
||
{session.memoryPrompt || Locale.Memory.EmptyContent}
|
||
</div>
|
||
</div>
|
||
</>
|
||
</Modal>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function useSubmitHandler() {
|
||
const config = useChatStore((state) => state.config);
|
||
const submitKey = config.submitKey;
|
||
|
||
const shouldSubmit = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||
if (e.key !== "Enter") return false;
|
||
if (e.key === "Enter" && e.nativeEvent.isComposing) return false;
|
||
return (
|
||
(config.submitKey === SubmitKey.AltEnter && e.altKey) ||
|
||
(config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
|
||
(config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
|
||
(config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
|
||
(config.submitKey === SubmitKey.Enter &&
|
||
!e.altKey &&
|
||
!e.ctrlKey &&
|
||
!e.shiftKey &&
|
||
!e.metaKey)
|
||
);
|
||
};
|
||
|
||
return {
|
||
submitKey,
|
||
shouldSubmit,
|
||
};
|
||
}
|
||
|
||
export function PromptHints(props: {
|
||
prompts: Prompt[];
|
||
onPromptSelect: (prompt: Prompt) => void;
|
||
}) {
|
||
if (props.prompts.length === 0) return null;
|
||
|
||
return (
|
||
<div className={styles["prompt-hints"]}>
|
||
{props.prompts.map((prompt, i) => (
|
||
<div
|
||
className={styles["prompt-hint"]}
|
||
key={prompt.title + i.toString()}
|
||
onClick={() => props.onPromptSelect(prompt)}
|
||
>
|
||
<div className={styles["hint-title"]}>{prompt.title}</div>
|
||
<div className={styles["hint-content"]}>{prompt.content}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|
||
function useScrollToBottom() {
|
||
// for auto-scroll
|
||
const scrollRef = useRef<HTMLDivElement>(null);
|
||
const [autoScroll, setAutoScroll] = useState(true);
|
||
const scrollToBottom = () => {
|
||
const dom = scrollRef.current;
|
||
if (dom) {
|
||
setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1);
|
||
}
|
||
};
|
||
|
||
// auto scroll
|
||
useLayoutEffect(() => {
|
||
autoScroll && scrollToBottom();
|
||
});
|
||
|
||
return {
|
||
scrollRef,
|
||
autoScroll,
|
||
setAutoScroll,
|
||
scrollToBottom,
|
||
};
|
||
}
|
||
|
||
export function ChatActions(props: {
|
||
showPromptModal: () => void;
|
||
scrollToBottom: () => void;
|
||
hitBottom: boolean;
|
||
}) {
|
||
const chatStore = useChatStore();
|
||
|
||
// switch themes
|
||
const theme = chatStore.config.theme;
|
||
function nextTheme() {
|
||
const themes = [Theme.Auto, Theme.Light, Theme.Dark];
|
||
const themeIndex = themes.indexOf(theme);
|
||
const nextIndex = (themeIndex + 1) % themes.length;
|
||
const nextTheme = themes[nextIndex];
|
||
chatStore.updateConfig((config) => (config.theme = nextTheme));
|
||
}
|
||
|
||
// stop all responses
|
||
const couldStop = ControllerPool.hasPending();
|
||
const stopAll = () => ControllerPool.stopAll();
|
||
|
||
return (
|
||
<div className={chatStyle["chat-input-actions"]}>
|
||
{couldStop && (
|
||
<div
|
||
className={`${chatStyle["chat-input-action"]} clickable`}
|
||
onClick={stopAll}
|
||
>
|
||
<StopIcon />
|
||
</div>
|
||
)}
|
||
{!props.hitBottom && (
|
||
<div
|
||
className={`${chatStyle["chat-input-action"]} clickable`}
|
||
onClick={props.scrollToBottom}
|
||
>
|
||
<BottomIcon />
|
||
</div>
|
||
)}
|
||
{props.hitBottom && (
|
||
<div
|
||
className={`${chatStyle["chat-input-action"]} clickable`}
|
||
onClick={props.showPromptModal}
|
||
>
|
||
<BrainIcon />
|
||
</div>
|
||
)}
|
||
|
||
<div
|
||
className={`${chatStyle["chat-input-action"]} clickable`}
|
||
onClick={nextTheme}
|
||
>
|
||
{theme === Theme.Auto ? (
|
||
<AutoIcon />
|
||
) : theme === Theme.Light ? (
|
||
<LightIcon />
|
||
) : theme === Theme.Dark ? (
|
||
<DarkIcon />
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function Chat(props: {
|
||
showSideBar?: () => void;
|
||
sideBarShowing?: boolean;
|
||
}) {
|
||
type RenderMessage = Message & { preview?: boolean };
|
||
|
||
const chatStore = useChatStore();
|
||
const [session, sessionIndex] = useChatStore((state) => [
|
||
state.currentSession(),
|
||
state.currentSessionIndex,
|
||
]);
|
||
const fontSize = useChatStore((state) => state.config.fontSize);
|
||
|
||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||
const [userInput, setUserInput] = useState("");
|
||
const [beforeInput, setBeforeInput] = useState("");
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const { submitKey, shouldSubmit } = useSubmitHandler();
|
||
const { scrollRef, setAutoScroll, scrollToBottom } = useScrollToBottom();
|
||
const [hitBottom, setHitBottom] = useState(false);
|
||
|
||
const onChatBodyScroll = (e: HTMLElement) => {
|
||
const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20;
|
||
setHitBottom(isTouchBottom);
|
||
};
|
||
|
||
// prompt hints
|
||
const promptStore = usePromptStore();
|
||
const [promptHints, setPromptHints] = useState<Prompt[]>([]);
|
||
const onSearch = useDebouncedCallback(
|
||
(text: string) => {
|
||
setPromptHints(promptStore.search(text));
|
||
},
|
||
100,
|
||
{ leading: true, trailing: true },
|
||
);
|
||
|
||
const onPromptSelect = (prompt: Prompt) => {
|
||
setUserInput(prompt.content);
|
||
setPromptHints([]);
|
||
inputRef.current?.focus();
|
||
};
|
||
|
||
// auto grow input
|
||
const [inputRows, setInputRows] = useState(2);
|
||
const measure = useDebouncedCallback(
|
||
() => {
|
||
const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
|
||
const inputRows = Math.min(
|
||
5,
|
||
Math.max(2 + Number(!isMobileScreen()), rows),
|
||
);
|
||
setInputRows(inputRows);
|
||
},
|
||
100,
|
||
{
|
||
leading: true,
|
||
trailing: true,
|
||
},
|
||
);
|
||
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
useEffect(measure, [userInput]);
|
||
|
||
// only search prompts when user input is short
|
||
const SEARCH_TEXT_LIMIT = 30;
|
||
const onInput = (text: string) => {
|
||
setUserInput(text);
|
||
const n = text.trim().length;
|
||
|
||
// clear search results
|
||
if (n === 0) {
|
||
setPromptHints([]);
|
||
} else if (!chatStore.config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
|
||
// check if need to trigger auto completion
|
||
if (text.startsWith("/")) {
|
||
let searchText = text.slice(1);
|
||
onSearch(searchText);
|
||
}
|
||
}
|
||
};
|
||
|
||
// submit user input
|
||
const onUserSubmit = () => {
|
||
if (userInput.length <= 0) return;
|
||
setIsLoading(true);
|
||
chatStore.onUserInput(userInput).then(() => setIsLoading(false));
|
||
setBeforeInput(userInput);
|
||
setUserInput("");
|
||
setPromptHints([]);
|
||
if (!isMobileScreen()) inputRef.current?.focus();
|
||
setAutoScroll(true);
|
||
};
|
||
|
||
// stop response
|
||
const onUserStop = (messageId: number) => {
|
||
ControllerPool.stop(sessionIndex, messageId);
|
||
};
|
||
|
||
// check if should send message
|
||
const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||
// if ArrowUp and no userInput
|
||
if (e.key === "ArrowUp" && userInput.length <= 0) {
|
||
setUserInput(beforeInput);
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
if (shouldSubmit(e)) {
|
||
onUserSubmit();
|
||
e.preventDefault();
|
||
}
|
||
};
|
||
const onRightClick = (e: any, message: Message) => {
|
||
// auto fill user input
|
||
if (message.role === "user") {
|
||
setUserInput(message.content);
|
||
}
|
||
|
||
// copy to clipboard
|
||
if (selectOrCopy(e.currentTarget, message.content)) {
|
||
e.preventDefault();
|
||
}
|
||
};
|
||
|
||
const findLastUesrIndex = (messageId: number) => {
|
||
// find last user input message and resend
|
||
let lastUserMessageIndex: number | null = null;
|
||
for (let i = 0; i < session.messages.length; i += 1) {
|
||
const message = session.messages[i];
|
||
if (message.id === messageId) {
|
||
break;
|
||
}
|
||
if (message.role === "user") {
|
||
lastUserMessageIndex = i;
|
||
}
|
||
}
|
||
|
||
return lastUserMessageIndex;
|
||
};
|
||
|
||
const deleteMessage = (userIndex: number) => {
|
||
chatStore.updateCurrentSession((session) =>
|
||
session.messages.splice(userIndex, 2),
|
||
);
|
||
};
|
||
|
||
const onDelete = (botMessageId: number) => {
|
||
const userIndex = findLastUesrIndex(botMessageId);
|
||
if (userIndex === null) return;
|
||
deleteMessage(userIndex);
|
||
};
|
||
|
||
const onResend = (botMessageId: number) => {
|
||
// find last user input message and resend
|
||
const userIndex = findLastUesrIndex(botMessageId);
|
||
if (userIndex === null) return;
|
||
|
||
setIsLoading(true);
|
||
chatStore
|
||
.onUserInput(session.messages[userIndex].content)
|
||
.then(() => setIsLoading(false));
|
||
deleteMessage(userIndex);
|
||
inputRef.current?.focus();
|
||
};
|
||
|
||
const config = useChatStore((state) => state.config);
|
||
|
||
const context: RenderMessage[] = session.context.slice();
|
||
|
||
const accessStore = useAccessStore();
|
||
const [dialog, setDialog] = useState(false)
|
||
const [dialogValue, setDialogValue] = useState('')
|
||
|
||
if (
|
||
context.length === 0 &&
|
||
session.messages.at(0)?.content !== BOT_HELLO.content
|
||
) {
|
||
const copiedHello = Object.assign({}, BOT_HELLO);
|
||
if (!accessStore.isAuthorized()) {
|
||
setDialog(true)
|
||
// copiedHello.content = Locale.Error.Unauthorized;
|
||
}
|
||
context.push(copiedHello);
|
||
}
|
||
const handleClick = () =>{
|
||
accessStore.updateToken(dialogValue);
|
||
setDialog(false)
|
||
// const copiedHello = Object.assign({}, BOT_HELLO);
|
||
// context.push(copiedHello);
|
||
}
|
||
|
||
// preview messages
|
||
const messages = context
|
||
.concat(session.messages as RenderMessage[])
|
||
.concat(
|
||
isLoading
|
||
? [
|
||
{
|
||
...createMessage({
|
||
role: "assistant",
|
||
content: "……",
|
||
}),
|
||
preview: true,
|
||
},
|
||
]
|
||
: [],
|
||
)
|
||
.concat(
|
||
userInput.length > 0 && config.sendPreviewBubble
|
||
? [
|
||
{
|
||
...createMessage({
|
||
role: "user",
|
||
content: userInput,
|
||
}),
|
||
preview: true,
|
||
},
|
||
]
|
||
: [],
|
||
);
|
||
|
||
const [showPromptModal, setShowPromptModal] = useState(false);
|
||
|
||
const renameSession = () => {
|
||
const newTopic = prompt(Locale.Chat.Rename, session.topic);
|
||
if (newTopic && newTopic !== session.topic) {
|
||
chatStore.updateCurrentSession((session) => (session.topic = newTopic!));
|
||
}
|
||
};
|
||
|
||
// Auto focus
|
||
useEffect(() => {
|
||
if (props.sideBarShowing && isMobileScreen()) return;
|
||
inputRef.current?.focus();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
return (
|
||
<div className={styles.chat} key={session.id}>
|
||
<div className={styles["window-header"]}>
|
||
<div className={styles["window-header-title"]}>
|
||
<div
|
||
className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`}
|
||
onClickCapture={renameSession}
|
||
>
|
||
{session.topic}
|
||
</div>
|
||
<div className={styles["window-header-sub-title"]}>
|
||
{Locale.Chat.SubTitle(session.messages.length)}
|
||
</div>
|
||
</div>
|
||
<div className={styles["window-actions"]}>
|
||
<div className={styles["window-action-button"] + " " + styles.mobile}>
|
||
<IconButton
|
||
icon={<ReturnIcon />}
|
||
bordered
|
||
title={Locale.Chat.Actions.ChatList}
|
||
onClick={props?.showSideBar}
|
||
/>
|
||
</div>
|
||
<div className={styles["window-action-button"]}>
|
||
<IconButton
|
||
icon={<RenameIcon />}
|
||
bordered
|
||
onClick={renameSession}
|
||
/>
|
||
</div>
|
||
<div className={styles["window-action-button"]}>
|
||
<IconButton
|
||
icon={<ExportIcon />}
|
||
bordered
|
||
title={Locale.Chat.Actions.Export}
|
||
onClick={() => {
|
||
exportMessages(
|
||
session.messages.filter((msg) => !msg.isError),
|
||
session.topic,
|
||
);
|
||
}}
|
||
/>
|
||
</div>
|
||
{!isMobileScreen() && (
|
||
<div className={styles["window-action-button"]}>
|
||
<IconButton
|
||
icon={chatStore.config.tightBorder ? <MinIcon /> : <MaxIcon />}
|
||
bordered
|
||
onClick={() => {
|
||
chatStore.updateConfig(
|
||
(config) => (config.tightBorder = !config.tightBorder),
|
||
);
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<PromptToast
|
||
showToast={!hitBottom}
|
||
showModal={showPromptModal}
|
||
setShowModal={setShowPromptModal}
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
className={styles["chat-body"]}
|
||
ref={scrollRef}
|
||
onScroll={(e) => onChatBodyScroll(e.currentTarget)}
|
||
onWheel={(e) => setAutoScroll(hitBottom && e.deltaY > 0)}
|
||
onTouchStart={() => {
|
||
inputRef.current?.blur();
|
||
setAutoScroll(false);
|
||
}}
|
||
>
|
||
{messages.map((message, i) => {
|
||
const isUser = message.role === "user";
|
||
|
||
return (
|
||
<div
|
||
key={i}
|
||
className={
|
||
isUser ? styles["chat-message-user"] : styles["chat-message"]
|
||
}
|
||
>
|
||
<div className={styles["chat-message-container"]}>
|
||
<div className={styles["chat-message-avatar"]}>
|
||
<Avatar role={message.role} />
|
||
</div>
|
||
{(message.preview || message.streaming) && (
|
||
<div className={styles["chat-message-status"]}>
|
||
{Locale.Chat.Typing}
|
||
</div>
|
||
)}
|
||
<div className={styles["chat-message-item"]}>
|
||
{!isUser &&
|
||
!(message.preview || message.content.length === 0) && (
|
||
<div className={styles["chat-message-top-actions"]}>
|
||
{message.streaming ? (
|
||
<div
|
||
className={styles["chat-message-top-action"]}
|
||
onClick={() => onUserStop(message.id ?? i)}
|
||
>
|
||
{Locale.Chat.Actions.Stop}
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div
|
||
className={styles["chat-message-top-action"]}
|
||
onClick={() => onDelete(message.id ?? i)}
|
||
>
|
||
{Locale.Chat.Actions.Delete}
|
||
</div>
|
||
<div
|
||
className={styles["chat-message-top-action"]}
|
||
onClick={() => onResend(message.id ?? i)}
|
||
>
|
||
{Locale.Chat.Actions.Retry}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<div
|
||
className={styles["chat-message-top-action"]}
|
||
onClick={() => copyToClipboard(message.content)}
|
||
>
|
||
{Locale.Chat.Actions.Copy}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<Markdown
|
||
content={message.content}
|
||
loading={
|
||
(message.preview || message.content.length === 0) &&
|
||
!isUser
|
||
}
|
||
onContextMenu={(e) => onRightClick(e, message)}
|
||
onDoubleClickCapture={() => {
|
||
if (!isMobileScreen()) return;
|
||
setUserInput(message.content);
|
||
}}
|
||
fontSize={fontSize}
|
||
parentRef={scrollRef}
|
||
/>
|
||
</div>
|
||
{!isUser && !message.preview && (
|
||
<div className={styles["chat-message-actions"]}>
|
||
<div className={styles["chat-message-action-date"]}>
|
||
{message.date.toLocaleString()}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<div className={styles["chat-input-panel"]}>
|
||
<PromptHints prompts={promptHints} onPromptSelect={onPromptSelect} />
|
||
|
||
<ChatActions
|
||
showPromptModal={() => setShowPromptModal(true)}
|
||
scrollToBottom={scrollToBottom}
|
||
hitBottom={hitBottom}
|
||
/>
|
||
<div className={styles["chat-input-panel-inner"]}>
|
||
<textarea
|
||
ref={inputRef}
|
||
className={styles["chat-input"]}
|
||
placeholder={Locale.Chat.Input(submitKey)}
|
||
onInput={(e) => onInput(e.currentTarget.value)}
|
||
value={userInput}
|
||
onKeyDown={onInputKeyDown}
|
||
onFocus={() => setAutoScroll(true)}
|
||
onBlur={() => {
|
||
setAutoScroll(false);
|
||
setTimeout(() => setPromptHints([]), 500);
|
||
}}
|
||
autoFocus={!props?.sideBarShowing}
|
||
rows={inputRows}
|
||
/>
|
||
<IconButton
|
||
icon={<SendWhiteIcon />}
|
||
text={Locale.Chat.Send}
|
||
className={styles["chat-input-send"]}
|
||
noDark
|
||
onClick={onUserSubmit}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{dialog ?
|
||
<div className="dialog">
|
||
<div className="dialog-modal">
|
||
<div className="title">认证过期，请重新输入ACCESS-CODE</div>
|
||
<div className="content-input">
|
||
<input value={dialogValue} type="text" placeholder='请输入ACCESS-CODE' onChange={(e) => {
|
||
accessStore.updateToken(e.currentTarget.value);
|
||
setDialogValue(e.currentTarget.value);
|
||
}} />
|
||
</div>
|
||
<button style="margin-top: 30px" onClick={handleClick}>确定</button>
|
||
</div>
|
||
</div> : ''}
|
||
|
||
</div>
|
||
);
|
||
}
|