diff --git a/src/apps/chat/components/ChatDrawer.tsx b/src/apps/chat/components/ChatDrawer.tsx index 8f5ba93d45..fda21ea22c 100644 --- a/src/apps/chat/components/ChatDrawer.tsx +++ b/src/apps/chat/components/ChatDrawer.tsx @@ -19,6 +19,7 @@ import { FoldersToggleOff } from '~/common/components/icons/FoldersToggleOff'; import { FoldersToggleOn } from '~/common/components/icons/FoldersToggleOn'; import { PageDrawerHeader } from '~/common/layout/optima/components/PageDrawerHeader'; import { PageDrawerList } from '~/common/layout/optima/components/PageDrawerList'; +import { capitalizeFirstLetter } from '~/common/util/textUtils'; import { themeScalingMap, themeZIndexOverMobileDrawer } from '~/common/app.theme'; import { useOptimaDrawers } from '~/common/layout/optima/useOptimaDrawers'; import { useUIPreferencesStore } from '~/common/state/store-ui'; @@ -27,6 +28,7 @@ import { ChatDrawerItemMemo, FolderChangeRequest } from './ChatDrawerItem'; import { ChatFolderList } from './folders/ChatFolderList'; import { ChatNavGrouping, useChatNavRenderItems } from './useChatNavRenderItems'; import { ClearFolderText } from './folders/useFolderDropdown'; +import { useChatShowRelativeSize } from '../store-app-chat'; // this is here to make shallow comparisons work on the next hook @@ -77,9 +79,10 @@ function ChatDrawer(props: { // external state const { closeDrawer, closeDrawerOnMobile } = useOptimaDrawers(); + const { showRelativeSize, toggleRelativeSize } = useChatShowRelativeSize(); const { activeFolder, allFolders, enableFolders, toggleEnableFolders } = useFolders(props.activeFolderId); const { filteredChatsCount, filteredChatIDs, filteredChatsAreEmpty, filteredChatsBarBasis, filteredChatsIncludeActive, renderNavItems } = useChatNavRenderItems( - props.activeConversationId, props.chatPanesConversationIds, debouncedSearchQuery, activeFolder, allFolders, navGrouping, + props.activeConversationId, props.chatPanesConversationIds, debouncedSearchQuery, activeFolder, allFolders, navGrouping, showRelativeSize, ); const { contentScaling, showSymbols } = useUIPreferencesStore(state => ({ contentScaling: state.contentScaling, @@ -140,22 +143,38 @@ function ChatDrawer(props: { const groupingComponent = React.useMemo(() => ( - + + + Group By + {(['date', 'persona'] as const).map(_gName => ( - setNavGrouping(grouping => grouping === _gName ? false : _gName)}> + setNavGrouping(grouping => grouping === _gName ? false : _gName)} + > {navGrouping === _gName && } - Group by {_gName} + {capitalizeFirstLetter(_gName)} ))} + + + Show + + + {showRelativeSize && } + Relative Size + - ), [navGrouping]); + ), [navGrouping, showRelativeSize, toggleRelativeSize]); return <> @@ -256,7 +275,7 @@ function ChatDrawer(props: { key={'nav-chat-' + item.conversationId} item={item} showSymbols={showSymbols} - bottomBarBasis={showSymbols ? filteredChatsBarBasis : 0} + bottomBarBasis={filteredChatsBarBasis} onConversationActivate={handleConversationActivate} onConversationBranch={onConversationBranch} onConversationDelete={handleConversationDeleteNoConfirmation} diff --git a/src/apps/chat/components/ChatDrawerItem.tsx b/src/apps/chat/components/ChatDrawerItem.tsx index 1a7d9cd5ac..fed8818950 100644 --- a/src/apps/chat/components/ChatDrawerItem.tsx +++ b/src/apps/chat/components/ChatDrawerItem.tsx @@ -168,8 +168,7 @@ function ChatDrawerItem(props: { const textSymbol = SystemPurposes[systemPurposeId]?.symbol || '❓'; - const progress = props.bottomBarBasis ? 100 * (searchFrequency ?? messageCount) / props.bottomBarBasis : 0; - + const progress = props.bottomBarBasis ? 100 * (searchFrequency || messageCount) / props.bottomBarBasis : 0; const titleRowComponent = React.useMemo(() => <> @@ -234,7 +233,7 @@ function ChatDrawerItem(props: { const progressBarFixedComponent = React.useMemo(() => progress > 0 && ( ), [progress]); diff --git a/src/apps/chat/components/useChatNavRenderItems.tsx b/src/apps/chat/components/useChatNavRenderItems.tsx index edb2f798d8..87d0d92252 100644 --- a/src/apps/chat/components/useChatNavRenderItems.tsx +++ b/src/apps/chat/components/useChatNavRenderItems.tsx @@ -7,7 +7,6 @@ import type { ChatNavigationItemData } from './ChatDrawerItem'; // configuration -const AUTO_UNDERLINE_COUNT = 40; const SEARCH_MIN_CHARS = 3; @@ -79,6 +78,7 @@ export function useChatNavRenderItems( activeFolder: DFolder | null, allFolders: DFolder[], grouping: ChatNavGrouping, + showRelativeSize: boolean, ): { renderNavItems: ChatRenderItemData[], filteredChatIDs: DConversationId[], @@ -185,7 +185,7 @@ export function useChatNavRenderItems( const filteredChatIDs = chatNavItems.map(_c => _c.conversationId); const filteredChatsCount = chatNavItems.length; const filteredChatsAreEmpty = !filteredChatsCount || (filteredChatsCount === 1 && chatNavItems[0].isEmpty); - const filteredChatsBarBasis = (filteredChatsCount >= AUTO_UNDERLINE_COUNT || isSearching) + const filteredChatsBarBasis = ((showRelativeSize && filteredChatsCount >= 2) || isSearching) ? chatNavItems.reduce((longest, _c) => Math.max(longest, isSearching ? _c.searchFrequency : _c.messageCount), 1) : 0; @@ -202,7 +202,9 @@ export function useChatNavRenderItems( // we only compare the renderNavItems array, which shall be changed if the rest changes return a.renderNavItems.length === b.renderNavItems.length && a.renderNavItems.every((_a, i) => shallow(_a, b.renderNavItems[i])) - && shallow(a.filteredChatIDs, b.filteredChatIDs); + && shallow(a.filteredChatIDs, b.filteredChatIDs) + // we also compare this, as it changes with a parameter + && a.filteredChatsBarBasis === b.filteredChatsBarBasis; }, ); } \ No newline at end of file diff --git a/src/apps/chat/store-app-chat.ts b/src/apps/chat/store-app-chat.ts index 3d85309ee0..4ea350a543 100644 --- a/src/apps/chat/store-app-chat.ts +++ b/src/apps/chat/store-app-chat.ts @@ -10,6 +10,8 @@ export type ChatAutoSpeakType = 'off' | 'firstLine' | 'all'; interface AppChatStore { + // chat AI + autoSpeak: ChatAutoSpeakType; setAutoSpeak: (autoSpeak: ChatAutoSpeakType) => void; @@ -22,9 +24,14 @@ interface AppChatStore { autoTitleChat: boolean; setAutoTitleChat: (autoTitleChat: boolean) => void; + // chat UI + micTimeoutMs: number; setMicTimeoutMs: (micTimeoutMs: number) => void; + showRelativeSize: boolean; + setShowRelativeSize: (showRelativeSize: boolean) => void; + showTextDiff: boolean; setShowTextDiff: (showTextDiff: boolean) => void; @@ -52,6 +59,9 @@ const useAppChatStore = create()(persist( micTimeoutMs: 2000, setMicTimeoutMs: (micTimeoutMs: number) => _set({ micTimeoutMs }), + showRelativeSize: false, + setShowRelativeSize: (showRelativeSize: boolean) => _set({ showRelativeSize }), + showTextDiff: false, setShowTextDiff: (showTextDiff: boolean) => _set({ showTextDiff }), @@ -103,6 +113,12 @@ export const useChatMicTimeoutMsValue = (): number => export const useChatMicTimeoutMs = (): [number, (micTimeoutMs: number) => void] => useAppChatStore(state => [state.micTimeoutMs, state.setMicTimeoutMs], shallow); +export const useChatShowRelativeSize = (): { showRelativeSize: boolean, toggleRelativeSize: () => void } => { + const showRelativeSize = useAppChatStore(state => state.showRelativeSize); + const toggleRelativeSize = () => useAppChatStore.getState().setShowRelativeSize(!showRelativeSize); + return { showRelativeSize, toggleRelativeSize }; +}; + export const useChatShowTextDiff = (): [boolean, (showDiff: boolean) => void] => useAppChatStore(state => [state.showTextDiff, state.setShowTextDiff], shallow);