fix demo conversation import

ggml-org · samolego · May 7, 2025 · May 8, 2025 · May 8, 2025 · May 12, 2025
commit 22a951bfc9fb135bf94f4478979c1563d1dd52c5
@@ -28,6 +28,36 @@
      "id": 1734087548329,
      "role": "assistant",
      "content": "Code block:\n```js\nconsole.log('hello world')\n```\n```sh\nls -la /dev\n```"
+    },
+    {
+      "id": 1734087548330,
+      "role": "user",
+      "content": "What is the weather in San Francisco?"
+    },
+    {
+      "id": 1734087548331,
+      "role": "assistant",
+      "content": "<think>User wants to know what's te weather like in San Francisco.</think>Let me check that for you!",
+      "tool_calls": [
+        {
+          "id": "call_abc123",
+          "type": "function",
+          "function": {
+            "name": "get_current_weather",
+            "arguments": "{\n\"location\": \"San Francisco\"\n}"
+          }
+        }
+      ]
+    },
+    {
+      "id": 1734087548332,
+      "role": "tool",
+      "content": "{\"temperature\": 20, \"condition\": \"sunny\"}"
+    },
+    {
+      "id": 1734087548333,
+      "role": "assistant",
+      "content": "The weather in San Francisco is currently 20°C and sunny."
    }
  ]
 }
@@ -63,7 +63,10 @@ function MessagePart({
  isMainMessage?: boolean;
 }) {
  const { config } = useAppContext();
-  const { content, thought, isThinking } = extractThoughts(message.content, message.role);
+  const { content, thought, isThinking } = extractThoughts(
+    message.content,
+    message.role
+  );

  if (message.role === 'tool' && baseClassName) {
    return (
@@ -89,10 +92,7 @@ function MessagePart({
      ) : (
        content &&
        content.trim() !== '' && (
-          <MarkdownDisplay
-            content={content}
-            isGenerating={isPending}
-          />
+          <MarkdownDisplay content={content} isGenerating={isPending} />
        )
      )}

@@ -147,7 +147,10 @@ export default function ChatMessage({
  const nextSibling = siblingLeafNodeIds[siblingCurrIdx + 1];
  const prevSibling = siblingLeafNodeIds[siblingCurrIdx - 1];

-  const mainSplitMessage = useMemo(() => extractThoughts(msg.content, msg.role), [msg.content, msg.role]);
+  const mainSplitMessage = useMemo(
+    () => extractThoughts(msg.content, msg.role),
+    [msg.content, msg.role]
+  );

  if (!viewingChat) return null;

@@ -246,7 +249,11 @@ export default function ChatMessage({
                      isPending={isPending}
                      showThoughts={true}
                      className={part.role === 'assistant' ? 'mt-2' : ''}
-                      baseClassName={part.role === 'tool' ? 'collapse bg-base-200 collapse-arrow mb-4 mt-2' : ''}
+                      baseClassName={
+                        part.role === 'tool'
+                          ? 'collapse bg-base-200 collapse-arrow mb-4 mt-2'
+                          : ''
+                      }
                    />
                  ))}
                </>
@@ -419,4 +426,4 @@ function ThoughtProcess({
      </div>
    </div>
  );
-}
+}
@@ -215,10 +215,7 @@ const SETTING_SECTIONS: SettingSection[] = [
          const debugImportDemoConv = async () => {
            const res = await fetch('/demo-conversation.json');
            const demoConv = await res.json();
-            StorageUtils.remove(demoConv.id);
-            for (const msg of demoConv.messages) {
-              StorageUtils.appendMsg(demoConv.id, msg);
-            }
+            await StorageUtils.importDemoConversation(demoConv);
          };
          return (
            <button className="btn" onClick={debugImportDemoConv}>

@@ -367,10 +367,6 @@ export const AppContextProvider = ({
        lastMsgId = await generateMessage(convId, lastMsgId, onChunk);
      }

-      // Fetch messages from DB
-      const savedMsgs = await StorageUtils.getMessages(convId);
-      console.log({ savedMsgs });
-
      return lastMsgId;
    } catch (err) {
      setPending(convId, null);

@@ -259,6 +259,49 @@ const StorageUtils = {
      localStorage.setItem('theme', theme);
    }
  },
+
+  /**
+   * Import a demo conversation from JSON data
+   */
+  async importDemoConversation(demoConv: {
+    demo?: boolean;
+    id: string;
+    lastModified: number;
+    messages: Message[];
+  }): Promise<void> {
+    if (demoConv.messages.length === 0) return;
+
+    // Create a new conversation with a fresh ID
+    const conv = await this.createConversation('Demo Conversation');
+
+    // Get the root message to use as parent
+    const rootMessages = await this.getMessages(conv.id);
+    const rootMessage = rootMessages.find((msg) => msg.type === 'root');
+    if (!rootMessage) {
+      throw new Error('Failed to find root message in created conversation');
+    }
+
+    // Transform demo messages to the format expected by appendMsgChain
+    const now = Date.now();
+    const transformedMessages = demoConv.messages
+      .filter(
+        (msg) =>
+          msg && msg.role && msg.content !== undefined && msg.id !== undefined
+      )
+      .map((msg, index) => ({
+        id: now + index,
+        convId: conv.id,
+        type: 'text' as const,
+        tool_calls: msg.tool_calls || [],
+        timestamp: now + index,
+        role: msg.role,
+        content: msg.content,
+        timings: msg.timings,
+      })) as Exclude<Message, 'parent' | 'children'>[];
+
+    // Use appendMsgChain to add all messages at once
+    await this.appendMsgChain(transformedMessages, rootMessage.id);
+  },
 };

 export default StorageUtils;