fix: basic display of messageparts

Fixes #7

Author: zhudotexe

viz/src/components/messages/AssistantMessage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Markdown from "@/components/Markdown.vue";
 import AssistantFunctionCall from "@/components/messages/AssistantFunctionCall.vue";
+import MessageContent from "@/components/messages/MessageContent.vue";
 import type { ChatMessage } from "@/redel/models";
 
 const props = defineProps<{
@@ -16,9 +16,7 @@ const props = defineProps<{
       </p>
     </figure>
     <div class="media-content">
-      <div class="content allow-wrap-anywhere" v-if="message.content">
-        <Markdown :content="props.message.content!" />
-      </div>
+      <MessageContent v-if="message.content" :content="props.message.content!" />
       <!-- function call -->
       <div v-if="message.tool_calls">
         <AssistantFunctionCall :function-call="tc.function" v-for="tc in message.tool_calls" />

viz/src/components/messages/MessageContent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Markdown from "@/components/Markdown.vue";
+import { computed } from "vue";
+
+const props = defineProps<{
+  content: string | any[] | null;
+}>();
+
+const contentParts = computed(() => {
+  if (typeof props.content === "string") {
+    return [props.content];
+  } else if (!props.content) {
+    return [];
+  }
+
+  let parts: any[] = [];
+  let lastStringContent = "";
+  for (const part of props.content) {
+    if (typeof part === "string") {
+      lastStringContent += part;
+    } else {
+      if (lastStringContent) {
+        parts.push(lastStringContent);
+        lastStringContent = "";
+      }
+      parts.push(part);
+    }
+  }
+  if (lastStringContent) {
+    parts.push(lastStringContent);
+  }
+
+  return parts;
+});
+</script>
+
+<template>
+  <div class="content allow-wrap-anywhere">
+    <template v-for="part in contentParts">
+      <Markdown v-if="typeof part === 'string'" :content="part" />
+      <details v-else>
+        <summary>Unrendered data</summary>
+        <pre>{{ part }}</pre>
+      </details>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

viz/src/components/messages/SystemMessage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Markdown from "@/components/Markdown.vue";
+import MessageContent from "@/components/messages/MessageContent.vue";
 import type { ChatMessage } from "@/redel/models";
 
 const props = defineProps<{
@@ -10,9 +10,7 @@ const props = defineProps<{
 <template>
   <div class="system-message">
     <div class="box has-text-centered mx-4 p-2">
-      <div class="content allow-wrap-anywhere">
-        <Markdown :content="props.message.content!" />
-      </div>
+      <MessageContent v-if="message.content" :content="props.message.content!" />
     </div>
   </div>
 </template>

viz/src/components/messages/UserMessage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Markdown from "@/components/Markdown.vue";
+import MessageContent from "@/components/messages/MessageContent.vue";
 import type { ChatMessage } from "@/redel/models";
 
 const props = defineProps<{
@@ -15,9 +15,7 @@ const props = defineProps<{
       </p>
     </figure>
     <div class="media-content">
-      <div class="content allow-wrap-anywhere">
-        <Markdown :content="props.message.content!" />
-      </div>
+      <MessageContent v-if="message.content" :content="props.message.content!" />
     </div>
   </div>
 </template>

viz/src/redel/models.ts

@@ -26,7 +26,7 @@ export interface ToolCall {
 
 export interface ChatMessage {
   role: ChatRole;
-  content: string | null;
+  content: string | object[] | null;
   name: string | null;
   tool_call_id: string | null;
   tool_calls: ToolCall[] | null;