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,85 @@
+<script lang="ts" setup>
+import type { Entity } from '@triplit/client';
+import type schema from '#triplit/schema';
+
+const props = defineProps<{
+    part: Readonly<Entity<typeof schema, 'message_parts'>>;
+}>();
+
+const reasoningOpen = ref(!props.part.finished);
+
+watch(
+    () => props.part.finished,
+    () => {
+        reasoningOpen.value = !props.part.finished;
+    },
+);
+
+const containerRef: Ref<HTMLDivElement | null> = ref(null);
+const scrollState = ref('middle');
+
+const { scrollToBottom } = useAutoScroll(containerRef);
+
+const handleScroll = () => {
+    if (!containerRef.value) return;
+
+    const container = containerRef.value;
+    const scrollTop = container.scrollTop;
+    const scrollHeight = container.scrollHeight;
+    const clientHeight = container.clientHeight;
+
+    const topThreshold = 0.02 * clientHeight;
+
+    if (scrollTop <= topThreshold) {
+        scrollState.value = 'top';
+    } else if (scrollTop + 100 >= scrollHeight - clientHeight) {
+        scrollState.value = 'bottom';
+    } else {
+        scrollState.value = 'middle';
+    }
+};
+
+const toggleReasoning = async () => {
+    if (!props.part.finished) return;
+
+    reasoningOpen.value = !reasoningOpen.value;
+    if (!reasoningOpen.value) return;
+    await nextTick();
+    scrollToBottom('instant');
+    handleScroll();
+};
+</script>
+
+<template>
+    <button @click="toggleReasoning" :class="[
+        'w-full hover:bg-[var(--color-highlight)] 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)]',
+        part.finished ? '' : 'cursor-default'
+    ]">
+        <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="mynaui:atom" class="w-3 h-3 text-[var(--reasoning-accent)]" />
+            </div>
+            Deep Thinking
+        </div>
+        <Icon name="mynaui:chevron-down" :class="['w-4 h-4', reasoningOpen ? '' : '-rotate-90']" />
+    </button>
+    <div v-if="reasoningOpen" ref="containerRef" @scroll="handleScroll"
+        :class="['reasoning-contaizner p-2 text-[--color-reasoning] max-h-[min(40vh,320px)] overflow-y-auto', scrollState]">
+        <MarkdownRenderer :finished="part.finished" :id="part.id" :content="part.content" />
+    </div>
+</template>
+
+<style>
+.reasoning-contaizner.middle {
+    mask-image: linear-gradient(#000, #000, transparent 0, #000 12%, #000 88%, transparent)
+}
+
+.reasoning-contaizner.top {
+    mask-image: linear-gradient(#000, transparent, #000 0, #000 12%, #000 88%, transparent)
+}
+
+.reasoning-contaizner.bottom {
+    mask-image: linear-gradient(transparent, #000, transparent 0, #000 12%, #000 88%, #000)
+}
+</style>