From 74dbe11d4a1cc65bea39717a01128f79bca89f9e Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Thu, 22 Feb 2024 08:40:23 -0800
Subject: [PATCH] Improve gfx on split screen

---
 src/apps/chat/AppChat.tsx                        | 2 +-
 src/apps/chat/components/ChatMessageList.tsx     | 4 ++--
 src/apps/chat/components/message/ChatMessage.tsx | 4 ++--
 src/apps/link-chat/LinkChatViewer.tsx            | 2 +-
 src/apps/settings-modal/ShortcutsModal.tsx       | 2 +-
 src/modules/aifn/digrams/DiagramsModal.tsx       | 2 +-
 src/modules/blocks/BlocksRenderer.tsx            | 4 ++--
 src/modules/blocks/code/RenderCode.tsx           | 4 ++--
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx
index 8e519724d..a168dde38 100644
--- a/src/apps/chat/AppChat.tsx
+++ b/src/apps/chat/AppChat.tsx
@@ -501,8 +501,8 @@ export function AppChat() {
                 conversationId={_paneConversationId}
                 capabilityHasT2I={capabilityHasT2I}
                 chatLLMContextTokens={chatLLM?.contextTokens ?? null}
+                fitScreen={isMobile || isMultiPane}
                 isMessageSelectionMode={isMessageSelectionMode}
-                isMobile={isMobile}
                 setIsMessageSelectionMode={setIsMessageSelectionMode}
                 onConversationBranch={handleConversationBranch}
                 onConversationExecuteHistory={handleConversationExecuteHistory}
diff --git a/src/apps/chat/components/ChatMessageList.tsx b/src/apps/chat/components/ChatMessageList.tsx
index 12000cd5e..fbbcd964b 100644
--- a/src/apps/chat/components/ChatMessageList.tsx
+++ b/src/apps/chat/components/ChatMessageList.tsx
@@ -27,8 +27,8 @@ export function ChatMessageList(props: {
   conversationId: DConversationId | null,
   capabilityHasT2I: boolean,
   chatLLMContextTokens: number | null,
+  fitScreen: boolean,
   isMessageSelectionMode: boolean,
-  isMobile: boolean,
   onConversationBranch: (conversationId: DConversationId, messageId: string) => void,
   onConversationExecuteHistory: (conversationId: DConversationId, history: DMessage[], chatEffectBestOf: boolean) => Promise<void>,
   onTextDiagram: (diagramConfig: DiagramConfig | null) => void,
@@ -230,9 +230,9 @@ export function ChatMessageList(props: {
               key={'msg-' + message.id}
               message={message}
               diffPreviousText={message === diffTargetMessage ? diffPrevText : undefined}
+              fitScreen={props.fitScreen}
               isBottom={idx === count - 1}
               isImagining={isImagining}
-              isMobile={props.isMobile}
               isSpeaking={isSpeaking}
               onConversationBranch={handleConversationBranch}
               onConversationRestartFrom={handleConversationRestartFrom}
diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx
index 69bc48104..cfb1ce58c 100644
--- a/src/apps/chat/components/message/ChatMessage.tsx
+++ b/src/apps/chat/components/message/ChatMessage.tsx
@@ -183,8 +183,8 @@ export const ChatMessageMemo = React.memo(ChatMessage);
 export function ChatMessage(props: {
   message: DMessage,
   diffPreviousText?: string,
+  fitScreen: boolean,
   isBottom?: boolean,
-  isMobile: boolean,
   isImagining?: boolean,
   isSpeaking?: boolean,
   blocksShowDate?: boolean,
@@ -468,8 +468,8 @@ export function ChatMessage(props: {
           fromRole={messageRole}
           contentScaling={contentScaling}
           errorMessage={errorMessage}
+          fitScreen={props.fitScreen}
           isBottom={props.isBottom}
-          isMobile={props.isMobile}
           renderTextAsMarkdown={renderMarkdown}
           renderTextDiff={textDiffs || undefined}
           showDate={props.blocksShowDate === true ? messageUpdated || messageCreated || undefined : undefined}
diff --git a/src/apps/link-chat/LinkChatViewer.tsx b/src/apps/link-chat/LinkChatViewer.tsx
index 336e9e299..3bec42776 100644
--- a/src/apps/link-chat/LinkChatViewer.tsx
+++ b/src/apps/link-chat/LinkChatViewer.tsx
@@ -141,7 +141,7 @@ export function LinkChatViewer(props: { conversation: DConversation, storedAt: D
               <ChatMessageMemo
                 key={'msg-' + message.id}
                 message={message}
-                isMobile={isMobile}
+                fitScreen={isMobile}
                 blocksShowDate={idx === 0 || idx === filteredMessages.length - 1 /* first and last message */}
                 onMessageEdit={(_messageId, text: string) => message.text = text}
               />,
diff --git a/src/apps/settings-modal/ShortcutsModal.tsx b/src/apps/settings-modal/ShortcutsModal.tsx
index 8cddc1976..881944bee 100644
--- a/src/apps/settings-modal/ShortcutsModal.tsx
+++ b/src/apps/settings-modal/ShortcutsModal.tsx
@@ -47,7 +47,7 @@ export function ShortcutsModal(props: { onClose: () => void }) {
         text={shortcutsMd}
         fromRole='assistant'
         contentScaling='sm'
-        isMobile={isMobile}
+        fitScreen={isMobile}
         renderTextAsMarkdown
       />
     </GoodModal>
diff --git a/src/modules/aifn/digrams/DiagramsModal.tsx b/src/modules/aifn/digrams/DiagramsModal.tsx
index 46c2be8a0..8e4957ced 100644
--- a/src/modules/aifn/digrams/DiagramsModal.tsx
+++ b/src/modules/aifn/digrams/DiagramsModal.tsx
@@ -192,7 +192,7 @@ export function DiagramsModal(props: { config: DiagramConfig, onClose: () => voi
         <BlocksRenderer
           text={diagramCode}
           fromRole='assistant'
-          isMobile={isMobile}
+          fitScreen={isMobile}
           contentScaling={contentScaling}
           renderTextAsMarkdown={false}
           specialDiagramMode
diff --git a/src/modules/blocks/BlocksRenderer.tsx b/src/modules/blocks/BlocksRenderer.tsx
index ece0c376c..b4d2f5449 100644
--- a/src/modules/blocks/BlocksRenderer.tsx
+++ b/src/modules/blocks/BlocksRenderer.tsx
@@ -51,8 +51,8 @@ export function BlocksRenderer(props: {
   renderTextDiff?: TextDiff[];
 
   errorMessage?: React.ReactNode;
+  fitScreen: boolean;
   isBottom?: boolean;
-  isMobile: boolean;
   showDate?: number;
   wasUserEdited?: boolean;
 
@@ -184,7 +184,7 @@ export function BlocksRenderer(props: {
             return block.type === 'html'
               ? <RenderHtml key={'html-' + index} htmlBlock={block} sx={scaledCodeSx} />
               : block.type === 'code'
-                ? <RenderCodeMemoOrNot key={'code-' + index} codeBlock={block} isMobile={props.isMobile} noCopyButton={props.specialDiagramMode} optimizeLightweight={!optimizeWithMemo} sx={scaledCodeSx} />
+                ? <RenderCodeMemoOrNot key={'code-' + index} codeBlock={block} fitScreen={props.fitScreen} noCopyButton={props.specialDiagramMode} optimizeLightweight={!optimizeWithMemo} sx={scaledCodeSx} />
                 : block.type === 'image'
                   ? <RenderImage key={'image-' + index} imageBlock={block} onRunAgain={props.isBottom ? props.onImageRegenerate : undefined} sx={scaledTypographySx} />
                   : block.type === 'latex'
diff --git a/src/modules/blocks/code/RenderCode.tsx b/src/modules/blocks/code/RenderCode.tsx
index 820ad3837..28bc512be 100644
--- a/src/modules/blocks/code/RenderCode.tsx
+++ b/src/modules/blocks/code/RenderCode.tsx
@@ -64,7 +64,7 @@ export const overlayButtonsSx: SxProps = {
 
 interface RenderCodeBaseProps {
   codeBlock: CodeBlock,
-  isMobile?: boolean,
+  fitScreen?: boolean,
   noCopyButton?: boolean,
   optimizeLightweight?: boolean,
   sx?: SxProps,
@@ -78,7 +78,7 @@ interface RenderCodeImplProps extends RenderCodeBaseProps {
 function RenderCodeImpl(props: RenderCodeImplProps) {
 
   // state
-  const [fitScreen, setFitScreen] = React.useState(!!props.isMobile);
+  const [fitScreen, setFitScreen] = React.useState(!!props.fitScreen);
   const [showHTML, setShowHTML] = React.useState(false);
   const [showMermaid, setShowMermaid] = React.useState(true);
   const [showPlantUML, setShowPlantUML] = React.useState(true);