diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index 7560d0305..09820c7e0 100644 --- a/app/components/chat.module.scss +++ b/app/components/chat.module.scss @@ -751,3 +751,9 @@ } } } + +.chat-input-actions-start { + display: flex; + flex-wrap: wrap; + gap: 4px; +} diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 9990a359e..5c5fd902b 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -19,13 +19,10 @@ import SpeakIcon from "../icons/speak.svg"; import SpeakStopIcon from "../icons/speak-stop.svg"; import LoadingIcon from "../icons/three-dots.svg"; import LoadingButtonIcon from "../icons/loading.svg"; -import PromptIcon from "../icons/prompt.svg"; -import MaskIcon from "../icons/mask.svg"; import MaxIcon from "../icons/max.svg"; import MinIcon from "../icons/min.svg"; import ResetIcon from "../icons/reload.svg"; import BreakIcon from "../icons/break.svg"; -import SettingsIcon from "../icons/chat-settings.svg"; import DeleteIcon from "../icons/clear.svg"; import PinIcon from "../icons/pin.svg"; import EditIcon from "../icons/rename.svg"; @@ -34,19 +31,8 @@ import CloseIcon from "../icons/close.svg"; import CancelIcon from "../icons/cancel.svg"; import ImageIcon from "../icons/image.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 RobotIcon from "../icons/robot.svg"; -import SizeIcon from "../icons/size.svg"; -import QualityIcon from "../icons/hd.svg"; -import StyleIcon from "../icons/palette.svg"; -import PluginIcon from "../icons/plugin.svg"; -import ShortcutkeyIcon from "../icons/shortcutkey.svg"; import ReloadIcon from "../icons/reload.svg"; -import HeadphoneIcon from "../icons/headphone.svg"; import { ChatMessage, SubmitKey, @@ -54,7 +40,6 @@ import { BOT_HELLO, createMessage, useAccessStore, - Theme, useAppConfig, DEFAULT_TOPIC, ModelType, @@ -69,11 +54,7 @@ import { getMessageTextContent, getMessageImages, isVisionModel, - isDalle3, - showPlugins, safeLocalStorage, - getModelSizes, - supportsCustomSize, } from "../utils"; import { uploadImage as uploadImageRemote } from "@/app/utils/chat"; @@ -81,7 +62,6 @@ import { uploadImage as uploadImageRemote } from "@/app/utils/chat"; import dynamic from "next/dynamic"; import { ChatControllerPool } from "../client/controller"; -import { DalleQuality, DalleStyle, ModelSize } from "../typing"; import { Prompt, usePromptStore } from "../store/prompt"; import Locale from "../locales"; @@ -473,21 +453,7 @@ export function ChatActions(props: { const pluginStore = usePluginStore(); const session = chatStore.currentSession(); - // switch themes - const theme = 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]; - config.update((config) => (config.theme = nextTheme)); - } - - // stop all responses - const couldStop = ChatControllerPool.hasPending(); - const stopAll = () => ChatControllerPool.stopAll(); - - // switch model + // 保留模型选择相关逻辑 const currentModel = session.mask.modelConfig.model; const currentProviderName = session.mask.modelConfig?.providerName || ServiceProvider.OpenAI; @@ -506,6 +472,7 @@ export function ChatActions(props: { return filteredModels; } }, [allModels]); + const currentModelName = useMemo(() => { const model = models.find( (m) => @@ -514,20 +481,9 @@ export function ChatActions(props: { ); return model?.displayName ?? ""; }, [models, currentModel, currentProviderName]); - const [showModelSelector, setShowModelSelector] = useState(false); - const [showPluginSelector, setShowPluginSelector] = useState(false); - const [showUploadImage, setShowUploadImage] = useState(false); - const [showSizeSelector, setShowSizeSelector] = useState(false); - const [showQualitySelector, setShowQualitySelector] = useState(false); - const [showStyleSelector, setShowStyleSelector] = useState(false); - const modelSizes = getModelSizes(currentModel); - const dalle3Qualitys: DalleQuality[] = ["standard", "hd"]; - const dalle3Styles: DalleStyle[] = ["vivid", "natural"]; - const currentSize = - session.mask.modelConfig?.size ?? ("1024x1024" as ModelSize); - const currentQuality = session.mask.modelConfig?.quality ?? "standard"; - const currentStyle = session.mask.modelConfig?.style ?? "vivid"; + const [showModelSelector, setShowModelSelector] = useState(false); + const [showUploadImage, setShowUploadImage] = useState(false); const isMobileScreen = useMobileScreen(); @@ -560,29 +516,7 @@ export function ChatActions(props: { return (
- <> - {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={} - /> - setShowModelSelector(true)} text={currentModelName} icon={} - /> + /> */} {showModelSelector && ( )} - - {supportsCustomSize(currentModel) && ( - setShowSizeSelector(true)} - text={currentSize} - icon={} - /> - )} - - {showSizeSelector && ( - ({ - title: m, - value: m, - }))} - onClose={() => setShowSizeSelector(false)} - onSelection={(s) => { - if (s.length === 0) return; - const size = s[0]; - chatStore.updateTargetSession(session, (session) => { - session.mask.modelConfig.size = size; - }); - showToast(size); - }} - /> - )} - - {isDalle3(currentModel) && ( - setShowQualitySelector(true)} - text={currentQuality} - icon={} - /> - )} - - {showQualitySelector && ( - ({ - title: m, - value: m, - }))} - onClose={() => setShowQualitySelector(false)} - onSelection={(q) => { - if (q.length === 0) return; - const quality = q[0]; - chatStore.updateTargetSession(session, (session) => { - session.mask.modelConfig.quality = quality; - }); - showToast(quality); - }} - /> - )} - - {isDalle3(currentModel) && ( - setShowStyleSelector(true)} - text={currentStyle} - icon={} - /> - )} - - {showStyleSelector && ( - ({ - title: m, - value: m, - }))} - onClose={() => setShowStyleSelector(false)} - onSelection={(s) => { - if (s.length === 0) return; - const style = s[0]; - chatStore.updateTargetSession(session, (session) => { - session.mask.modelConfig.style = style; - }); - showToast(style); - }} - /> - )} - - {showPlugins(currentProviderName, currentModel) && ( - { - if (pluginStore.getAll().length == 0) { - navigate(Path.Plugins); - } else { - setShowPluginSelector(true); - } - }} - text={Locale.Plugin.Name} - icon={} - /> - )} - {showPluginSelector && ( - ({ - title: `${item?.title}@${item?.version}`, - value: item?.id, - }))} - onClose={() => setShowPluginSelector(false)} - onSelection={(s) => { - chatStore.updateTargetSession(session, (session) => { - session.mask.plugin = s as string[]; - }); - }} - /> - )} - - {!isMobileScreen && ( - props.setShowShortcutKeyModal(true)} - text={Locale.Chat.ShortcutKey.Title} - icon={} - /> - )} - -
- {config.realtimeConfig.enable && ( - props.setShowChatSidePanel(true)} - text={"Realtime Chat"} - icon={} - /> - )}
+
); }