UserFlags: show on messages

src/apps/chat/components/ChatDrawer.tsx

@@ -185,7 +185,7 @@ function ChatDrawer(props: {
         </ListItem>
         <MenuItem onClick={toggleShowPersonaIcons}>
           <ListItemDecorator>{showPersonaIcons && <CheckIcon />}</ListItemDecorator>
-          Persona Icons
+          Icons
         </MenuItem>
         <MenuItem onClick={toggleShowRelativeSize}>
           <ListItemDecorator>{showRelativeSize && <CheckIcon />}</ListItemDecorator>

src/apps/chat/components/ChatDrawerItem.tsx

@@ -54,6 +54,7 @@ export interface ChatNavigationItemData {
   isAlsoOpen: string | false;
   isEmpty: boolean;
   title: string;
+  userFlagsSummary: string | undefined;
   folder: DFolder | null | undefined; // null: 'All', undefined: do not show folder select
   updatedAt: number;
   messageCount: number;
@@ -87,7 +88,7 @@ function ChatDrawerItem(props: {
 
   // derived state
   const { onConversationBranch, onConversationExport, onConversationFolderChange } = props;
-  const { conversationId, isActive, isAlsoOpen, title, folder, messageCount, assistantTyping, systemPurposeId, searchFrequency } = props.item;
+  const { conversationId, isActive, isAlsoOpen, title, userFlagsSummary, folder, messageCount, assistantTyping, systemPurposeId, searchFrequency } = props.item;
   const isNew = messageCount === 0;
 
 
@@ -220,16 +221,19 @@ function ChatDrawerItem(props: {
       />
     )}
 
-    {/* Display search frequency if it exists and is greater than 0 */}
-    {searchFrequency > 0 && (
-      <Box sx={{ ml: 1 }}>
-        <Typography level='body-sm'>
-          {searchFrequency}
-        </Typography>
-      </Box>
-    )}
+    {/* Right text */}
+    {searchFrequency > 0 ? (
+      // Display search frequency if it exists and is greater than 0
+      <Typography level='body-sm'>
+        {searchFrequency}
+      </Typography>
+    ) : (userFlagsSummary && props.showSymbols) ? (
+      <Typography sx={{ mr: '5px' }}>
+        {userFlagsSummary}
+      </Typography>
+    ) : null}
 
-  </>, [assistantTyping, handleTitleEditBegin, handleTitleEditCancel, handleTitleEditChange, isActive, isEditingTitle, isNew, props.showSymbols, searchFrequency, textSymbol, title]);
+  </>, [assistantTyping, handleTitleEditBegin, handleTitleEditCancel, handleTitleEditChange, isActive, isEditingTitle, isNew, props.showSymbols, searchFrequency, textSymbol, title, userFlagsSummary]);
 
   const progressBarFixedComponent = React.useMemo(() =>
     progress > 0 && (

src/apps/chat/components/useChatNavRenderItems.tsx

@@ -1,7 +1,7 @@
 import { shallow } from 'zustand/shallow';
 
 import type { DFolder } from '~/common/state/store-folders';
-import { conversationTitle, DConversationId, messageHasUserFlag, useChatStore } from '~/common/state/store-chats';
+import { conversationTitle, DConversationId, DMessageUserFlag, messageHasUserFlag, messageUserFlagToEmoji, useChatStore } from '~/common/state/store-chats';
 
 import type { ChatNavigationItemData } from './ChatDrawerItem';
 
@@ -113,6 +113,11 @@ export function useChatNavRenderItems(
             searchFrequency = titleFrequency + messageFrequency;
           }
 
+          // union of message flags -> emoji string
+          const allFlags = new Set<DMessageUserFlag>();
+          _c.messages.forEach(_m => _m.userFlags?.forEach(flag => allFlags.add(flag)));
+          const userFlagsSummary = !allFlags.size ? undefined : Array.from(allFlags).map(messageUserFlagToEmoji).join('');
+
           // create the ChatNavigationData
           return {
             type: 'nav-item-chat-data',
@@ -121,6 +126,7 @@ export function useChatNavRenderItems(
             isAlsoOpen,
             isEmpty: !_c.messages.length && !_c.userTitle,
             title,
+            userFlagsSummary,
             folder: !allFolders.length
               ? undefined                             // don't show folder select if folders are disabled
               : _c.id === activeConversationId        // only show the folder for active conversation(s)

src/common/state/store-chats.ts

@@ -101,6 +101,14 @@ export function messageToggleUserFlag(message: DMessage, flag: DMessageUserFlag)
     return [...(message.userFlags || []), flag];
 }
 
+const dMessageUserFlagToEmojiMap: Record<DMessageUserFlag, string> = {
+  starred: '⭐️',
+};
+
+export function messageUserFlagToEmoji(flag: DMessageUserFlag): string {
+  return dMessageUserFlagToEmojiMap[flag] || '❓';
+}
+
 
 /// Conversations Store