{isAuth ? (
<>
@@ -153,14 +154,19 @@ function Screen() {
<>
-
- } />
- } />
- } />
- } />
- } />
-
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
)}
diff --git a/app/containers/Chat/ChatAction.tsx b/app/containers/Chat/ChatAction.tsx
new file mode 100644
index 000000000..25c69954c
--- /dev/null
+++ b/app/containers/Chat/ChatAction.tsx
@@ -0,0 +1,52 @@
+import { useRef, useState } from "react";
+
+import styles from "./index.module.scss";
+
+export default function ChatAction(props: {
+ text: string;
+ icon: JSX.Element;
+ onClick: () => void;
+}) {
+ const iconRef = useRef
(null);
+ const textRef = useRef(null);
+ const [width, setWidth] = useState({
+ full: 16,
+ icon: 16,
+ });
+
+ function updateWidth() {
+ if (!iconRef.current || !textRef.current) return;
+ const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width;
+ const textWidth = getWidth(textRef.current);
+ const iconWidth = getWidth(iconRef.current);
+ setWidth({
+ full: textWidth + iconWidth,
+ icon: iconWidth,
+ });
+ }
+
+ return (
+ {
+ props.onClick();
+ setTimeout(updateWidth, 1);
+ }}
+ onMouseEnter={updateWidth}
+ onTouchStart={updateWidth}
+ style={
+ {
+ "--icon-width": `${width.icon}px`,
+ "--full-width": `${width.full}px`,
+ } as React.CSSProperties
+ }
+ >
+
+ {props.icon}
+
+
+ {props.text}
+
+
+ {couldStop && (
+
}
+ />
+ )}
+ {!props.hitBottom && (
+
}
+ />
+ )}
+ {props.hitBottom && (
+
}
+ />
+ )}
+
+ {showUploadImage && (
+
:
}
+ />
+ )}
+
+ {theme === Theme.Auto ? (
+
+ ) : theme === Theme.Light ? (
+
+ ) : theme === Theme.Dark ? (
+
+ ) : null}
+
+ }
+ />
+
+ }
+ />
+
+ {
+ navigate(Path.Masks);
+ }}
+ text={Locale.Chat.InputActions.Masks}
+ icon={}
+ />
+
+ }
+ onClick={() => {
+ chatStore.updateCurrentSession((session) => {
+ if (session.clearContextIndex === session.messages.length) {
+ session.clearContextIndex = undefined;
+ } else {
+ session.clearContextIndex = session.messages.length;
+ session.memoryPrompt = ""; // will clear memory
+ }
+ });
+ }}
+ />
+
+ setShowModelSelector(true)}
+ text={currentModel}
+ icon={}
+ />
+
+ {showModelSelector && (
+ ({
+ title: m.displayName,
+ value: m.name,
+ }))}
+ onClose={() => setShowModelSelector(false)}
+ onSelection={(s) => {
+ if (s.length === 0) return;
+ chatStore.updateCurrentSession((session) => {
+ session.mask.modelConfig.model = s[0] as ModelType;
+ session.mask.syncGlobalConfig = false;
+ });
+ showToast(s[0]);
+ }}
+ />
+ )}
+
+ {isMobileScreen && (
+
+
+ }
+ bordered
+ title={Locale.Chat.Actions.ChatList}
+ onClick={() => navigate(Path.Home)}
+ />
+
+
+ )}
+
+
+
setIsEditingMessage(true)}
+ >
+ {!session.topic ? DEFAULT_TOPIC : session.topic}
+
+
+ {Locale.Chat.SubTitle(session.messages.length)}
+
+
+
+ {!isMobileScreen && (
+
+ }
+ bordered
+ onClick={() => setIsEditingMessage(true)}
+ />
+
+ )}
+
+ }
+ bordered
+ title={Locale.Chat.Actions.Export}
+ onClick={() => {
+ setShowExport(true);
+ }}
+ />
+
+
+
+
+
+ );
+}
+
+// only search prompts when user input is short
+const SEARCH_TEXT_LIMIT = 30;
+
+export default forwardRef(
+ function ChatInputPanel(props, ref) {
+ const {
+ attachImages,
+ inputRef,
+ setAttachImages,
+ userInput,
+ isMobileScreen,
+ setUserInput,
+ setIsLoading,
+ setShowPromptModal,
+ renderMessages,
+ scrollRef,
+ _setMsgRenderIndex,
+ hitBottom,
+ inputRows,
+ } = props;
+
+ const [uploading, setUploading] = useState(false);
+ const [promptHints, setPromptHints] = useState([]);
+
+ const chatStore = useChatStore();
+ const navigate = useNavigate();
+ const config = useAppConfig();
+
+ const { uploadImage } = useUploadImage(attachImages, {
+ emitImages: setAttachImages,
+ setUploading,
+ });
+ const { submitKey, shouldSubmit } = useSubmitHandler();
+
+ const autoFocus = !isMobileScreen; // wont auto focus on mobile screen
+
+ const isScrolledToBottom = scrollRef?.current
+ ? Math.abs(
+ scrollRef.current.scrollHeight -
+ (scrollRef.current.scrollTop + scrollRef.current.clientHeight),
+ ) <= 1
+ : false;
+
+ const { setAutoScroll, scrollDomToBottom } = useScrollToBottom(
+ scrollRef,
+ isScrolledToBottom,
+ );
+
+ // chat commands shortcuts
+ const chatCommands = useChatCommand({
+ new: () => chatStore.newSession(),
+ newm: () => navigate(Path.NewChat),
+ prev: () => chatStore.nextSession(-1),
+ next: () => chatStore.nextSession(1),
+ clear: () =>
+ chatStore.updateCurrentSession(
+ (session) => (session.clearContextIndex = session.messages.length),
+ ),
+ del: () => chatStore.deleteSession(chatStore.currentSessionIndex),
+ });
+
+ // prompt hints
+ const promptStore = usePromptStore();
+ const onSearch = useDebouncedCallback(
+ (text: string) => {
+ const matchedPrompts = promptStore.search(text);
+ setPromptHints(matchedPrompts);
+ },
+ 100,
+ { leading: true, trailing: true },
+ );
+
+ // check if should send message
+ const onInputKeyDown = (e: React.KeyboardEvent) => {
+ // if ArrowUp and no userInput, fill with last input
+ if (
+ e.key === "ArrowUp" &&
+ userInput.length <= 0 &&
+ !(e.metaKey || e.altKey || e.ctrlKey)
+ ) {
+ setUserInput(localStorage.getItem(LAST_INPUT_KEY) ?? "");
+ e.preventDefault();
+ return;
+ }
+ if (shouldSubmit(e) && promptHints.length === 0) {
+ doSubmit(userInput);
+ e.preventDefault();
+ }
+ };
+
+ const onPromptSelect = (prompt: RenderPompt) => {
+ setTimeout(() => {
+ setPromptHints([]);
+
+ const matchedChatCommand = chatCommands.match(prompt.content);
+ if (matchedChatCommand.matched) {
+ // if user is selecting a chat command, just trigger it
+ matchedChatCommand.invoke();
+ setUserInput("");
+ } else {
+ // or fill the prompt
+ setUserInput(prompt.content);
+ }
+ inputRef.current?.focus();
+ }, 30);
+ };
+
+ const doSubmit = (userInput: string) => {
+ if (userInput.trim() === "") return;
+ const matchCommand = chatCommands.match(userInput);
+ if (matchCommand.matched) {
+ setUserInput("");
+ setPromptHints([]);
+ matchCommand.invoke();
+ return;
+ }
+ setIsLoading(true);
+ chatStore
+ .onUserInput(userInput, attachImages)
+ .then(() => setIsLoading(false));
+ setAttachImages([]);
+ localStorage.setItem(LAST_INPUT_KEY, userInput);
+ setUserInput("");
+ setPromptHints([]);
+ if (!isMobileScreen) inputRef.current?.focus();
+ setAutoScroll(true);
+ };
+
+ useImperativeHandle(ref, () => ({
+ setUploading,
+ doSubmit,
+ setAutoScroll,
+ setMsgRenderIndex,
+ }));
+
+ const onInput = (text: string) => {
+ setUserInput(text);
+ const n = text.trim().length;
+
+ // clear search results
+ if (n === 0) {
+ setPromptHints([]);
+ } else if (text.startsWith(ChatCommandPrefix)) {
+ setPromptHints(chatCommands.search(text));
+ } else if (!config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
+ // check if need to trigger auto completion
+ if (text.startsWith("/")) {
+ let searchText = text.slice(1);
+ onSearch(searchText);
+ }
+ }
+ };
+
+ function setMsgRenderIndex(newIndex: number) {
+ newIndex = Math.min(renderMessages.length - CHAT_PAGE_SIZE, newIndex);
+ newIndex = Math.max(0, newIndex);
+ _setMsgRenderIndex(newIndex);
+ }
+
+ function scrollToBottom() {
+ setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
+ scrollDomToBottom();
+ }
+
+ const { handlePaste } = usePaste(attachImages, {
+ emitImages: setAttachImages,
+ setUploading,
+ });
+
+ return (
+
+
+
+
setShowPromptModal(true)}
+ scrollToBottom={scrollToBottom}
+ hitBottom={hitBottom}
+ uploading={uploading}
+ showPromptHints={() => {
+ // Click again to close
+ if (promptHints.length > 0) {
+ setPromptHints([]);
+ return;
+ }
+
+ inputRef.current?.focus();
+ setUserInput("/");
+ onSearch("");
+ }}
+ />
+