diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx index 45aa47015..444d4997e 100644 --- a/src/apps/chat/components/message/ChatMessage.tsx +++ b/src/apps/chat/components/message/ChatMessage.tsx @@ -30,8 +30,8 @@ import { DMessage } from '~/common/state/store-chats'; import { InlineTextarea } from '~/common/components/InlineTextarea'; import { KeyStroke } from '~/common/components/KeyStroke'; import { Link } from '~/common/components/Link'; +import { adjustContentScaling, cssRainbowColorKeyframes, themeScalingMap } from '~/common/app.theme'; import { copyToClipboard } from '~/common/util/clipboardUtils'; -import { cssRainbowColorKeyframes, themeScalingMap } from '~/common/app.theme'; import { prettyBaseModel } from '~/common/util/modelUtils'; import { useUIPreferencesStore } from '~/common/state/store-ui'; import { useUXLabsStore } from '~/common/state/store-ux-labs'; @@ -192,7 +192,9 @@ export function ChatMessage(props: { isBottom?: boolean, isImagining?: boolean, isSpeaking?: boolean, - blocksShowDate?: boolean, + showAvatar?: boolean, + showBlocksDate?: boolean, + adjustContentScaling?: number, onConversationBranch?: (messageId: string) => void, onConversationRestartFrom?: (messageId: string, offset: number, chatEffectBeam: boolean) => Promise, onConversationTruncate?: (messageId: string) => void, @@ -213,9 +215,9 @@ export function ChatMessage(props: { // external state const labsChatBeam = useUXLabsStore(state => state.labsChatBeam); - const { cleanerLooks, contentScaling, doubleClickToEdit, renderMarkdown } = useUIPreferencesStore(state => ({ - cleanerLooks: state.zenMode === 'cleaner', - contentScaling: state.contentScaling, + const { showAvatar, contentScaling, doubleClickToEdit, renderMarkdown } = useUIPreferencesStore(state => ({ + showAvatar: props.showAvatar !== undefined ? props.showAvatar : state.zenMode !== 'cleaner', + contentScaling: adjustContentScaling(state.contentScaling, props.adjustContentScaling), doubleClickToEdit: state.doubleClickToEdit, renderMarkdown: state.renderMarkdown, }), shallow); @@ -240,8 +242,6 @@ export function ChatMessage(props: { const fromSystem = messageRole === 'system'; const wasEdited = !!messageUpdated; - const showAvatars = !cleanerLooks; - const textSel = selMenuText ? selMenuText : messageText; const isSpecialT2I = textSel.startsWith('https://images.prodia.xyz/') || textSel.startsWith('/draw ') || textSel.startsWith('/imagine ') || textSel.startsWith('/img '); const couldDiagram = textSel?.length >= 100 && !isSpecialT2I; @@ -402,8 +402,8 @@ export function ChatMessage(props: { // avatar const avatarEl: React.JSX.Element | null = React.useMemo( - () => showAvatars ? makeAvatar(messageAvatar, messageRole, messageOriginLLM, messagePurposeId, messageSender, messageTyping) : null, - [messageAvatar, messageOriginLLM, messagePurposeId, messageRole, messageSender, messageTyping, showAvatars], + () => showAvatar ? makeAvatar(messageAvatar, messageRole, messageOriginLLM, messagePurposeId, messageSender, messageTyping) : null, + [messageAvatar, messageOriginLLM, messagePurposeId, messageRole, messageSender, messageTyping, showAvatar], ); @@ -424,7 +424,7 @@ export function ChatMessage(props: { > {/* Avatar */} - {showAvatars && ( + {showAvatar && ( setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} onClick={event => setOpsMenuAnchor(event.currentTarget)} @@ -480,7 +480,7 @@ export function ChatMessage(props: { isBottom={props.isBottom} renderTextAsMarkdown={renderMarkdown} renderTextDiff={textDiffs || undefined} - showDate={props.blocksShowDate === true ? messageUpdated || messageCreated || undefined : undefined} + showDate={props.showBlocksDate === true ? messageUpdated || messageCreated || undefined : undefined} wasUserEdited={wasEdited} onContextMenu={(props.onMessageEdit && ENABLE_SELECTION_RIGHT_CLICK_MENU) ? handleBlocksContextMenu : undefined} onDoubleClick={(props.onMessageEdit && doubleClickToEdit) ? handleBlocksDoubleClick : undefined} diff --git a/src/apps/link-chat/LinkChatViewer.tsx b/src/apps/link-chat/LinkChatViewer.tsx index 3bec42776..0ecb5af1c 100644 --- a/src/apps/link-chat/LinkChatViewer.tsx +++ b/src/apps/link-chat/LinkChatViewer.tsx @@ -142,7 +142,7 @@ export function LinkChatViewer(props: { conversation: DConversation, storedAt: D key={'msg-' + message.id} message={message} fitScreen={isMobile} - blocksShowDate={idx === 0 || idx === filteredMessages.length - 1 /* first and last message */} + showBlocksDate={idx === 0 || idx === filteredMessages.length - 1 /* first and last message */} onMessageEdit={(_messageId, text: string) => message.text = text} />, )} diff --git a/src/common/app.theme.ts b/src/common/app.theme.ts index 6d6b62a7a..0a7fb74bc 100644 --- a/src/common/app.theme.ts +++ b/src/common/app.theme.ts @@ -149,6 +149,14 @@ export const themeBreakpoints = appTheme.breakpoints.values; // Dyanmic UI Sizing export type ContentScaling = 'xs' | 'sm' | 'md'; +export function adjustContentScaling(scaling: ContentScaling, offset?: number) { + if (!offset) return scaling; + const scalingArray = ['xs', 'sm', 'md']; + const scalingIndex = scalingArray.indexOf(scaling); + const newScalingIndex = Math.max(0, Math.min(scalingArray.length - 1, scalingIndex + offset)); + return scalingArray[newScalingIndex] as ContentScaling; +} + interface ContentScalingOptions { // BlocksRenderer blockCodeFontSize: string;