refac

src/lib/components/chat/Chat.svelte

@@ -2208,6 +2208,7 @@
 										{mergeResponses}
 										{chatActionHandler}
 										{addMessages}
+										topPadding={true}
 										bottomPadding={files.length > 0}
 										{onSelect}
 									/>

src/lib/components/chat/Messages.svelte

@@ -50,6 +50,7 @@
 
 	export let readOnly = false;
 
+	export let topPadding = false;
 	export let bottomPadding = false;
 	export let autoScroll;
 
@@ -445,6 +446,7 @@
 							{addMessages}
 							{triggerScroll}
 							{readOnly}
+							{topPadding}
 						/>
 					{/each}
 				</div>

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

@@ -39,7 +39,7 @@
 
 	export let className = 'my-2';
 	export let editorClassName = '';
-	export let stickyButtonsClassName = 'top-8';
+	export let stickyButtonsClassName = 'top-0';
 
 	let pyodideWorker = null;
 

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

@@ -68,7 +68,6 @@
 						(codeExecution?.result?.error || codeExecution?.result?.output)
 							? 'rounded-b-none'
 							: ''}
-						stickyButtonsClassName="top-0"
 						run={false}
 					/>
 				</div>

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

@@ -27,6 +27,7 @@
 	export let save = false;
 	export let preview = false;
 	export let floatingButtons = true;
+	export let topPadding = false;
 
 	export let onSave = (e) => {};
 	export let onSourceClick = (e) => {};
@@ -134,6 +135,7 @@
 		{save}
 		{preview}
 		{done}
+		{topPadding}
 		sourceIds={(sources ?? []).reduce((acc, s) => {
 			let ids = [];
 			s.document.forEach((document, index) => {

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

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

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

@@ -32,6 +32,7 @@
 
 	export let save = false;
 	export let preview = false;
+	export let topPadding = false;
 
 	export let onSave: Function = () => {};
 	export let onUpdate: Function = () => {};
@@ -105,6 +106,7 @@
 				{attributes}
 				{save}
 				{preview}
+				stickyButtonsClassName={topPadding ? 'top-8' : 'top-0'}
 				onSave={(value) => {
 					onSave({
 						raw: token.raw,

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

@@ -41,6 +41,7 @@
 	export let addMessages;
 	export let triggerScroll;
 	export let readOnly = false;
+	export let topPadding = false;
 </script>
 
 <div
@@ -52,6 +53,7 @@
 		{#if history.messages[messageId].role === 'user'}
 			<UserMessage
 				{user}
+				{chatId}
 				{history}
 				{messageId}
 				isFirstMessage={idx === 0}
@@ -66,6 +68,7 @@
 				{editMessage}
 				{deleteMessage}
 				{readOnly}
+				{topPadding}
 			/>
 		{:else if (history.messages[history.messages[messageId].parentId]?.models?.length ?? 1) === 1}
 			<ResponseMessage
@@ -90,6 +93,7 @@
 				{regenerateResponse}
 				{addMessages}
 				{readOnly}
+				{topPadding}
 			/>
 		{:else}
 			<MultiResponseMessages
@@ -112,6 +116,7 @@
 				{triggerScroll}
 				{addMessages}
 				{readOnly}
+				{topPadding}
 			/>
 		{/if}
 	{/if}

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

@@ -48,6 +48,8 @@
 
 	export let triggerScroll: Function;
 
+	export let topPadding = false;
+
 	const dispatch = createEventDispatcher();
 
 	let currentMessageId;
@@ -321,6 +323,7 @@
 									}}
 									{addMessages}
 									{readOnly}
+									{topPadding}
 								/>
 							{/if}
 						{/key}
@@ -376,6 +379,7 @@
 										}}
 										{addMessages}
 										{readOnly}
+										{topPadding}
 									/>
 								{/if}
 							{/key}

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

@@ -138,6 +138,7 @@
 
 	export let isLastMessage = true;
 	export let readOnly = false;
+	export let topPadding = false;
 
 	let buttonsContainerElement: HTMLDivElement;
 	let showDeleteConfirm = false;
@@ -798,7 +799,7 @@
 									<!-- always show message contents even if there's an error -->
 									<!-- unless message.error === true which is legacy error handling, where the error message is stored in message.content -->
 									<ContentRenderer
-										id={message.id}
+										id={`${chatId}-${message.id}`}
 										{history}
 										{selectedModels}
 										content={message.content}
@@ -808,6 +809,7 @@
 											($settings?.showFloatingActionButtons ?? true)}
 										save={!readOnly}
 										preview={!readOnly}
+										{topPadding}
 										done={($settings?.chatFadeStreamingText ?? true)
 											? (message?.done ?? false)
 											: true}

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

@@ -23,6 +23,7 @@
 
 	export let user;
 
+	export let chatId;
 	export let history;
 	export let messageId;
 
@@ -37,6 +38,7 @@
 
 	export let isFirstMessage: boolean;
 	export let readOnly: boolean;
+	export let topPadding = false;
 
 	let showDeleteConfirm = false;
 
@@ -317,7 +319,7 @@
 									: ' w-full'}"
 							>
 								{#if message.content}
-									<Markdown id={message.id} content={message.content} />
+									<Markdown id={`${chatId}-${message.id}`} content={message.content} {topPadding} />
 								{/if}
 							</div>
 						</div>

src/lib/components/layout/SearchModal.svelte

@@ -346,6 +346,7 @@
 					<div class="w-full h-full flex flex-col">
 						<Messages
 							className="h-full flex pt-4 pb-8 w-full"
+							chatId={`chat-preview-${selectedChat?.id ?? ''}`}
 							user={$user}
 							readOnly={true}
 							{selectedModels}

src/lib/stores/index.ts

@@ -50,6 +50,7 @@ export const channels = writable([]);
 export const chats = writable(null);
 export const pinnedChats = writable([]);
 export const tags = writable([]);
+export const folders = writable([]);
 
 export const selectedFolder = writable(null);