refac: pdf export

src/lib/components/chat/Messages.svelte

@@ -49,6 +49,7 @@
 	export let addMessages: Function = () => {};
 
 	export let readOnly = false;
+	export let editCodeBlock = true;
 
 	export let topPadding = false;
 	export let bottomPadding = false;
@@ -56,7 +57,7 @@
 
 	export let onSelect = (e) => {};
 
-	let messagesCount = 20;
+	export let messagesCount: number | null = 20;
 	let messagesLoading = false;
 
 	const loadMoreMessages = async () => {
@@ -76,7 +77,7 @@
 		let _messages = [];
 
 		let message = history.messages[history.currentId];
-		while (message && _messages.length <= messagesCount) {
+		while (message && (messagesCount !== null ? _messages.length <= messagesCount : true)) {
 			_messages.unshift({ ...message });
 			message = message.parentId !== null ? history.messages[message.parentId] : null;
 		}
@@ -447,6 +448,7 @@
 								{addMessages}
 								{triggerScroll}
 								{readOnly}
+								{editCodeBlock}
 								{topPadding}
 							/>
 						{/each}

src/lib/components/chat/Messages/CodeBlock.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import hljs from 'highlight.js';
+
 	import mermaid from 'mermaid';
 
 	import { v4 as uuidv4 } from 'uuid';
@@ -22,6 +24,7 @@
 	const i18n = getContext('i18n');
 
 	export let id = '';
+	export let edit = true;
 
 	export let onSave = (e) => {};
 	export let onUpdate = (e) => {};
@@ -512,17 +515,31 @@
 				<div class=" pt-7 bg-gray-50 dark:bg-gray-850"></div>
 
 				{#if !collapsed}
-					<CodeEditor
-						value={code}
-						{id}
-						{lang}
-						onSave={() => {
-							saveCode();
-						}}
-						onChange={(value) => {
-							_code = value;
-						}}
-					/>
+					{#if edit}
+						<CodeEditor
+							value={code}
+							{id}
+							{lang}
+							onSave={() => {
+								saveCode();
+							}}
+							onChange={(value) => {
+								_code = value;
+							}}
+						/>
+					{:else}
+						<pre
+							class=" hljs p-4 px-5 overflow-x-auto"
+							style="border-top-left-radius: 0px; border-top-right-radius: 0px; {(executing ||
+								stdout ||
+								stderr ||
+								result) &&
+								'border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;'}"><code
+								class="language-{lang} rounded-t-none whitespace-pre text-sm"
+								>{@html hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value ||
+									code}</code
+							></pre>
+					{/if}
 				{:else}
 					<div
 						class="bg-gray-50 dark:bg-black dark:text-white rounded-b-lg! pt-2 pb-2 px-4 flex flex-col gap-2 text-xs"

src/lib/components/chat/Messages/ContentRenderer.svelte

@@ -30,6 +30,8 @@
 	export let save = false;
 	export let preview = false;
 	export let floatingButtons = true;
+
+	export let editCodeBlock = true;
 	export let topPadding = false;
 
 	export let onSave = (e) => {};
@@ -138,6 +140,7 @@
 		{save}
 		{preview}
 		{done}
+		{editCodeBlock}
 		{topPadding}
 		sourceIds={(sources ?? []).reduce((acc, source) => {
 			let ids = [];

src/lib/components/chat/Messages/Markdown.svelte

@@ -14,6 +14,8 @@
 	export let model = null;
 	export let save = false;
 	export let preview = false;
+
+	export let editCodeBlock = true;
 	export let topPadding = false;
 
 	export let sourceIds = [];
@@ -52,6 +54,7 @@
 		{done}
 		{save}
 		{preview}
+		{editCodeBlock}
 		{topPadding}
 		{onTaskClick}
 		{onSourceClick}

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -32,6 +32,8 @@
 
 	export let save = false;
 	export let preview = false;
+
+	export let editCodeBlock = true;
 	export let topPadding = false;
 
 	export let onSave: Function = () => {};
@@ -106,6 +108,7 @@
 				{attributes}
 				{save}
 				{preview}
+				edit={editCodeBlock}
 				stickyButtonsClassName={topPadding ? 'top-8' : 'top-0'}
 				onSave={(value) => {
 					onSave({

src/lib/components/chat/Messages/Message.svelte

@@ -41,6 +41,7 @@
 	export let addMessages;
 	export let triggerScroll;
 	export let readOnly = false;
+	export let editCodeBlock = true;
 	export let topPadding = false;
 </script>
 
@@ -68,6 +69,7 @@
 				{editMessage}
 				{deleteMessage}
 				{readOnly}
+				{editCodeBlock}
 				{topPadding}
 			/>
 		{:else if (history.messages[history.messages[messageId].parentId]?.models?.length ?? 1) === 1}
@@ -93,6 +95,7 @@
 				{regenerateResponse}
 				{addMessages}
 				{readOnly}
+				{editCodeBlock}
 				{topPadding}
 			/>
 		{:else}
@@ -116,6 +119,7 @@
 				{triggerScroll}
 				{addMessages}
 				{readOnly}
+				{editCodeBlock}
 				{topPadding}
 			/>
 		{/if}

src/lib/components/chat/Messages/MultiResponseMessages.svelte

@@ -29,6 +29,7 @@
 
 	export let isLastMessage;
 	export let readOnly = false;
+	export let editCodeBlock = true;
 
 	export let setInputText: Function = () => {};
 	export let updateChat: Function;
@@ -379,6 +380,7 @@
 										}}
 										{addMessages}
 										{readOnly}
+										{editCodeBlock}
 										{topPadding}
 									/>
 								{/if}

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -138,6 +138,7 @@
 
 	export let isLastMessage = true;
 	export let readOnly = false;
+	export let editCodeBlock = true;
 	export let topPadding = false;
 
 	let citationsElement: HTMLDivElement;
@@ -819,6 +820,7 @@
 											($settings?.showFloatingActionButtons ?? true)}
 										save={!readOnly}
 										preview={!readOnly}
+										{editCodeBlock}
 										{topPadding}
 										done={($settings?.chatFadeStreamingText ?? true)
 											? (message?.done ?? false)

src/lib/components/chat/Messages/UserMessage.svelte

@@ -38,6 +38,7 @@
 
 	export let isFirstMessage: boolean;
 	export let readOnly: boolean;
+	export let editCodeBlock = true;
 	export let topPadding = false;
 
 	let showDeleteConfirm = false;
@@ -332,7 +333,12 @@
 								: ' w-full'} {$settings.chatDirection === 'RTL' ? 'text-right' : ''}"
 						>
 							{#if message.content}
-								<Markdown id={`${chatId}-${message.id}`} content={message.content} {topPadding} />
+								<Markdown
+									id={`${chatId}-${message.id}`}
+									content={message.content}
+									{editCodeBlock}
+									{topPadding}
+								/>
 							{/if}
 						</div>
 					</div>