console/app/components/showcase/ChatPromptSubmit.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
<script setup lang="ts">
import type { ChatStatus } from 'ai'

const statuses: ChatStatus[] = ['ready', 'submitted', 'streaming', 'error']

const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const interactiveStatus = ref<ChatStatus>('ready')

function cycleStatus() {
  const idx = statuses.indexOf(interactiveStatus.value)
  interactiveStatus.value = statuses[(idx + 1) % statuses.length]
}
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Statuses">
      <div class="flex flex-wrap items-center gap-4">
        <div v-for="s in statuses" :key="s" class="flex flex-col items-center gap-1">
          <UChatPromptSubmit :status="s" />
          <span class="text-xs text-[var(--ui-text-muted)] capitalize">{{ s }}</span>
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Colors (ready state)">
      <div class="flex flex-wrap items-center gap-3">
        <UChatPromptSubmit
          v-for="c in colors"
          :key="c"
          status="ready"
          :color="c"
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-wrap items-center gap-3">
        <UChatPromptSubmit
          v-for="s in sizes"
          :key="s"
          :size="s"
          status="ready"
        />
      </div>
    </GallerySection>

    <GallerySection title="Custom icons per state">
      <div class="flex flex-wrap items-center gap-4">
        <div class="flex flex-col items-center gap-1">
          <UChatPromptSubmit
            status="ready"
            icon="i-material-symbols-send-outline"
            color="primary"
          />
          <span class="text-xs text-[var(--ui-text-muted)]">ready</span>
        </div>
        <div class="flex flex-col items-center gap-1">
          <UChatPromptSubmit
            status="streaming"
            streaming-icon="i-material-symbols-stop-circle-outline"
            streaming-color="warning"
            streaming-variant="soft"
          />
          <span class="text-xs text-[var(--ui-text-muted)]">streaming</span>
        </div>
        <div class="flex flex-col items-center gap-1">
          <UChatPromptSubmit
            status="submitted"
            submitted-icon="i-material-symbols-hourglass-outline"
            submitted-color="info"
            submitted-variant="soft"
          />
          <span class="text-xs text-[var(--ui-text-muted)]">submitted</span>
        </div>
        <div class="flex flex-col items-center gap-1">
          <UChatPromptSubmit
            status="error"
            error-icon="i-material-symbols-refresh"
            error-color="error"
            error-variant="outline"
          />
          <span class="text-xs text-[var(--ui-text-muted)]">error</span>
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Variants (ready state)">
      <div class="flex flex-wrap items-center gap-3">
        <UChatPromptSubmit status="ready" variant="solid" />
        <UChatPromptSubmit status="ready" variant="outline" />
        <UChatPromptSubmit status="ready" variant="soft" />
        <UChatPromptSubmit status="ready" variant="subtle" />
        <UChatPromptSubmit status="ready" variant="ghost" />
      </div>
    </GallerySection>

    <GallerySection title="Interactive — agent dispatch cycle">
      <div class="flex flex-col items-start gap-4">
        <p class="text-sm text-[var(--ui-text-muted)]">
          Current status: <span class="font-semibold capitalize text-[var(--ui-text)]">{{ interactiveStatus }}</span>
        </p>
        <div class="flex items-center gap-3">
          <UChatPromptSubmit
            :status="interactiveStatus"
            icon="i-material-symbols-send-outline"
            streaming-icon="i-material-symbols-stop-circle-outline"
            submitted-icon="i-material-symbols-hourglass-outline"
            error-icon="i-material-symbols-refresh"
            @stop="cycleStatus"
            @reload="cycleStatus"
          />
          <UButton
            variant="ghost"
            color="neutral"
            size="sm"
            icon="i-material-symbols-swap-horiz"
            @click="cycleStatus"
          >
            Cycle status
          </UButton>
        </div>
        <p class="text-xs text-[var(--ui-text-muted)]">
          Simulates: dispatch agent job → submitted → streaming → error → ready
        </p>
      </div>
    </GallerySection>

    <GallerySection title="Disabled">
      <UChatPromptSubmit status="ready" :disabled="true" />
    </GallerySection>
  </div>
</template>