From 684367bf7c22aa7273d721e3712f7db144f9ef77 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 9 Jun 2025 11:50:30 +0800 Subject: [PATCH 01/10] fix: adjust navbar and title bar dimensions, update icon handling --- src/main/config.ts | 4 +- src/main/services/WindowService.ts | 2 +- src/renderer/src/assets/styles/color.scss | 2 +- src/renderer/src/components/app/Navbar.tsx | 36 +++++++++++++++-- src/renderer/src/pages/home/Navbar.tsx | 2 +- .../pages/mcp-servers/McpSettingsNavbar.tsx | 39 ++++++++----------- 6 files changed, 55 insertions(+), 30 deletions(-) diff --git a/src/main/config.ts b/src/main/config.ts index 84dc1b846d..32665a55b8 100644 --- a/src/main/config.ts +++ b/src/main/config.ts @@ -11,13 +11,13 @@ if (isDev) { export const DATA_PATH = getDataPath() export const titleBarOverlayDark = { - height: 40, + height: 42, color: 'rgba(255,255,255,0)', symbolColor: '#fff' } export const titleBarOverlayLight = { - height: 40, + height: 42, color: 'rgba(255,255,255,0)', symbolColor: '#000' } diff --git a/src/main/services/WindowService.ts b/src/main/services/WindowService.ts index 1ae16d5556..de7233fb46 100644 --- a/src/main/services/WindowService.ts +++ b/src/main/services/WindowService.ts @@ -63,7 +63,7 @@ export class WindowService { titleBarOverlay: nativeTheme.shouldUseDarkColors ? titleBarOverlayDark : titleBarOverlayLight, backgroundColor: isMac ? undefined : nativeTheme.shouldUseDarkColors ? '#181818' : '#FFFFFF', darkTheme: nativeTheme.shouldUseDarkColors, - trafficLightPosition: { x: 15, y: 12 }, + trafficLightPosition: { x: 12, y: 12 }, ...(isLinux ? { icon } : {}), webPreferences: { preload: join(__dirname, '../preload/index.js'), diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss index e5a7930a11..db412263bb 100644 --- a/src/renderer/src/assets/styles/color.scss +++ b/src/renderer/src/assets/styles/color.scss @@ -56,7 +56,7 @@ --navbar-background-mac: rgba(20, 20, 20, 0.55); --navbar-background: #1f1f1f; - --navbar-height: 45px; + --navbar-height: 42px; --sidebar-width: 50px; --status-bar-height: 40px; --input-bar-height: 100px; diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx index 7dfe28452a..547d269caf 100644 --- a/src/renderer/src/components/app/Navbar.tsx +++ b/src/renderer/src/components/app/Navbar.tsx @@ -1,7 +1,7 @@ import { isLinux, isMac, isWindows } from '@renderer/config/constant' import { useFullscreen } from '@renderer/hooks/useFullscreen' import { Button } from 'antd' -import { X } from 'lucide-react' +import { ChevronDown, X } from 'lucide-react' import type { FC, PropsWithChildren } from 'react' import type { HTMLAttributes } from 'react' import { useNavigate } from 'react-router-dom' @@ -28,16 +28,46 @@ export const NavbarRight: FC = ({ children, ...props }) => { export const NavbarMain: FC = ({ children, ...props }) => { const isFullscreen = useFullscreen() - const navigate = useNavigate() return ( + {children} - + ) } +const CloseIconMac = () => { + const navigate = useNavigate() + + if (!isMac) { + return null + } + + return + - - - - - - + + + ) } From 06a60c4871830a262f4ea574440bd1f8aac3bbb7 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 9 Jun 2025 12:05:41 +0800 Subject: [PATCH 02/10] feat: implement ChatNavbar component and enhance MainNavbar with search functionality --- .../src/components/app/MainNavbar.tsx | 22 +++++- .../pages/home/{Navbar.tsx => ChatNavbar.tsx} | 76 ++++--------------- src/renderer/src/pages/home/HomePage.tsx | 10 +-- .../src/pages/home/Tabs/AssistantsTab.tsx | 4 +- 4 files changed, 39 insertions(+), 73 deletions(-) rename src/renderer/src/pages/home/{Navbar.tsx => ChatNavbar.tsx} (63%) diff --git a/src/renderer/src/components/app/MainNavbar.tsx b/src/renderer/src/components/app/MainNavbar.tsx index 3a8eb23f72..8ec6bd06a5 100644 --- a/src/renderer/src/components/app/MainNavbar.tsx +++ b/src/renderer/src/components/app/MainNavbar.tsx @@ -1,16 +1,27 @@ +import { isMac } from '@renderer/config/constant' import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService' import { Tooltip } from 'antd' import { t } from 'i18next' -import { MessageSquareDiff } from 'lucide-react' +import { MessageSquareDiff, Search } from 'lucide-react' import { FC } from 'react' import styled from 'styled-components' +import SearchPopup from '../Popups/SearchPopup' + interface Props {} const HeaderNavbar: FC = () => { return ( -
+
+ {!isMac && ( + + SearchPopup.show()}> + + + + )} +
EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)} style={{ marginRight: 5 }}> @@ -32,6 +43,7 @@ const Container = styled.div` min-height: var(--navbar-height); background-color: transparent; -webkit-app-region: drag; + padding-left: ${isMac ? '75px' : '0'}; ` export const NavbarIcon = styled.div` @@ -69,4 +81,10 @@ export const NavbarIcon = styled.div` } ` +const NarrowIcon = styled(NavbarIcon)` + @media (max-width: 1000px) { + display: none; + } +` + export default HeaderNavbar diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/ChatNavbar.tsx similarity index 63% rename from src/renderer/src/pages/home/Navbar.tsx rename to src/renderer/src/pages/home/ChatNavbar.tsx index 858664085c..fec6864ac2 100644 --- a/src/renderer/src/pages/home/Navbar.tsx +++ b/src/renderer/src/pages/home/ChatNavbar.tsx @@ -1,6 +1,5 @@ import { Navbar } from '@renderer/components/app/Navbar' import { HStack } from '@renderer/components/Layout' -import FloatingSidebar from '@renderer/components/Popups/FloatingSidebar' import MinAppsPopover from '@renderer/components/Popups/MinAppsPopover' import SearchPopup from '@renderer/components/Popups/SearchPopup' import { isLinux, isMac, isWindows } from '@renderer/config/constant' @@ -13,11 +12,11 @@ import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore' import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService' import { useAppDispatch } from '@renderer/store' import { setNarrowMode } from '@renderer/store/settings' -import { Assistant, Topic } from '@renderer/types' +import { Assistant } from '@renderer/types' import { Tooltip } from 'antd' import { t } from 'i18next' -import { LayoutGrid, PanelLeftClose, PanelRightClose, Search } from 'lucide-react' -import { FC, useCallback, useState } from 'react' +import { LayoutGrid, PanelLeft, PanelRight, Search } from 'lucide-react' +import { FC, useCallback } from 'react' import styled from 'styled-components' import SelectModelButton from './components/SelectModelButton' @@ -25,27 +24,22 @@ import UpdateAppButton from './components/UpdateAppButton' interface Props { activeAssistant: Assistant - activeTopic: Topic - setActiveTopic: (topic: Topic) => void - setActiveAssistant: (assistant: Assistant) => void position: 'left' | 'right' } -const HeaderNavbar: FC = ({ activeAssistant, setActiveAssistant, activeTopic, setActiveTopic }) => { +const ChatNavbar: FC = ({ activeAssistant }) => { const { assistant } = useAssistant(activeAssistant.id) const { showAssistants, toggleShowAssistants } = useShowAssistants() const isFullscreen = useFullscreen() const { topicPosition, sidebarIcons, narrowMode } = useSettings() - const { showTopics, toggleShowTopics } = useShowTopics() + const { toggleShowTopics } = useShowTopics() const dispatch = useAppDispatch() - const [sidebarHideCooldown, setSidebarHideCooldown] = useState(false) // Function to toggle assistants with cooldown const handleToggleShowAssistants = useCallback(() => { if (showAssistants) { // When hiding sidebar, set cooldown toggleShowAssistants() - setSidebarHideCooldown(true) // setTimeout(() => { // setSidebarHideCooldown(false) // }, 10000) // 10 seconds cooldown @@ -55,20 +49,6 @@ const HeaderNavbar: FC = ({ activeAssistant, setActiveAssistant, activeTo } }, [showAssistants, toggleShowAssistants]) - const handleToggleShowTopics = useCallback(() => { - if (showTopics) { - // When hiding sidebar, set cooldown - toggleShowTopics() - setSidebarHideCooldown(true) - // setTimeout(() => { - // setSidebarHideCooldown(false) - // }, 10000) // 10 seconds cooldown - } else { - // When showing sidebar, no cooldown needed - toggleShowTopics() - } - }, [showTopics, toggleShowTopics]) - useShortcut('toggle_show_assistants', handleToggleShowAssistants) useShortcut('toggle_show_topics', () => { @@ -95,17 +75,19 @@ const HeaderNavbar: FC = ({ activeAssistant, setActiveAssistant, activeTo toggleShowAssistants()} style={{ marginRight: 8, marginLeft: isMac && !isFullscreen ? 4 : -12 }}> - {showAssistants ? : } + {showAssistants ? : } - - SearchPopup.show()}> - - - + {isMac && ( + + SearchPopup.show()}> + + + + )} @@ -120,34 +102,6 @@ const HeaderNavbar: FC = ({ activeAssistant, setActiveAssistant, activeTo )} - {topicPosition === 'right' && !showTopics && !sidebarHideCooldown && ( - - - toggleShowTopics()}> - - - - - )} - {topicPosition === 'right' && !showTopics && sidebarHideCooldown && ( - - toggleShowTopics()} onMouseOut={() => setSidebarHideCooldown(false)}> - - - - )} - {topicPosition === 'right' && showTopics && ( - - handleToggleShowTopics()}> - - - - )} @@ -163,7 +117,7 @@ const NavbarContainer = styled.div<{ $isFullscreen: boolean; $showSidebar: boole max-height: var(--navbar-height); min-height: var(--navbar-height); justify-content: space-between; - padding-left: ${({ $showSidebar }) => (isMac && !$showSidebar ? '70px' : '20px')}; + padding-left: ${({ $showSidebar }) => (isMac ? ($showSidebar ? '10px' : '75px') : '15px')}; font-weight: bold; color: var(--color-text-1); padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWindows ? '140px' : isLinux ? '120px' : '12px')}; @@ -210,4 +164,4 @@ const NarrowIcon = styled(NavbarIcon)` } ` -export default HeaderNavbar +export default ChatNavbar diff --git a/src/renderer/src/pages/home/HomePage.tsx b/src/renderer/src/pages/home/HomePage.tsx index 5d46ee9219..cbac6b5816 100644 --- a/src/renderer/src/pages/home/HomePage.tsx +++ b/src/renderer/src/pages/home/HomePage.tsx @@ -8,7 +8,7 @@ import { useLocation, useNavigate } from 'react-router-dom' import styled from 'styled-components' import Chat from './Chat' -import Navbar from './Navbar' +import ChatNavbar from './ChatNavbar' const HomePage: FC = () => { const { assistants } = useAssistants() @@ -54,13 +54,7 @@ const HomePage: FC = () => { return ( - + = ({ if (assistantsTabSortType === 'tags') { return ( -
+
{getGroupedAssistants.map((group) => ( {group.tag !== t('assistants.tags.untagged') && ( @@ -228,7 +228,7 @@ const GroupTitleName = styled.div` color: var(--color-text); font-size: 13px; line-height: 24px; - margin-right: 2px; + margin-right: 5px; display: flex; ` From 6ea1bcc7d19d5b433efa6d1e1e75ff4f3aa98faa Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 9 Jun 2025 13:49:40 +0800 Subject: [PATCH 03/10] fix: invert transparency setting for WindowService based on OS --- src/main/services/WindowService.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/services/WindowService.ts b/src/main/services/WindowService.ts index de7233fb46..e9c56fd066 100644 --- a/src/main/services/WindowService.ts +++ b/src/main/services/WindowService.ts @@ -56,7 +56,7 @@ export class WindowService { minHeight: 600, show: false, autoHideMenuBar: true, - transparent: isMac, + transparent: !isMac, vibrancy: 'sidebar', visualEffectState: 'active', titleBarStyle: 'hidden', From 10caef2c4c5ec758b43e5ac88d6e870b0036a0ae Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 9 Jun 2025 14:19:11 +0800 Subject: [PATCH 04/10] refactor: clean up MainSidebar and useChat hooks, remove unused state handling and improve topic selection logic --- .../src/components/app/MainSidebar.tsx | 21 ++++++++----------- src/renderer/src/hooks/useChat.tsx | 9 +++----- .../src/pages/home/Inputbar/Inputbar.tsx | 4 +--- 3 files changed, 13 insertions(+), 21 deletions(-) diff --git a/src/renderer/src/components/app/MainSidebar.tsx b/src/renderer/src/components/app/MainSidebar.tsx index bc8a1a640b..60c957490f 100644 --- a/src/renderer/src/components/app/MainSidebar.tsx +++ b/src/renderer/src/components/app/MainSidebar.tsx @@ -48,7 +48,6 @@ const MainSidebar: FC = () => { const [isAppMenuExpanded, setIsAppMenuExpanded] = useState(false) const location = useLocation() - const state = location.state const { pathname } = location const { activeAssistant, activeTopic, setActiveAssistant, setActiveTopic } = useChat() @@ -58,12 +57,6 @@ const MainSidebar: FC = () => { NavigationService.setNavigate(navigate) }, [navigate]) - useEffect(() => { - state?.assistant && setActiveAssistant(state?.assistant) - state?.topic && setActiveTopic(state?.topic) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [state]) - useEffect(() => { const unsubscribe = EventEmitter.on(EVENT_NAMES.SWITCH_ASSISTANT, (assistantId: string) => { const newAssistant = assistants.find((a) => a.id === assistantId) @@ -78,7 +71,7 @@ const MainSidebar: FC = () => { }, [assistants, setActiveAssistant]) useEffect(() => { - const canMinimize = topicPosition == 'left' ? !showAssistants : !showAssistants && !showTopics + const canMinimize = !showAssistants && !showTopics window.api.window.setMinimumSize(canMinimize ? 520 : 1080, 600) return () => { @@ -86,6 +79,10 @@ const MainSidebar: FC = () => { } }, [showAssistants, showTopics, topicPosition]) + useEffect(() => { + setIsAppMenuExpanded(false) + }, [activeAssistant.id, activeTopic.id]) + const onAvatarClick = () => { navigate('/settings/provider') } @@ -111,10 +108,6 @@ const MainSidebar: FC = () => { const isRoutes = (path: string): boolean => pathname.startsWith(path) - if (location.pathname !== '/') { - return null - } - const onChageTab = (tab: Tab) => { setTab(tab) setIsAppMenuExpanded(false) @@ -124,6 +117,10 @@ const MainSidebar: FC = () => { return null } + if (location.pathname !== '/') { + return null + } + return ( diff --git a/src/renderer/src/hooks/useChat.tsx b/src/renderer/src/hooks/useChat.tsx index 5c92759e3e..be44bccb77 100644 --- a/src/renderer/src/hooks/useChat.tsx +++ b/src/renderer/src/hooks/useChat.tsx @@ -4,7 +4,6 @@ import { setActiveAssistant, setActiveTopic } from '@renderer/store/runtime' import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk' import { Assistant } from '@renderer/types' import { Topic } from '@renderer/types' -import { find } from 'lodash' import { useEffect } from 'react' import { useAssistants } from './useAssistant' @@ -23,11 +22,9 @@ export const useChat = () => { }, [activeTopic, dispatch]) useEffect(() => { - // activeTopic not in assistant.topics - if (activeAssistant && !find(activeAssistant.topics, { id: activeTopic?.id })) { - dispatch(setActiveTopic(activeAssistant.topics[0])) - } - }, [activeTopic?.id, activeAssistant, dispatch]) + const firstTopic = activeAssistant.topics[0] + firstTopic && dispatch(setActiveTopic(firstTopic)) + }, [activeAssistant, dispatch]) return { activeAssistant, diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx index 83b3373093..b0e01a4c15 100644 --- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx +++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx @@ -14,7 +14,7 @@ import { useAssistant } from '@renderer/hooks/useAssistant' import { useKnowledgeBases } from '@renderer/hooks/useKnowledge' import { useMCPServers } from '@renderer/hooks/useMCPServers' import { useMessageOperations, useTopicLoading } from '@renderer/hooks/useMessageOperations' -import { modelGenerating, useRuntime } from '@renderer/hooks/useRuntime' +import { useRuntime } from '@renderer/hooks/useRuntime' import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings' import { useShortcut, useShortcutDisplay } from '@renderer/hooks/useShortcuts' import { useSidebarIconShow } from '@renderer/hooks/useSidebarIcon' @@ -405,8 +405,6 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = } const addNewTopic = useCallback(async () => { - await modelGenerating() - const topic = getDefaultTopic(assistant.id) await db.topics.add({ id: topic.id, messages: [] }) From 21e88b02ea262eb8946078db5c9ca6c202a7e662 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 9 Jun 2025 14:39:29 +0800 Subject: [PATCH 05/10] refactor: simplify HomeTabs component by removing unused imports and commented code, update AssistantAddItem hover styles --- .../src/pages/home/Tabs/AssistantsTab.tsx | 7 +- src/renderer/src/pages/home/Tabs/index.tsx | 123 +----------------- 2 files changed, 2 insertions(+), 128 deletions(-) diff --git a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx index 94e79cf203..c6041210eb 100644 --- a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx +++ b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx @@ -197,12 +197,7 @@ const AssistantAddItem = styled.div` cursor: pointer; &:hover { - background-color: var(--color-background-soft); - } - - &.active { - background-color: var(--color-background-soft); - border: 0.5px solid var(--color-border); + background-color: var(--color-list-item-hover); } ` diff --git a/src/renderer/src/pages/home/Tabs/index.tsx b/src/renderer/src/pages/home/Tabs/index.tsx index 99cf5dd2bb..dd619f83e5 100644 --- a/src/renderer/src/pages/home/Tabs/index.tsx +++ b/src/renderer/src/pages/home/Tabs/index.tsx @@ -1,12 +1,8 @@ import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup' import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant' -import { useSettings } from '@renderer/hooks/useSettings' -import { useShowTopics } from '@renderer/hooks/useStore' import { Assistant, Topic } from '@renderer/types' import { uuid } from '@renderer/utils' -import { Segmented as AntSegmented } from 'antd' import { FC } from 'react' -import { useTranslation } from 'react-i18next' import styled from 'styled-components' import Assistants from './AssistantsTab' @@ -19,37 +15,14 @@ interface Props { activeTopic: Topic setActiveAssistant: (assistant: Assistant) => void setActiveTopic: (topic: Topic) => void - position: 'left' | 'right' - forceToSeeAllTab?: boolean style?: React.CSSProperties } type Tab = 'assistants' | 'topic' | 'settings' -const HomeTabs: FC = ({ - tab, - activeAssistant, - activeTopic, - setActiveAssistant, - setActiveTopic, - position, - forceToSeeAllTab, - style -}) => { +const HomeTabs: FC = ({ tab, activeAssistant, activeTopic, setActiveAssistant, setActiveTopic, style }) => { const { addAssistant } = useAssistants() - const { topicPosition } = useSettings() const { defaultAssistant } = useDefaultAssistant() - const { showTopics, toggleShowTopics } = useShowTopics() - - const { t } = useTranslation() - - const showTab = !(position === 'left' && topicPosition === 'right') - - const assistantTab = { - label: t('assistants.abbr'), - value: 'assistants' - // icon: - } const onCreateAssistant = async () => { const assistant = await AddAssistantPopup.show() @@ -62,36 +35,6 @@ const HomeTabs: FC = ({ setActiveAssistant(assistant) } - // useEffect(() => { - // const unsubscribes = [ - // EventEmitter.on(EVENT_NAMES.SHOW_ASSISTANTS, (): any => { - // showTab && setTab('assistants') - // }), - // EventEmitter.on(EVENT_NAMES.SHOW_TOPIC_SIDEBAR, (): any => { - // showTab && setTab('topic') - // }), - // EventEmitter.on(EVENT_NAMES.SHOW_CHAT_SETTINGS, (): any => { - // showTab && setTab('settings') - // }), - // EventEmitter.on(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR, () => { - // showTab && setTab('topic') - // if (position === 'left' && topicPosition === 'right') { - // toggleShowTopics() - // } - // }) - // ] - // return () => unsubscribes.forEach((unsub) => unsub()) - // }, [position, showTab, tab, toggleShowTopics, topicPosition]) - - // useEffect(() => { - // if (position === 'right' && topicPosition === 'right' && tab === 'assistants') { - // setTab('topic') - // } - // if (position === 'left' && topicPosition === 'right' && forceToSeeAllTab != true && tab !== 'assistants') { - // setTab('assistants') - // } - // }, [position, tab, topicPosition, forceToSeeAllTab]) - return ( @@ -134,68 +77,4 @@ const TabContent = styled.div` overflow-x: hidden; ` -const Divider = styled.div` - border-top: 0.5px solid var(--color-border); - margin-top: 10px; - margin-left: 10px; - margin-right: 10px; -` - -const Segmented = styled(AntSegmented)` - font-family: var(--font-family); - - &.ant-segmented { - background-color: transparent; - margin: 0 10px; - margin-top: 10px; - padding: 0; - } - .ant-segmented-item { - overflow: hidden; - transition: none !important; - height: 34px; - line-height: 34px; - background-color: transparent; - user-select: none; - border-radius: var(--list-item-border-radius); - box-shadow: none; - } - .ant-segmented-item-selected, - .ant-segmented-item-selected:active { - transition: none !important; - background-color: var(--color-list-item); - } - .ant-segmented-item-label { - align-items: center; - display: flex; - flex-direction: row; - justify-content: center; - font-size: 13px; - height: 100%; - } - .ant-segmented-item-label[aria-selected='true'] { - color: var(--color-text); - } - .icon-business-smart-assistant { - margin-right: -2px; - } - .ant-segmented-thumb { - transition: none !important; - background-color: var(--color-list-item); - border-radius: var(--list-item-border-radius); - box-shadow: none; - &:hover { - background-color: transparent; - } - } - .ant-segmented-item-label, - .ant-segmented-item-icon { - display: flex; - align-items: center; - } - /* These styles ensure the same appearance as before */ - border-radius: 0; - box-shadow: none; -` - export default HomeTabs From b4665509ab0cd0b5c0ad0daeb0a6131ef95d4672 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 9 Jun 2025 14:45:12 +0800 Subject: [PATCH 06/10] fix: set WindowService transparency to false for consistent behavior across platforms --- src/main/services/WindowService.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/services/WindowService.ts b/src/main/services/WindowService.ts index e9c56fd066..3f0cb8f84a 100644 --- a/src/main/services/WindowService.ts +++ b/src/main/services/WindowService.ts @@ -56,7 +56,7 @@ export class WindowService { minHeight: 600, show: false, autoHideMenuBar: true, - transparent: !isMac, + transparent: false, vibrancy: 'sidebar', visualEffectState: 'active', titleBarStyle: 'hidden', From 9cac8fba569bba1bec65e7acf9c552267c00a0e2 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 9 Jun 2025 15:04:44 +0800 Subject: [PATCH 07/10] feat: add event listener to MainSidebar for topic tab navigation --- src/renderer/src/components/app/MainSidebar.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/renderer/src/components/app/MainSidebar.tsx b/src/renderer/src/components/app/MainSidebar.tsx index 60c957490f..50e2e71dcb 100644 --- a/src/renderer/src/components/app/MainSidebar.tsx +++ b/src/renderer/src/components/app/MainSidebar.tsx @@ -57,6 +57,11 @@ const MainSidebar: FC = () => { NavigationService.setNavigate(navigate) }, [navigate]) + useEffect(() => { + const unsubscribe = EventEmitter.on(EVENT_NAMES.SHOW_TOPIC_SIDEBAR, () => setTab('topic')) + return () => unsubscribe() + }, []) + useEffect(() => { const unsubscribe = EventEmitter.on(EVENT_NAMES.SWITCH_ASSISTANT, (assistantId: string) => { const newAssistant = assistants.find((a) => a.id === assistantId) @@ -184,7 +189,6 @@ const MainSidebar: FC = () => { activeTopic={activeTopic} setActiveAssistant={setActiveAssistant} setActiveTopic={setActiveTopic} - position="left" /> From b762cfd60bf38c7167386c6825b91ecf060d69c3 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 9 Jun 2025 15:39:30 +0800 Subject: [PATCH 08/10] feat: enhance summarization prompt and add topic sidebar visibility toggle --- src/renderer/src/config/prompts.ts | 2 +- src/renderer/src/hooks/useChat.tsx | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/renderer/src/config/prompts.ts b/src/renderer/src/config/prompts.ts index ead2dc1333..8484bf54d5 100644 --- a/src/renderer/src/config/prompts.ts +++ b/src/renderer/src/config/prompts.ts @@ -47,7 +47,7 @@ As [role name], with [list skills], strictly adhering to [list constraints], usi ` export const SUMMARIZE_PROMPT = - "You are an assistant skilled in conversation. You need to summarize the user's conversation into a title within 10 words. The language of the title should be consistent with the user's primary language. Do not use punctuation marks or other special symbols" + "You are an assistant skilled in conversation. You need to summarize the user's conversation into a title within 10 words. The language of the title should be consistent with the user's primary language. Do not use punctuation marks, markdown language markers, or other special symbols" // https://github.com/ItzCrazyKns/Perplexica/blob/master/src/lib/prompts/webSearch.ts export const SEARCH_SUMMARY_PROMPT = ` diff --git a/src/renderer/src/hooks/useChat.tsx b/src/renderer/src/hooks/useChat.tsx index be44bccb77..d9c51b56d0 100644 --- a/src/renderer/src/hooks/useChat.tsx +++ b/src/renderer/src/hooks/useChat.tsx @@ -7,11 +7,13 @@ import { Topic } from '@renderer/types' import { useEffect } from 'react' import { useAssistants } from './useAssistant' +import { useSettings } from './useSettings' export const useChat = () => { const { assistants } = useAssistants() const activeAssistant = useAppSelector((state) => state.runtime.chat.activeAssistant) || assistants[0] const activeTopic = useAppSelector((state) => state.runtime.chat.activeTopic) || activeAssistant?.topics[0]! + const { clickAssistantToShowTopic } = useSettings() const dispatch = useAppDispatch() useEffect(() => { @@ -26,6 +28,12 @@ export const useChat = () => { firstTopic && dispatch(setActiveTopic(firstTopic)) }, [activeAssistant, dispatch]) + useEffect(() => { + if (clickAssistantToShowTopic) { + EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR) + } + }, [clickAssistantToShowTopic, activeAssistant]) + return { activeAssistant, activeTopic, From d11b98dfbb21dabac2fcff1a935c4e874888dbff Mon Sep 17 00:00:00 2001 From: Teo Date: Mon, 9 Jun 2025 15:54:16 +0800 Subject: [PATCH 09/10] feat(Inputbar): add SettingButton component for settings access --- .../src/pages/home/Inputbar/Inputbar.tsx | 2 + .../src/pages/home/Inputbar/SettingButton.tsx | 43 +++++++++++++++++++ .../src/pages/home/Tabs/SettingsTab.tsx | 10 ++++- 3 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 src/renderer/src/pages/home/Inputbar/SettingButton.tsx diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx index b0e01a4c15..699ad2ebed 100644 --- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx +++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx @@ -52,6 +52,7 @@ import InputbarTools, { InputbarToolsRef } from './InputbarTools' import KnowledgeBaseInput from './KnowledgeBaseInput' import MentionModelsInput from './MentionModelsInput' import SendMessageButton from './SendMessageButton' +import SettingButton from './SettingButton' import TokenCount from './TokenCount' interface Props { @@ -856,6 +857,7 @@ const Inputbar: FC = ({ assistant: _assistant, setActiveTopic, topic }) = ToolbarButton={ToolbarButton} onClick={onNewContext} /> + {loading && ( diff --git a/src/renderer/src/pages/home/Inputbar/SettingButton.tsx b/src/renderer/src/pages/home/Inputbar/SettingButton.tsx new file mode 100644 index 0000000000..0adf77f1fd --- /dev/null +++ b/src/renderer/src/pages/home/Inputbar/SettingButton.tsx @@ -0,0 +1,43 @@ +import { Assistant } from '@renderer/types' +import { Popover } from 'antd' +import { Settings } from 'lucide-react' +import { FC, useState } from 'react' + +import SettingsTab from '../Tabs/SettingsTab' + +interface Props { + assistant: Assistant + ToolbarButton: any +} + +const SettingButton: FC = ({ assistant, ToolbarButton }) => { + const [open, setOpen] = useState(false) + + const handleOpenChange = (newOpen: boolean) => { + setOpen(newOpen) + } + + const handleClose = () => { + setOpen(false) + } + + return ( + } + trigger="click" + open={open} + onOpenChange={handleOpenChange} + styles={{ + body: { + padding: '4px 2px 4px 2px' + } + }}> + + + + + ) +} + +export default SettingButton diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx index 5595f4bcfc..92357f15ad 100644 --- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx +++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx @@ -69,6 +69,7 @@ import OpenAISettingsGroup from './components/OpenAISettingsGroup' interface Props { assistant: Assistant + onClose: () => void } const SettingsTab: FC = (props) => { @@ -197,7 +198,10 @@ const SettingsTab: FC = (props) => { type="text" size="small" icon={} - onClick={() => AssistantSettingsPopup.show({ assistant, tab: 'model' })} + onClick={() => { + AssistantSettingsPopup.show({ assistant, tab: 'model' }) + props.onClose() + }} /> }> @@ -681,8 +685,10 @@ const SettingsTab: FC = (props) => { } const Container = styled(Scrollbar)` + min-width: 300px; + max-width: 40vw; + max-height: 70vh; display: flex; - flex: 1; flex-direction: column; padding: 0 8px; padding-right: 0; From 8db2059605981180a66078576b6ec9263df6b339 Mon Sep 17 00:00:00 2001 From: Teo Date: Mon, 9 Jun 2025 15:54:20 +0800 Subject: [PATCH 10/10] style(color.scss): update border color to improve UI consistency --- src/renderer/src/assets/styles/color.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss index db412263bb..ef6d1d143f 100644 --- a/src/renderer/src/assets/styles/color.scss +++ b/src/renderer/src/assets/styles/color.scss @@ -29,7 +29,7 @@ --color-text-secondary: rgba(235, 235, 245, 0.7); --color-icon: #ffffff99; --color-icon-white: #ffffff; - --color-border: #000; + --color-border: #383838; --color-border-soft: #ffffff10; --color-border-mute: #ffffff05; --color-error: #f44336;