AutoBlocks: remove useRef

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: {
       <Typography level='body-sm'>
         {searchFrequency}
       </Typography>
-    ) : (props.showSymbols && (userFlagsSummary || containsImageAssets)) ? (
+    ) : (props.showSymbols && (userFlagsSummary || containsDocAttachments || containsImageAssets)) ? (
       <Box sx={{
         fontSize: 'xs',
         whiteSpace: 'nowrap',
         pointerEvents: 'none',
       }}>
-        {userFlagsSummary}{containsImageAssets && '🖍️'}
+        {userFlagsSummary}{containsDocAttachments && '📄'}{containsImageAssets && '🖍️'}
       </Box>
     ) : 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 && (

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

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<HTMLDivElement, BlocksRendererProps>((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<HTMLDivElement, BlocksRendererProps>((props, ref) => {
+}) {
 
   // props-derived state
   const fromAssistant = props.fromRole === 'assistant';
@@ -62,7 +63,7 @@ export const AutoBlocksRenderer = React.forwardRef<HTMLDivElement, BlocksRendere
   const { text, isTextCollapsed, forceTextExpanded, handleToggleExpansion } =
     useTextCollapser(props.text, fromUser);
   let autoBlocksStable =
-    useAutoBlocksMemo(text, props.renderAsCodeWithTitle, fromSystem, props.renderSanityTextDiffs);
+    useAutoBlocksMemoSemiStable(text, props.renderAsCodeWithTitle, fromSystem, props.renderSanityTextDiffs);
 
   // apply specialDiagramMode filter if applicable
   if (props.specialDiagramMode)
@@ -77,7 +78,7 @@ export const AutoBlocksRenderer = React.forwardRef<HTMLDivElement, BlocksRendere
 
   return (
     <BlocksContainer
-      ref={ref}
+      // ref={ref /* this will assign the ref, now not needed anymore */}
       onContextMenu={props.onContextMenu}
       onDoubleClick={props.onDoubleClick}
     >
@@ -163,6 +164,4 @@ export const AutoBlocksRenderer = React.forwardRef<HTMLDivElement, BlocksRendere
 
     </BlocksContainer>
   );
-});
-
-AutoBlocksRenderer.displayName = 'AutoBlocksRenderer';
+}

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<RenderBlockInputs>([]);