{ // Phase 1: Stream reasoning content in chunks let reasoningText = 'I need to think about this carefully. Let me break down the problem:\n\n1. The user is asking for help with something complex\n2. I should provide a thorough and helpful response\n3. I need to consider multiple approaches\n4. The best solution would be to explain step by step\n\nThis approach will ensure clarity and understanding.'; let reasoningChunk = 'I'; let i = 0; while (i < reasoningText.length) { const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters const chunk = reasoningText.slice(i, i + chunkSize); reasoningChunk += chunk; // Update the reactive state directly streamingMessage.thinking = reasoningChunk; i += chunkSize; await new Promise((resolve) => setTimeout(resolve, 50)); } const regularText = "Based on my analysis, here's the solution:\n\n**Step 1:** First, we need to understand the requirements clearly.\n\n**Step 2:** Then we can implement the solution systematically.\n\n**Step 3:** Finally, we test and validate the results.\n\nThis approach ensures we cover all aspects of the problem effectively."; let contentChunk = ''; i = 0; while (i < regularText.length) { const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters const chunk = regularText.slice(i, i + chunkSize); contentChunk += chunk; // Update the reactive state directly streamingMessage.content = contentChunk; i += chunkSize; await new Promise((resolve) => setTimeout(resolve, 50)); } streamingMessage.timestamp = Date.now(); }} >
{ // Import the chat store to simulate loading state const { chatStore } = await import('$lib/stores/chat.svelte'); // Set loading state to true to trigger the processing UI chatStore.isLoading = true; // Simulate the processing state hook behavior // This will show the "Generating..." text and parameter details await new Promise(resolve => setTimeout(resolve, 100)); }} /> { // Phase 1: Stream reasoning content const thinkingContent = 'Let me work through this problem systematically:\n\n1. First, I need to understand what the user is asking\n2. Then I should consider different approaches\n3. I need to evaluate the pros and cons\n4. Finally, I should provide a clear recommendation\n\nThis step-by-step approach will ensure accuracy.'; let currentContent = '\n'; streamingThinkMessage.content = currentContent; for (let i = 0; i < thinkingContent.length; i++) { currentContent += thinkingContent[i]; streamingThinkMessage.content = currentContent; await new Promise((resolve) => setTimeout(resolve, 5)); } // Close the thinking block currentContent += '\n\n\n'; streamingThinkMessage.content = currentContent; await new Promise((resolve) => setTimeout(resolve, 200)); // Phase 2: Stream main response content const responseContent = "Based on my analysis above, here's the solution:\n\n**Key Points:**\n- The approach should be systematic\n- We need to consider all factors\n- Implementation should be step-by-step\n\nThis ensures the best possible outcome."; for (let i = 0; i < responseContent.length; i++) { currentContent += responseContent[i]; streamingThinkMessage.content = currentContent; await new Promise((resolve) => setTimeout(resolve, 10)); } streamingThinkMessage.timestamp = Date.now(); }} >
{ // Phase 1: Stream [THINK] reasoning content const thinkingContent = 'Using the DeepSeek format now:\n\n- This demonstrates the [THINK] bracket format\n- Should parse identically to <think> tags\n- The UI should display this in the thinking section\n- Main content should be separate\n\nBoth formats provide the same functionality.'; let currentContent = '[THINK]\n'; streamingBracketMessage.content = currentContent; for (let i = 0; i < thinkingContent.length; i++) { currentContent += thinkingContent[i]; streamingBracketMessage.content = currentContent; await new Promise((resolve) => setTimeout(resolve, 5)); } // Close the thinking block currentContent += '\n[/THINK]\n\n'; streamingBracketMessage.content = currentContent; await new Promise((resolve) => setTimeout(resolve, 200)); // Phase 2: Stream main response content const responseContent = "Here's my response after using the [THINK] format:\n\n**Observations:**\n- Both <think> and [THINK] formats work seamlessly\n- The parsing logic handles both cases\n- UI display is consistent across formats\n\nThis demonstrates the enhanced thinking content support."; for (let i = 0; i < responseContent.length; i++) { currentContent += responseContent[i]; streamingBracketMessage.content = currentContent; await new Promise((resolve) => setTimeout(resolve, 10)); } streamingBracketMessage.timestamp = Date.now(); }} >