streaming, markdown, model selecting, and lots more

2026-02-02 23:16:06 -06:00
parent 8c28946703
commit d5a5945c03
114 changed files with 6109 additions and 2938 deletions
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { Entity } from '@triplit/client';
+import type schema from '#triplit/schema';
+import Debug from './Debug.vue';
+
+const props = defineProps<{
+    toolCall: Readonly<Entity<typeof schema, 'tool_calls'>>;
+}>();
+
+const deubgToolCallOpen = ref(false);
+
+const toggleDebugToolCall = () => {
+    deubgToolCallOpen.value = !deubgToolCallOpen.value;
+};
+
+const iconName = ref('mynaui:tool');
+const iconColor = ref('var(--color-subtle)');
+
+watch(
+    () => props.toolCall.status,
+    (status) => {
+        switch (status) {
+            case 'pending':
+                iconName.value = 'svg-spinners:180-ring-with-bg';
+                break;
+            case 'completed':
+                iconName.value = 'mynaui:tool';
+                break;
+            case 'failed':
+                iconName.value = 'mynaui:x-solid';
+                iconColor.value = '#ff3b3b';
+                break;
+        }
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <div
+            class="select-none w-full hover:bg-[var(--color-highlight)] group rounded-lg p-1 flex justify-between items-center text-[--color-reasoning] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+            <div class="flex items-center justify-between w-full">
+                <div class="flex items-center gap-1">
+                    <div
+                        class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-neutral)] flex items-center justify-center">
+                        <Icon :name="iconName" :style="{ color: iconColor }"
+                            class="w-3 h-3 text-[var(--color-subtle)]" />
+                    </div>
+                    {{ toolCall.toolName }}
+                </div>
+
+                <div
+                    class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                    <button @click="toggleDebugToolCall"
+                        class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden hover:bg-[var(--color-highlight)] flex items-center justify-center transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                        <Icon name="mynaui:search" class="w-3 h-3 text-[var(--color-subtle)]" />
+                    </button>
+                </div>
+            </div>
+        </div>
+        <Debug v-if="deubgToolCallOpen" :toolCall="toolCall" />
+    </div>
+</template>