console/app/components/showcase/ChatReasoning.vue at main · agentruntimecontrolprotocol/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<script setup lang="ts">
import { ref } from 'vue'

const isStreaming = ref(false)
const streamingText = ref('')

let streamInterval: ReturnType<typeof setInterval> | null = null

const fullText = `Analyzing the job graph for cycle detection...
→ Session abc-123 has 4 active agents.
→ Agent "planner" dispatched 3 sub-tasks to the runtime queue.
→ Lease TTL is 30 s; checking renewal eligibility.
→ No circular dependencies detected in the task DAG.
→ Selecting optimal executor node based on resource headroom.
Conclusion: safe to proceed with parallel dispatch.`

function startStreaming() {
  if (streamInterval) return
  isStreaming.value = true
  streamingText.value = ''
  let i = 0
  streamInterval = setInterval(() => {
    if (i < fullText.length) {
      streamingText.value += fullText[i++]
    } else {
      stopStreaming()
    }
  }, 18)
}

function stopStreaming() {
  if (streamInterval) {
    clearInterval(streamInterval)
    streamInterval = null
  }
  isStreaming.value = false
}
</script>

<template>
  <div class="flex flex-col gap-8">

    <GallerySection title="Default (collapsed, with duration)">
      <div class="w-full max-w-xl">
        <UChatReasoning
          :duration="12"
          text="Evaluated 6 candidate executor nodes. Discarded 2 due to insufficient memory headroom. Selected node-eu-03 based on lowest p99 latency over the last 5 minutes."
        />
      </div>
    </GallerySection>

    <GallerySection title="Default open">
      <div class="w-full max-w-xl">
        <UChatReasoning
          :default-open="true"
          :duration="4"
          text="Session token validated. Lease granted for 60 s. Runtime accepted the job and enqueued it on the primary worker pool."
        />
      </div>
    </GallerySection>

    <GallerySection title="With icon">
      <div class="w-full max-w-xl flex flex-col gap-3">
        <UChatReasoning
          icon="i-material-symbols-cognition-outline"
          :duration="8"
          text="Cross-referencing agent capability manifest against the requested tool surface. All required handlers are registered. Proceeding to bind."
        />
        <UChatReasoning
          icon="i-material-symbols-schema-outline"
          chevron="leading"
          :duration="3"
          text="Trace graph built. 14 spans across 3 agents, no orphaned spans detected."
        />
      </div>
    </GallerySection>

    <GallerySection title="Chevron positions">
      <div class="w-full max-w-xl flex flex-col gap-3">
        <UChatReasoning
          chevron="trailing"
          :duration="5"
          text="Trailing chevron (default). Runtime lease renewed successfully."
        />
        <UChatReasoning
          chevron="leading"
          :duration="5"
          text="Leading chevron. Event bus acknowledged job completion signal."
        />
      </div>
    </GallerySection>

    <GallerySection title="Live streaming demo">
      <div class="w-full max-w-xl flex flex-col gap-4">
        <div class="flex gap-2">
          <UButton
            icon="i-material-symbols-play-arrow-outline"
            color="primary"
            :disabled="isStreaming"
            @click="startStreaming"
          >
            Start reasoning
          </UButton>
          <UButton
            icon="i-material-symbols-stop-circle-outline"
            color="error"
            variant="soft"
            :disabled="!isStreaming"
            @click="stopStreaming"
          >
            Stop
          </UButton>
        </div>
        <UChatReasoning
          :streaming="isStreaming"
          :text="streamingText"
          icon="i-material-symbols-cognition-outline"
          :auto-close-delay="800"
        />
      </div>
    </GallerySection>

    <GallerySection title="No auto-close (autoCloseDelay=0)">
      <div class="w-full max-w-xl">
        <UChatReasoning
          :duration="21"
          :auto-close-delay="0"
          :default-open="true"
          text="Persistent reasoning panel. Auto-close is disabled — the block stays expanded after streaming ends. Useful for audit or trace inspection flows."
        />
      </div>
    </GallerySection>

    <GallerySection title="Custom slot content">
      <div class="w-full max-w-xl">
        <UChatReasoning :duration="7" :default-open="true">
          <template #default>
            <div class="flex flex-col gap-2 text-sm">
              <div class="flex items-center gap-2">
                <UIcon name="i-material-symbols-check-circle-outline" class="text-success-500" />
                <span>Agent <code>planner-01</code> dispatched 3 sub-tasks</span>
              </div>
              <div class="flex items-center gap-2">
                <UIcon name="i-material-symbols-check-circle-outline" class="text-success-500" />
                <span>Lease renewed — TTL reset to 60 s</span>
              </div>
              <div class="flex items-center gap-2">
                <UIcon name="i-material-symbols-warning-outline" class="text-warning-500" />
                <span>Worker node-us-01 approaching memory limit (88 %)</span>
              </div>
            </div>
          </template>
        </UChatReasoning>
      </div>
    </GallerySection>

  </div>
</template>