refac

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

@@ -648,10 +648,7 @@
 				<div class="chat-{message.role} w-full min-w-full markdown-prose">
 					<div>
 						{#if model?.info?.meta?.capabilities?.status_updates ?? true}
-							<StatusHistory
+							<StatusHistory statusHistory={message?.statusHistory} />
-								statusHistory={message?.statusHistory}
-								expand={message?.content === ''}
-							/>
 						{/if}
 
 						{#if message?.files && message.files?.filter((f) => f.type === 'image').length > 0}

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

@@ -29,38 +29,6 @@
 {#if history && history.length > 0}
 	{#if status?.hidden !== true}
 		<div class="text-sm flex flex-col w-full">
-			{#if showHistory}
-				<div class="flex flex-row">
-					{#if history.length > 1}
-						<div class="w-full">
-							{#each history as status, idx}
-								{#if idx !== history.length - 1}
-									<div class="flex items-stretch gap-2 mb-1">
-										<div class=" ">
-											<div class="pt-3 px-1 mb-1.5">
-												<span
-													class="relative flex size-1.5 rounded-full justify-center items-center"
-												>
-													<span
-														class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-300"
-													></span>
-												</span>
-											</div>
-
-											<div
-												class="w-[0.5px] ml-[6.5px] h-[calc(100%-14px)] bg-gray-300 dark:bg-gray-700"
-											/>
-										</div>
-
-										<StatusItem {status} done={true} />
-									</div>
-								{/if}
-							{/each}
-						</div>
-					{/if}
-				</div>
-			{/if}
-
 			<button
 				class="w-full"
 				on:click={() => {
@@ -68,23 +36,38 @@
 				}}
 			>
 				<div class="flex items-start gap-2">
-					{#if history.length > 1}
-						<div class="pt-3 px-1">
-							<span class="relative flex size-1.5 rounded-full justify-center items-center">
-								{#if status?.done === false}
-									<span
-										class="absolute inline-flex h-full w-full animate-ping rounded-full bg-gray-500 dark:bg-gray-300 opacity-75"
-									></span>
-								{/if}
-								<span
-									class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-300"
-								></span>
-							</span>
-						</div>
-					{/if}
 					<StatusItem {status} />
 				</div>
 			</button>
+
+			{#if showHistory}
+				<div class="flex flex-row">
+					{#if history.length > 1}
+						<div class="w-full">
+							{#each history as status, idx}
+								<div class="flex items-stretch gap-2 mb-1">
+									<div class=" ">
+										<div class="pt-3 px-1 mb-1.5">
+											<span class="relative flex size-1.5 rounded-full justify-center items-center">
+												<span
+													class="relative inline-flex size-1.5 rounded-full bg-gray-500 dark:bg-gray-400"
+												></span>
+											</span>
+										</div>
+										{#if idx !== history.length - 1}
+											<div
+												class="w-[0.5px] ml-[6.5px] h-[calc(100%-14px)] bg-gray-300 dark:bg-gray-700"
+											/>
+										{/if}
+									</div>
+
+									<StatusItem {status} done={true} />
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
 		</div>
 	{/if}
 {/if}