diff --git a/src/apps/chat/components/layout-drawer/ChatDrawerItem.tsx b/src/apps/chat/components/layout-drawer/ChatDrawerItem.tsx index 01d09629e..9293237fb 100644 --- a/src/apps/chat/components/layout-drawer/ChatDrawerItem.tsx +++ b/src/apps/chat/components/layout-drawer/ChatDrawerItem.tsx @@ -100,6 +100,7 @@ function ChatDrawerItem(props: { title, userSymbol, userFlagsSummary, + containsDocAttachments, containsImageAssets, folder, messageCount, @@ -270,17 +271,17 @@ function ChatDrawerItem(props: { {searchFrequency} - ) : (props.showSymbols && (userFlagsSummary || containsImageAssets)) ? ( + ) : (props.showSymbols && (userFlagsSummary || containsDocAttachments || containsImageAssets)) ? ( - {userFlagsSummary}{containsImageAssets && '🖍️'} + {userFlagsSummary}{containsDocAttachments && '📄'}{containsImageAssets && '🖍️'} ) : null} - , [beingGenerated, containsImageAssets, handleTitleEditBegin, handleTitleEditCancel, handleTitleEditChange, isActive, isEditingTitle, isNew, personaImageURI, personaSymbol, props.showSymbols, searchFrequency, title, userFlagsSummary]); + , [beingGenerated, containsDocAttachments, containsImageAssets, handleTitleEditBegin, handleTitleEditCancel, handleTitleEditChange, isActive, isEditingTitle, isNew, personaImageURI, personaSymbol, props.showSymbols, searchFrequency, title, userFlagsSummary]); const progressBarFixedComponent = React.useMemo(() => progress > 0 && ( diff --git a/src/apps/chat/components/layout-drawer/useChatDrawerRenderItems.tsx b/src/apps/chat/components/layout-drawer/useChatDrawerRenderItems.tsx index 832cb3176..8feb0ce9d 100644 --- a/src/apps/chat/components/layout-drawer/useChatDrawerRenderItems.tsx +++ b/src/apps/chat/components/layout-drawer/useChatDrawerRenderItems.tsx @@ -158,7 +158,7 @@ export function useChatDrawerRenderItems( title, userSymbol: _c.userSymbol || undefined, userFlagsSummary, - containsDocAttachments, + containsDocAttachments: containsDocAttachments && filterHasDocFragments, // special case: only show this icon when filtering - too many icons otherwise containsImageAssets, folder: !allFolders.length ? undefined // don't show folder select if folders are disabled diff --git a/src/modules/blocks/AutoBlocksRenderer.tsx b/src/modules/blocks/AutoBlocksRenderer.tsx index a19347fd3..ac29977b6 100644 --- a/src/modules/blocks/AutoBlocksRenderer.tsx +++ b/src/modules/blocks/AutoBlocksRenderer.tsx @@ -12,11 +12,21 @@ import { RenderPlainChatText } from './plaintext/RenderPlainChatText'; import { RenderTextDiff } from './textdiff/RenderTextDiff'; import { ToggleExpansionButton } from './ToggleExpansionButton'; import { renderCodeMemoOrNot } from './code/RenderCode'; -import { useAutoBlocksMemo, useTextCollapser } from './blocks.hooks'; +import { useAutoBlocksMemoSemiStable, useTextCollapser } from './blocks.hooks'; import { useScaledCodeSx, useScaledImageSx, useScaledTypographySx, useToggleExpansionButtonSx } from './blocks.styles'; -type BlocksRendererProps = { +// To get to the 'ref' version (which doesn't seem to be used anymore, and was used to isolate the source of the bubble bar): +// export const AutoBlocksRenderer = React.forwardRef((props, ref) => { +// AutoBlocksRenderer.displayName = 'AutoBlocksRenderer'; + +/** + * Features: collpase/expand, auto-detects HTML, SVG, Code, etc.. + * Used by (and more): + * - DocAttachmentFragmentEditor + * - ContentPartPlaceholder + */ +export function AutoBlocksRenderer(props: { // required text: string; fromRole: DMessageRole; @@ -41,16 +51,7 @@ type BlocksRendererProps = { onContextMenu?: (event: React.MouseEvent) => void; onDoubleClick?: (event: React.MouseEvent) => void; -}; - - -/** - * Features: collpase/expand, auto-detects HTML, SVG, Code, etc.. - * Used by (and more): - * - DocAttachmentFragmentEditor - * - ContentPartPlaceholder - */ -export const AutoBlocksRenderer = React.forwardRef((props, ref) => { +}) { // props-derived state const fromAssistant = props.fromRole === 'assistant'; @@ -62,7 +63,7 @@ export const AutoBlocksRenderer = React.forwardRef @@ -163,6 +164,4 @@ export const AutoBlocksRenderer = React.forwardRef ); -}); - -AutoBlocksRenderer.displayName = 'AutoBlocksRenderer'; \ No newline at end of file +} \ No newline at end of file diff --git a/src/modules/blocks/blocks.hooks.ts b/src/modules/blocks/blocks.hooks.ts index 355281084..495c4cfa4 100644 --- a/src/modules/blocks/blocks.hooks.ts +++ b/src/modules/blocks/blocks.hooks.ts @@ -53,7 +53,15 @@ function areBlocksEqualIdIgnored(block1: RenderBlockInputs[number] | undefined, return shallowEquals(rest1, rest2); } -export function useAutoBlocksMemo(text: string, forceCodeWithTitle: string | undefined, forceMarkdown: boolean, forceSanityTextDiffs: SanityTextDiff[] | undefined): RenderBlockInputs { + +/** + * Note: this will keep generally stable IDs, but will change them when: + * - when the AutoBlocksRenderer goes from non-memo to Memo: reassigned: * + * - when the text is still being parsed, e.g. a string will find a "```" block + * as part of the the running text, in which case the growing text will be + * reassigned (when it's chopped to before the code block, in the next call) + */ +export function useAutoBlocksMemoSemiStable(text: string, forceCodeWithTitle: string | undefined, forceMarkdown: boolean, forceSanityTextDiffs: SanityTextDiff[] | undefined): RenderBlockInputs { // state - previous blocks, to stabilize objects const prevBlocksRef = React.useRef([]);