@demicodes/web-ui 0.3.1

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@demicodes/web-ui",
+  "version": "0.3.1",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./*.vue": "./src/*.vue",
+    "./*.css": "./src/*.css",
+    "./*": "./src/*.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wspl/demi.git",
+    "directory": "packages/web-ui"
+  },
+  "homepage": "https://github.com/wspl/demi/tree/main/packages/web-ui#readme",
+  "bugs": "https://github.com/wspl/demi/issues",
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@demicodes/agent": "^0.3.1",
+    "@demicodes/core": "^0.3.1",
+    "@demicodes/utils": "^0.3.1",
+    "@floating-ui/vue": "^2.0.0",
+    "@mingcute/vue": "^1.4.1",
+    "@tanstack/vue-virtual": "^3.13.29",
+    "@tiptap/extension-placeholder": "^3.27.1",
+    "@tiptap/pm": "^3.27.1",
+    "@tiptap/starter-kit": "^3.27.1",
+    "@tiptap/vue-3": "^3.27.1",
+    "@vueuse/core": "^14.3.0",
+    "ansi-to-html": "^0.7.2",
+    "dayjs": "^1.11.21",
+    "dompurify": "^3.4.11",
+    "katex": "^0.17.0",
+    "marked": "^18.0.5",
+    "marked-katex-extension": "^5.1.10",
+    "partial-json": "^0.1.7",
+    "pathe": "^2.0.3",
+    "shiki": "^4.2.0",
+    "vue": "^3.5.38"
+  },
+  "devDependencies": {
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "^6.0.3",
+    "vue-tsc": "^3.3.5"
+  },
+  "license": "Apache-2.0"
+}

package/src/agent/AgentMessageInput.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { nextTick } from 'vue'
+import type { UserContentBlock } from '@demicodes/core'
+import { AddLine } from '@mingcute/vue/add'
+import { SendLine } from '@mingcute/vue/send'
+import { StopLine } from '@mingcute/vue/stop'
+import { EditorContent } from '@tiptap/vue-3'
+import { useAgentWorkspace } from './workspace'
+import ModelSelector from './ModelSelector.vue'
+import ContextUsageIndicator from './ContextUsageIndicator.vue'
+import Tooltip from '../ui/Tooltip.vue'
+import { useAgentInputActions } from './message-input/useAgentInputActions'
+import { useAgentInputEditor } from './message-input/useAgentInputEditor'
+import { useAgentInputSessionState } from './message-input/useAgentInputSessionState'
+import { docToContent, type InputModel } from './message-input/input-model'
+
+const props = defineProps<{
+  conversationId: string
+}>()
+
+const emit = defineEmits<{
+  'empty-submit': []
+}>()
+
+const workspace = useAgentWorkspace()
+
+const {
+  selectedProviderId,
+  selectedModelId,
+  thinkingConfig,
+  contextWindow,
+  inputLimit,
+  isRunning,
+  isCompacting,
+  canCompact,
+  usage,
+} = useAgentInputSessionState(workspace, props.conversationId)
+
+function buildSubmitPayload(): UserContentBlock[] | null {
+  const currentEditor = editor.value
+  if (!currentEditor || currentEditor.isEmpty) return null
+  const content = docToContent(currentEditor.getJSON() as InputModel)
+  return content.length > 0 ? content : null
+}
+
+function clearInput(): void {
+  editor.value?.commands.clearContent()
+}
+
+const { handleSubmit, handleSteerSubmit, handleQueueSubmit, handleSelectModel, handleChangeThinking, handleAbort, handleCompact } = useAgentInputActions({
+  workspace,
+  conversationId: props.conversationId,
+  buildSubmitPayload,
+  clearInput,
+  emitEmptySubmit() {
+    emit('empty-submit')
+  },
+})
+
+const { editor, isFocused, hasContent } = useAgentInputEditor({
+  handleSubmit,
+  handleCancel() {},
+})
+
+defineExpose({
+  focus() {
+    editor.value?.commands.focus('end', { scrollIntoView: false })
+  },
+  prefill(content: InputModel) {
+    editor.value?.commands.setContent(content)
+    nextTick(() => editor.value?.commands.focus('end', { scrollIntoView: false }))
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div
+      class="input-float rounded-xl outline outline-1 transition-[outline-color] duration-200"
+      :class="isFocused ? 'bg-surface-raised outline-line-focus' : 'bg-surface-raised outline-line'"
+    >
+      <EditorContent v-if="editor" :editor="editor" />
+      <div class="flex items-center justify-between px-2 pb-2">
+        <div class="flex items-center gap-1">
+          <ModelSelector
+            :providers="workspace.providers.value"
+            :models="workspace.models"
+            :selected-provider-id="selectedProviderId"
+            :selected-model-id="selectedModelId"
+            v-bind="thinkingConfig ? { thinkingConfig } : {}"
+            @select-model="handleSelectModel"
+            @change-thinking="handleChangeThinking"
+          />
+        </div>
+        <div class="flex items-center gap-1">
+          <ContextUsageIndicator
+            :conversation-id="props.conversationId"
+            :usage="usage"
+            :context-window="contextWindow"
+            :input-limit="inputLimit"
+            :is-compacting="isCompacting"
+            :is-clickable="!isRunning && canCompact"
+            @compact="handleCompact"
+          />
+          <template v-if="hasContent">
+            <template v-if="isRunning">
+              <Tooltip content="Steer current turn">
+                <span
+                  class="flex size-7 cursor-pointer items-center justify-center rounded-lg bg-overlay/10 text-fg transition-colors hover:bg-active"
+                  @click="handleSteerSubmit"
+                >
+                  <SendLine :size="15" />
+                </span>
+              </Tooltip>
+              <Tooltip content="Queue next turn">
+                <span
+                  class="flex size-7 cursor-pointer items-center justify-center rounded-lg bg-overlay/10 text-fg transition-colors hover:bg-active"
+                  @click="handleQueueSubmit"
+                >
+                  <AddLine :size="15" />
+                </span>
+              </Tooltip>
+            </template>
+            <Tooltip v-else content="Send message">
+              <span
+                class="flex size-7 cursor-pointer items-center justify-center rounded-lg bg-overlay/10 text-fg transition-colors hover:bg-active"
+                @click="handleSubmit"
+              >
+                <SendLine :size="15" />
+              </span>
+            </Tooltip>
+          </template>
+          <span
+            v-else-if="isRunning || isCompacting"
+            class="flex size-7 cursor-pointer items-center justify-center rounded-lg bg-overlay/10 text-fg transition-colors hover:bg-active"
+            @click="handleAbort"
+          >
+            <StopLine :size="15" />
+          </span>
+          <span
+            v-else
+            class="flex size-7 items-center justify-center rounded-lg text-fg-faint"
+          >
+            <SendLine :size="15" />
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.input-float {
+  box-shadow: var(--shadow-float);
+}
+
+.tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-fg-subtle);
+  pointer-events: none;
+  height: 0;
+}
+</style>

package/src/agent/AgentMessageList.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { useScroll } from '@vueuse/core'
+import type { Block, SessionPhase } from '@demicodes/core'
+import { useBlockVirtualizer, type PersistedScrollState } from '@demicodes/web-ui/composables/useBlockVirtualizer'
+import { getVisibleBlocks } from './visible-blocks'
+import { isThinkingBlockStreaming } from './thinking-streaming'
+import { pendingSteersToRenderBlocks, type MessageListBlock } from './pending-steers'
+import { shouldShowTailLoading } from './tail-loading'
+import type { PendingSteerMessage } from './types'
+import AgentMessageVirtualBlock from './blocks/AgentMessageVirtualBlock.vue'
+import LoadingBlock from './blocks/LoadingBlock.vue'
+import ScrollToBottomButton from '@demicodes/web-ui/ui/ScrollToBottomButton.vue'
+
+const INPUT_AREA_PADDING = 48
+
+const props = defineProps<{
+  conversationId: string
+  blocks: Block[]
+  pendingSteers: PendingSteerMessage[]
+  phase: SessionPhase
+  bottomOffset: number
+  persistedScrollState: PersistedScrollState | undefined
+}>()
+
+const emit = defineEmits<{
+  saveScrollState: [conversationId: string, state: PersistedScrollState | undefined]
+  continue: []
+  retry: []
+  deletePendingSteer: [id: string]
+}>()
+
+const visibleTranscriptBlocks = computed(() => getVisibleBlocks(props.blocks))
+const renderBlocks = computed<MessageListBlock[]>(() => [
+  ...visibleTranscriptBlocks.value,
+  ...pendingSteersToRenderBlocks(props.pendingSteers),
+])
+
+const shouldShowLoading = computed(() => shouldShowTailLoading(props.phase, visibleTranscriptBlocks.value, renderBlocks.value))
+
+function isStreamingThinkingAt(index: number): boolean {
+  const block = renderBlocks.value[index]
+  if (!block || block.type !== 'thinking') return false
+  const transcriptIndex = visibleTranscriptBlocks.value.findIndex((candidate) => candidate.id === block.id)
+  return isThinkingBlockStreaming(visibleTranscriptBlocks.value, props.phase, transcriptIndex)
+}
+
+// The next block's createdAt marks when a thinking block stopped (null while it's still the last,
+// i.e. actively thinking). Lets ThinkingBlock show a frozen "thought for Xs" that survives reload.
+function thinkingEndedAt(index: number): string | null {
+  const block = renderBlocks.value[index]
+  if (!block || !('createdAt' in block)) return null
+  const transcriptIndex = visibleTranscriptBlocks.value.findIndex((candidate) => candidate.id === block.id)
+  if (transcriptIndex < 0) return null
+  const next = visibleTranscriptBlocks.value[transcriptIndex + 1]
+  return next && 'createdAt' in next ? next.createdAt : null
+}
+
+const scrollContainer = ref<HTMLDivElement>()
+
+const { virtualItems, totalSize, measureElement, scrollOffset, isAtBottom, scrollToBottom, onScroll, getPersistedState } =
+  useBlockVirtualizer(scrollContainer, renderBlocks, props.persistedScrollState)
+
+onBeforeUnmount(() => {
+  emit('saveScrollState', props.conversationId, getPersistedState())
+})
+
+const { isScrolling } = useScroll(scrollContainer, { idle: 1500 })
+
+watch(
+  () => props.bottomOffset,
+  () => {
+    nextTick(() => {
+      scrollOffset.value = scrollContainer.value?.scrollTop ?? 0
+    })
+  },
+  { flush: 'post' },
+)
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div
+      ref="scrollContainer"
+      class="h-full overflow-y-auto scrollbar-hidden"
+      :class="isScrolling ? 'scrollbar-active' : ''"
+      style="overflow-anchor: none;"
+      @scroll="onScroll"
+    >
+      <div v-if="renderBlocks.length === 0" class="grid h-full place-items-center">
+        <p class="text-sm text-fg-faint">No messages yet. Start a conversation.</p>
+      </div>
+      <div
+        v-else
+        class="w-full pt-2"
+        :style="{ paddingBottom: `${props.bottomOffset + INPUT_AREA_PADDING}px` }"
+      >
+        <div class="relative w-full" :style="{ height: `${totalSize}px` }">
+          <div
+            v-for="item in virtualItems"
+            :key="String(item.key)"
+            :data-index="item.index"
+            :ref="(el) => measureElement(el as Element)"
+            class="absolute inset-x-0 top-0"
+            :style="{ transform: `translateY(${item.start}px)` }"
+          >
+            <AgentMessageVirtualBlock
+              :block="renderBlocks[item.index]!"
+              :conversation-id="props.conversationId"
+              :is-thinking-streaming="isStreamingThinkingAt(item.index)"
+              :thinking-ended-at="thinkingEndedAt(item.index)"
+              @continue="emit('continue')"
+              @retry="emit('retry')"
+              @delete-pending-steer="(id) => emit('deletePendingSteer', id)"
+            />
+          </div>
+        </div>
+        <LoadingBlock v-if="shouldShowLoading" />
+      </div>
+    </div>
+
+    <ScrollToBottomButton :visible="!isAtBottom" :bottom-offset="props.bottomOffset + 36" @click="scrollToBottom" />
+  </div>
+</template>

package/src/agent/AgentPanel.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAgentWorkspace } from './workspace'
+import AgentTabBar from './AgentTabBar.vue'
+import ConversationView from './ConversationView.vue'
+
+const workspace = useAgentWorkspace()
+
+const tabs = computed(() => workspace.tabs.value)
+const activeTabId = computed(() => workspace.activeId.value)
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <AgentTabBar :tabs="tabs" :all-conversations="tabs" :active-tab-id="activeTabId" />
+    <ConversationView v-if="activeTabId" :key="activeTabId" :conversation-id="activeTabId" />
+  </div>
+</template>

package/src/agent/AgentRoot.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { AgentWorkspace, provideAgentWorkspace } from './workspace'
+import { provideAgentUiOptions, type AgentUiOptions } from './ui-options'
+import AgentPanel from './AgentPanel.vue'
+
+const props = defineProps<{
+  workspace: AgentWorkspace
+  uiOptions?: Partial<AgentUiOptions>
+}>()
+
+provideAgentWorkspace(props.workspace)
+provideAgentUiOptions(props.uiOptions)
+</script>
+
+<template>
+  <AgentPanel />
+</template>