(fix) Smooth persona carousel think rendering

src/lib/components/chat/PersonaResponseCarousel.svelte

@@ -4,11 +4,12 @@
 	import CarbonChevronRight from "~icons/carbon/chevron-right";
 	import CarbonChevronDown from "~icons/carbon/chevron-down";
 	import CarbonChevronUp from "~icons/carbon/chevron-up";
-	import MarkdownRenderer from "./MarkdownRenderer.svelte";
-	import OpenReasoningResults from "./OpenReasoningResults.svelte";
-	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
-	import CarbonRotate360 from "~icons/carbon/rotate-360";
-	import { THINK_BLOCK_REGEX } from "$lib/constants/thinkBlockRegex";
+import MarkdownRenderer from "./MarkdownRenderer.svelte";
+import OpenReasoningResults from "./OpenReasoningResults.svelte";
+import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
+import CarbonRotate360 from "~icons/carbon/rotate-360";
+import ThinkingPlaceholder from "./ThinkingPlaceholder.svelte";
+import { hasThinkSegments, splitThinkSegments } from "$lib/utils/stripThinkBlocks";
 
 	interface Props {
 		personaResponses: PersonaResponse[];
@@ -156,7 +157,7 @@
 
 	// Check if content has <think> blocks
 	function hasClientThink(content: string | undefined): boolean {
-		return content ? THINK_BLOCK_REGEX.test(content) : false;
+	return content ? hasThinkSegments(content) : false;
 	}
 
 	let showLeftArrow = $derived(currentIndex > 0);
@@ -268,28 +269,28 @@
 						class="content-wrapper relative"
 						style={isExpanded ? '' : `max-height: ${MAX_COLLAPSED_HEIGHT}px; overflow: hidden;`}
 					>
-						{#if hasClientThink(displayedResponse.content)}
-							{#each displayedResponse.content.split(THINK_BLOCK_REGEX) as part, _i}
-								{#if part && part.startsWith("<think>")}
-									{@const isClosed = part.endsWith("</think>")}
-									{@const thinkContent = part.slice(7, isClosed ? -8 : undefined)}
-									{@const summary = isClosed
-										? thinkContent.trim().split(/\n+/)[0] || "Reasoning"
-										: "Thinking..."}
-
-									<OpenReasoningResults
-										{summary}
-										content={thinkContent}
-										loading={loading && !isClosed}
-									/>
-								{:else if part && part.trim().length > 0}
-									<div
-										class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
-									>
-										<MarkdownRenderer content={part} {loading} />
-									</div>
+					{#if hasClientThink(displayedResponse.content)}
+						{@const segments = splitThinkSegments(displayedResponse.content ?? "")}
+						{#each segments as part, _i}
+							{#if part && part.startsWith("<think>")}
+								{@const trimmed = part.trimEnd()}
+								{@const isClosed = trimmed.endsWith("</think>")}
+
+								{#if isClosed}
+									{@const thinkContent = trimmed.slice(7, -8)}
+									{@const summary = thinkContent.trim().split(/\n+/)[0] || "Reasoning"}
+									<OpenReasoningResults {summary} content={thinkContent} loading={false} />
+								{:else}
+									<ThinkingPlaceholder />
 								{/if}
-							{/each}
+							{:else if part && part.trim().length > 0}
+								<div
+									class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
+								>
+									<MarkdownRenderer content={part} {loading} />
+								</div>
+							{/if}
+						{/each}
 						{:else}
 							<div
 								class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"