feat(desktop): embed BoosAPI Desktop client as a subproject
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
This commit is contained in:
boos
@@ -0,0 +1,209 @@
|
||||
<script>
|
||||
import MarkdownRender, { setCustomComponents } from 'markstream-vue2'
|
||||
import { streamContent } from '../../playground/src/const/markdown'
|
||||
import TestLab from './components/TestLab.vue'
|
||||
import ThinkingNode from './components/ThinkingNode.vue'
|
||||
|
||||
const markdownSource = typeof streamContent === 'string' ? streamContent : String(streamContent || '')
|
||||
setCustomComponents('vue2-demo', { thinking: ThinkingNode })
|
||||
|
||||
export default {
|
||||
name: 'Vue2Playground',
|
||||
components: {
|
||||
MarkdownRender,
|
||||
TestLab,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
delay: 16,
|
||||
chunkSize: 2,
|
||||
timer: null,
|
||||
running: true,
|
||||
currentPath: typeof window !== 'undefined' ? window.location.pathname : '/',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isTestPage() {
|
||||
return this.normalizePath(this.currentPath) === '/test'
|
||||
},
|
||||
totalLength() {
|
||||
return markdownSource.length
|
||||
},
|
||||
progress() {
|
||||
if (!this.totalLength)
|
||||
return 0
|
||||
return Math.min(100, Math.round((this.content.length / this.totalLength) * 100))
|
||||
},
|
||||
normalizedChunkSize() {
|
||||
const n = Math.floor(Number(this.chunkSize) || 1)
|
||||
return Math.max(1, n)
|
||||
},
|
||||
isDone() {
|
||||
return this.content.length >= this.totalLength
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
delay() {
|
||||
if (this.running && !this.isTestPage)
|
||||
this.restartStream()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.syncPath()
|
||||
window.addEventListener('popstate', this.handlePopState)
|
||||
if (!this.isTestPage)
|
||||
this.startStream()
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('popstate', this.handlePopState)
|
||||
this.stopStream()
|
||||
},
|
||||
methods: {
|
||||
normalizePath(path) {
|
||||
if (!path)
|
||||
return '/'
|
||||
const normalized = path.replace(/\/+$/, '')
|
||||
return normalized || '/'
|
||||
},
|
||||
syncPath() {
|
||||
if (typeof window === 'undefined')
|
||||
return
|
||||
this.currentPath = this.normalizePath(window.location.pathname)
|
||||
},
|
||||
handlePopState() {
|
||||
this.syncPath()
|
||||
if (this.isTestPage)
|
||||
this.stopStream()
|
||||
else if (!this.content.length)
|
||||
this.startStream()
|
||||
},
|
||||
navigate(path) {
|
||||
const nextPath = this.normalizePath(path)
|
||||
if (typeof window === 'undefined') {
|
||||
this.currentPath = nextPath
|
||||
return
|
||||
}
|
||||
if (nextPath !== this.normalizePath(window.location.pathname))
|
||||
window.history.pushState({}, '', nextPath)
|
||||
this.currentPath = nextPath
|
||||
if (this.isTestPage)
|
||||
this.stopStream()
|
||||
else if (!this.content.length)
|
||||
this.startStream()
|
||||
},
|
||||
goToTest() {
|
||||
this.navigate('/test')
|
||||
},
|
||||
goHome() {
|
||||
this.navigate('/')
|
||||
},
|
||||
tick() {
|
||||
if (this.isDone) {
|
||||
this.stopStream()
|
||||
return
|
||||
}
|
||||
const start = this.content.length
|
||||
const nextChunk = markdownSource.slice(start, start + this.normalizedChunkSize)
|
||||
this.content += nextChunk
|
||||
},
|
||||
startStream() {
|
||||
this.stopStream()
|
||||
this.running = true
|
||||
this.timer = window.setInterval(() => this.tick(), this.delay)
|
||||
},
|
||||
stopStream() {
|
||||
if (this.timer != null) {
|
||||
window.clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
this.running = false
|
||||
},
|
||||
toggleStream() {
|
||||
if (this.running)
|
||||
this.stopStream()
|
||||
else this.startStream()
|
||||
},
|
||||
restartStream() {
|
||||
if (!this.running)
|
||||
return
|
||||
this.startStream()
|
||||
},
|
||||
resetStream() {
|
||||
this.content = ''
|
||||
this.startStream()
|
||||
},
|
||||
fillAll() {
|
||||
this.content = markdownSource
|
||||
this.stopStream()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TestLab v-if="isTestPage" @navigate-home="goHome" />
|
||||
|
||||
<div v-else class="page">
|
||||
<header class="header">
|
||||
<div class="header-main">
|
||||
<div class="title">
|
||||
markstream-vue2 playground
|
||||
</div>
|
||||
<button type="button" class="btn" @click="goToTest">
|
||||
Open /test
|
||||
</button>
|
||||
</div>
|
||||
<div class="sub">
|
||||
Vue 2.6 demo: streaming markdown into the renderer
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="layout">
|
||||
<section class="panel controls">
|
||||
<h2>Stream controls</h2>
|
||||
<div class="field">
|
||||
<label for="delay">Delay (ms)</label>
|
||||
<input id="delay" v-model.number="delay" type="number" min="4" max="200">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="chunk">Chunk size</label>
|
||||
<input id="chunk" v-model.number="chunkSize" type="number" min="1" max="16">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn" @click="toggleStream">
|
||||
{{ running ? 'Pause' : 'Resume' }}
|
||||
</button>
|
||||
<button type="button" class="btn" @click="resetStream">
|
||||
Reset
|
||||
</button>
|
||||
<button type="button" class="btn ghost" @click="fillAll">
|
||||
Render all
|
||||
</button>
|
||||
</div>
|
||||
<div class="status">
|
||||
<div class="progress">
|
||||
<div class="bar" :style="{ width: `${progress}%` }" />
|
||||
</div>
|
||||
<div class="meta">
|
||||
{{ content.length }} / {{ totalLength }} ({{ progress }}%)
|
||||
</div>
|
||||
</div>
|
||||
<p class="note">
|
||||
This demo focuses on baseline Vue 2 rendering. Mermaid and KaTeX are
|
||||
optional peer dependencies and render when installed.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="panel preview">
|
||||
<MarkdownRender
|
||||
:content="content"
|
||||
:final="isDone"
|
||||
:typewriter="false"
|
||||
custom-id="vue2-demo"
|
||||
:custom-html-tags="['thinking']"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,141 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
background: #f7f7fb;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem 2rem 2.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.header-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sub {
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.controls h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.field label {
|
||||
font-size: 0.9rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.field input {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.7rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
background: #111827;
|
||||
color: #fff;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: #e5e7eb;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #3b82f6, #6366f1);
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.preview {
|
||||
min-height: 70vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.header-main {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,101 @@
|
||||
<script>
|
||||
import { NestedRenderer } from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
name: 'ThinkingNode',
|
||||
components: {
|
||||
NestedRenderer,
|
||||
},
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="thinking-node p-4 my-4 bg-blue-50 dark:bg-blue-900/40 rounded-md border-l-4 border-blue-400 flex items-start gap-3">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<div class="w-9 h-9 rounded-full bg-blue-200 dark:bg-blue-700 flex items-center justify-center text-blue-700 dark:text-blue-100">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M12 3C7.03 3 3 6.58 3 11c0 1.86.66 3.57 1.77 4.98L4 21l5.2-1.9C10.06 19.35 11 19.5 12 19.5c4.97 0 9-3.58 9-8.5S16.97 3 12 3z" stroke="currentColor" stroke-width="0.8" fill="currentColor" opacity="0.9" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-baseline gap-3">
|
||||
<strong class="text-sm">Thinking</strong>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-300">(assistant)</span>
|
||||
<span class="ml-2" aria-hidden="true">
|
||||
<span class="thinking-dots" :class="[node.loading ? 'visible' : 'hidden']" aria-hidden="true">
|
||||
<span class="dot dot-1" />
|
||||
<span class="dot dot-2" />
|
||||
<span class="dot dot-3" />
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm leading-relaxed text-slate-800 dark:text-slate-100">
|
||||
<span v-if="node.loading" class="sr-only" aria-live="polite">Thinking…</span>
|
||||
<transition name="fade" mode="out-in">
|
||||
<div :key="node.loading ? 'loading' : 'ready'" class="content-area">
|
||||
<NestedRenderer
|
||||
:node="node"
|
||||
custom-id="vue2-demo"
|
||||
:custom-html-tags="['thinking']"
|
||||
:typewriter="false"
|
||||
:batch-rendering="false"
|
||||
:viewport-priority="false"
|
||||
:defer-nodes-until-visible="false"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.thinking-node {
|
||||
color: #0f172a;
|
||||
}
|
||||
.dark .thinking-node {
|
||||
color: #e6f0ff;
|
||||
}
|
||||
|
||||
.thinking-dots {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 36px;
|
||||
justify-content: flex-start;
|
||||
height: 12px;
|
||||
transition: opacity 160ms linear, transform 160ms linear;
|
||||
opacity: 0;
|
||||
}
|
||||
.thinking-dots .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
background: #1e3a8a;
|
||||
opacity: 0.25;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.thinking-dots.visible { opacity: 1; }
|
||||
.thinking-dots.hidden { opacity: 0; transform: translateY(0); }
|
||||
.thinking-dots.visible .dot-1 { animation: think-bounce 1s infinite ease-in-out; animation-delay: 0s }
|
||||
.thinking-dots.visible .dot-2 { animation: think-bounce 1s infinite ease-in-out; animation-delay: 0.12s }
|
||||
.thinking-dots.visible .dot-3 { animation: think-bounce 1s infinite ease-in-out; animation-delay: 0.24s }
|
||||
.dark .thinking-dots .dot { background: #bfdbfe; opacity: 0.28 }
|
||||
|
||||
@keyframes think-bounce {
|
||||
0%, 80%, 100% { transform: translateY(0); opacity: 0.25 }
|
||||
40% { transform: translateY(-6px); opacity: 1 }
|
||||
}
|
||||
|
||||
.content-area { min-height: 1.25rem; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0 }
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 160ms ease }
|
||||
.fade-enter-to, .fade-leave-from { opacity: 1 }
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module 'markstream-vue2/workers/*?worker&inline' {
|
||||
const WorkerFactory: {
|
||||
new (): Worker
|
||||
}
|
||||
export default WorkerFactory
|
||||
}
|
||||
|
||||
declare module 'markstream-vue2/workers/*?worker' {
|
||||
const WorkerFactory: {
|
||||
new (): Worker
|
||||
}
|
||||
export default WorkerFactory
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { setKaTeXWorker, setMermaidWorker, VueRendererMarkdown } from 'markstream-vue2'
|
||||
import KatexWorker from 'markstream-vue2/workers/katexRenderer.worker?worker&inline'
|
||||
import MermaidWorker from 'markstream-vue2/workers/mermaidParser.worker?worker&inline'
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import 'markstream-vue2/index.css'
|
||||
import 'katex/dist/katex.min.css'
|
||||
import 'monaco-editor/min/vs/editor/editor.main.css'
|
||||
import '@unocss/reset/tailwind.css'
|
||||
import './styles/main.css'
|
||||
import './app.css'
|
||||
|
||||
Vue.use(VueRendererMarkdown)
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
setKaTeXWorker(new KatexWorker())
|
||||
setMermaidWorker(new MermaidWorker())
|
||||
}
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
@@ -0,0 +1,2 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
Reference in New Issue
Block a user