From bc3692653537169cde5294668f560bed87b86343 Mon Sep 17 00:00:00 2001 From: DominicJamesWhite Date: Wed, 9 Apr 2025 13:24:34 +0200 Subject: [PATCH] Styling changes, fixing MCP and default model choices. --- app/components/chat.tsx | 406 +------------------------------------ app/components/sidebar.tsx | 32 ++- app/constant.ts | 1 + app/store/config.ts | 4 +- 4 files changed, 23 insertions(+), 420 deletions(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 6691403e6..828beabc9 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -12,48 +12,23 @@ import React, { import SendWhiteIcon from "../icons/send-white.svg"; import BrainIcon from "../icons/brain.svg"; import RenameIcon from "../icons/rename.svg"; -import EditIcon from "../icons/rename.svg"; -import ExportIcon from "../icons/share.svg"; import ReturnIcon from "../icons/return.svg"; import CopyIcon from "../icons/copy.svg"; -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 ReloadIcon 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 ConfirmIcon from "../icons/confirm.svg"; 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 McpToolIcon from "../icons/tool.svg"; -import HeadphoneIcon from "../icons/headphone.svg"; import { BOT_HELLO, ChatMessage, createMessage, DEFAULT_TOPIC, - ModelType, SubmitKey, Theme, useAccessStore, @@ -67,14 +42,11 @@ import { copyToClipboard, getMessageImages, getMessageTextContent, - isDalle3, isVisionModel, safeLocalStorage, getModelSizes, - supportsCustomSize, useMobileScreen, selectOrCopy, - showPlugins, } from "../utils"; import { uploadImage as uploadImageRemote } from "@/app/utils/chat"; @@ -89,15 +61,7 @@ import Locale from "../locales"; import { IconButton } from "./button"; import styles from "./chat.module.scss"; -import { - List, - ListItem, - Modal, - Selector, - showConfirm, - showPrompt, - showToast, -} from "./ui-lib"; +import { List, ListItem, Modal, showConfirm, showToast } from "./ui-lib"; import { useNavigate } from "react-router-dom"; import { CHAT_PAGE_SIZE, @@ -116,12 +80,11 @@ import { prettyObject } from "../utils/format"; import { ExportMessageModal } from "./exporter"; import { getClientConfig } from "../config/client"; import { useAllModels } from "../utils/hooks"; -import { ClientApi, MultimodalContent } from "../client/api"; +import { ClientApi } from "../client/api"; import { createTTSPlayer } from "../utils/audio"; import { MsEdgeTTS, OUTPUT_FORMAT } from "../utils/ms_edge_tts"; import { isEmpty } from "lodash-es"; -import { getModelProvider } from "../utils/model"; import { RealtimeChat } from "@/app/components/realtime-chat"; import clsx from "clsx"; import { getAvailableClientsCount, isMcpEnabled } from "../mcp/actions"; @@ -598,250 +561,9 @@ 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={} - /> - - } - onClick={() => { - chatStore.updateTargetSession(session, (session) => { - if (session.clearContextIndex === session.messages.length) { - session.clearContextIndex = undefined; - } else { - session.clearContextIndex = session.messages.length; - session.memoryPrompt = ""; // will clear memory - } - }); - }} - /> - - setShowModelSelector(true)} - text={currentModelName} - icon={} - /> - - {showModelSelector && ( - ({ - title: `${m.displayName}${ - m?.provider?.providerName - ? " (" + m?.provider?.providerName + ")" - : "" - }`, - value: `${m.name}@${m?.provider?.providerName}`, - }))} - onClose={() => setShowModelSelector(false)} - onSelection={(s) => { - if (s.length === 0) return; - const [model, providerName] = getModelProvider(s[0]); - chatStore.updateTargetSession(session, (session) => { - session.mask.modelConfig.model = model as ModelType; - session.mask.modelConfig.providerName = - providerName as ServiceProvider; - session.mask.syncGlobalConfig = false; - }); - if (providerName == "ByteDance") { - const selectedModel = models.find( - (m) => - m.name == model && - m?.provider?.providerName == providerName, - ); - showToast(selectedModel?.displayName ?? ""); - } else { - showToast(model); - } - }} - /> - )} - - {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={} - /> - )} - {!isMobileScreen && } - + {/* Actions removed for simplicity */}
- {config.realtimeConfig.enable && ( - props.setShowChatSidePanel(true)} - text={"Realtime Chat"} - icon={} - /> - )} + {/* Actions removed for simplicity */}
); @@ -1713,17 +1435,7 @@ function _Chat() {
-
- } - bordered - title={Locale.Chat.Actions.RefreshTitle} - onClick={() => { - showToast(Locale.Chat.Actions.RefreshToast); - chatStore.summarizeSession(true, session); - }} - /> -
+ {/* Refresh, Export, Fullscreen buttons removed for simplicity */} {!isMobileScreen && (
)} -
- } - bordered - title={Locale.Chat.Actions.Export} - onClick={() => { - setShowExport(true); - }} - /> -
- {showMaxIcon && ( -
- : } - bordered - title={Locale.Chat.Actions.FullScreen} - aria={Locale.Chat.Actions.FullScreen} - onClick={() => { - config.update( - (config) => (config.tightBorder = !config.tightBorder), - ); - }} - /> -
- )}
-
- } - aria={Locale.Chat.Actions.Edit} - onClick={async () => { - const newMessage = await showPrompt( - Locale.Chat.Actions.Edit, - getMessageTextContent(message), - 10, - ); - let newContent: - | string - | MultimodalContent[] = newMessage; - const images = getMessageImages(message); - if (images.length > 0) { - newContent = [ - { type: "text", text: newMessage }, - ]; - for (let i = 0; i < images.length; i++) { - newContent.push({ - type: "image_url", - image_url: { - url: images[i], - }, - }); - } - } - chatStore.updateTargetSession( - session, - (session) => { - const m = session.mask.context - .concat(session.messages) - .find((m) => m.id === message.id); - if (m) { - m.content = newContent; - } - }, - ); - }} - > -
+ {/* Edit button removed for simplicity */} {isUser ? ( ) : ( @@ -1885,25 +1532,7 @@ function _Chat() { /> ) : ( <> - } - onClick={() => onResend(message)} - /> - - } - onClick={() => - onDelete(message.id ?? i) - } - /> - - } - onClick={() => onPinMessage(message)} - /> + {/* Retry, Delete, Pin, Speech actions removed for simplicity */} } @@ -1913,27 +1542,6 @@ function _Chat() { ) } /> - {config.ttsConfig.enable && ( - - ) : ( - - ) - } - onClick={() => - openaiSpeech( - getMessageTextContent(message), - ) - } - /> - )} )}
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx index 56bc5bb43..7f24c3719 100644 --- a/app/components/sidebar.tsx +++ b/app/components/sidebar.tsx @@ -3,15 +3,10 @@ import React, { Fragment, useEffect, useMemo, useRef, useState } from "react"; import styles from "./home.module.scss"; import { IconButton } from "./button"; -import SettingsIcon from "../icons/settings.svg"; -import GithubIcon from "../icons/github.svg"; import ChatGptIcon from "../icons/chatgpt.svg"; import AddIcon from "../icons/add.svg"; import DeleteIcon from "../icons/delete.svg"; -import MaskIcon from "../icons/mask.svg"; -import McpIcon from "../icons/mcp.svg"; import DragIcon from "../icons/drag.svg"; -import DiscoveryIcon from "../icons/discovery.svg"; import Locale from "../locales"; @@ -23,10 +18,9 @@ import { MIN_SIDEBAR_WIDTH, NARROW_SIDEBAR_WIDTH, Path, - REPO_URL, } from "../constant"; -import { Link, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { isIOS, useMobileScreen } from "../utils"; import dynamic from "next/dynamic"; import { Selector, showConfirm } from "./ui-lib"; @@ -250,13 +244,13 @@ export function SideBar(props: { className?: string }) { {...props} > } shouldNarrow={shouldNarrow} >
- } text={shouldNarrow ? undefined : Locale.Mask.Name} className={styles["sidebar-bar-button"]} @@ -268,8 +262,8 @@ export function SideBar(props: { className?: string }) { } }} shadow - /> - {mcpEnabled && ( + /> */} + {/* {mcpEnabled && ( } text={shouldNarrow ? undefined : Locale.Mcp.Name} @@ -279,14 +273,14 @@ export function SideBar(props: { className?: string }) { }} shadow /> - )} - } text={shouldNarrow ? undefined : Locale.Discovery.Name} className={styles["sidebar-bar-button"]} onClick={() => setshowDiscoverySelector(true)} shadow - /> + /> */}
{showDiscoverySelector && (
-
+ {/*
-
-
+
*/} + {/*
-
+
*/} } secondaryAction={ diff --git a/app/constant.ts b/app/constant.ts index c1b135485..8c426d979 100644 --- a/app/constant.ts +++ b/app/constant.ts @@ -525,6 +525,7 @@ const googleModels = [ "gemini-2.0-flash-thinking-exp-01-21", "gemini-2.0-pro-exp", "gemini-2.0-pro-exp-02-05", + "gemini-2.5-pro-preview-03-25", ]; const anthropicModels = [ diff --git a/app/store/config.ts b/app/store/config.ts index 45e21b026..7cd5b392c 100644 --- a/app/store/config.ts +++ b/app/store/config.ts @@ -64,8 +64,8 @@ export const DEFAULT_CONFIG = { models: DEFAULT_MODELS as any as LLMModel[], modelConfig: { - model: "gpt-4o-mini" as ModelType, - providerName: "OpenAI" as ServiceProvider, + model: "gemini-2.5-pro-preview-03-25" as ModelType, + providerName: "Google" as ServiceProvider, temperature: 0.5, top_p: 1, max_tokens: 4000,