agent-ui/frontend/src/components/transcript-debug/toolCards/AskUserQuestionCard.vue

<script setup lang="ts">
import { computed } from 'vue'
import type { ParsedToolCall } from '@/types/transcript-debug'

const props = defineProps<{
  call: ParsedToolCall
}>()

interface QuestionOption {
  label: string
  description?: string
}

interface QuestionItem {
  question: string
  header?: string
  options?: QuestionOption[]
  multiSelect?: boolean
}

const questions = computed<QuestionItem[]>(() => {
  const qs = props.call.input?.questions
  if (Array.isArray(qs)) return qs as QuestionItem[]
  return []
})

// Parse the answer from the result
const answer = computed<Record<string, string>>(() => {
  if (!props.call.result?.content) return {}
  const raw = props.call.result.content

  // Try to extract "answered: X" pattern from result text
  // Format: 'User has answered your questions: "question"="answer"'
  const answerMap: Record<string, string> = {}
  const regex = /"([^"]+)"="([^"]+)"/g
  let match
  while ((match = regex.exec(raw)) !== null) {
    answerMap[match[1]] = match[2]
  }

  // Also try JSON format { answers: { ... } }
  try {
    const parsed = JSON.parse(raw)
    if (parsed?.answers) {
      for (const [k, v] of Object.entries(parsed.answers)) {
        answerMap[k] = String(v)
      }
    }
  } catch { /* not JSON */ }

  return answerMap
})

// Check if an option was selected for a given question
function isSelected(questionText: string, optionLabel: string): boolean {
  const ans = answer.value[questionText]
  if (!ans) return false
  return ans.split(', ').includes(optionLabel)
}

// Get user notes from result (text after "user notes:")
const userNotes = computed<string>(() => {
  if (!props.call.result?.content) return ''
  const match = props.call.result.content.match(/user notes:\s*(.+?)\.?\s*(?:You can|$)/i)
  return match ? match[1].trim() : ''
})

const isError = computed(() => props.call.result?.isError ?? false)
</script>

<template>
  <div :class="['question-card', { error: isError }]">
    <div class="card-header">
      <span class="card-icon">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"/>
          <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
          <line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
      </span>
      <span class="card-label">AskUserQuestion</span>
      <span v-if="isError" class="error-badge">error</span>
    </div>

    <div class="card-body">
      <div v-for="(q, qi) in questions" :key="qi" class="question-block">
        <div class="question-text">
          <span v-if="q.header" class="question-tag">{{ q.header }}</span>
          {{ q.question }}
          <span v-if="q.multiSelect" class="multi-hint">(multiple)</span>
        </div>

        <div v-if="q.options?.length" class="options-grid">
          <div
            v-for="opt in q.options"
            :key="opt.label"
            :class="['option-item', { selected: isSelected(q.question, opt.label) }]"
          >
            <span class="option-check">
              <svg v-if="isSelected(q.question, opt.label)" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
            </span>
            <div class="option-content">
              <span class="option-label">{{ opt.label }}</span>
              <span v-if="opt.description" class="option-desc">{{ opt.description }}</span>
            </div>
          </div>
        </div>

        <!-- Show answer if it's custom text (not matching any option) -->
        <div v-if="answer[q.question] && !q.options?.some(o => isSelected(q.question, o.label))" class="custom-answer">
          <span class="answer-label">Answer:</span>
          <span class="answer-text">{{ answer[q.question] }}</span>
        </div>
      </div>

      <!-- User notes -->
      <div v-if="userNotes" class="user-notes">
        <span class="notes-label">Notes:</span>
        <span class="notes-text">{{ userNotes }}</span>
      </div>
    </div>

    <!-- Result status -->
    <div v-if="call.result" :class="['card-footer', { error: isError }]">
      <span class="result-icon">{{ isError ? '✗' : '✓' }}</span>
      <span class="result-label">{{ isError ? 'Error' : 'Answered' }}</span>
    </div>
  </div>
</template>

<style scoped>
.question-card {
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-left: 3px solid #0ea5e9;
  border-radius: 8px;
  overflow: hidden;
  margin: 0.5rem 0;
  background: var(--bg-primary);
}

.question-card.error {
  border-color: rgba(239, 68, 68, 0.25);
  border-left-color: #ef4444;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: rgba(14, 165, 233, 0.06);
  border-bottom: 1px solid rgba(14, 165, 233, 0.12);
}

.question-card.error .card-header {
  background: rgba(239, 68, 68, 0.06);
  border-bottom-color: rgba(239, 68, 68, 0.12);
}

.card-icon {
  display: flex;
  align-items: center;
  color: #0ea5e9;
}

.question-card.error .card-icon {
  color: #ef4444;
}

.card-label {
  font-size: 11px;
  font-weight: 600;
  color: #0ea5e9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.question-card.error .card-label {
  color: #ef4444;
}

.error-badge {
  font-size: 10px;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-weight: 500;
}

.card-body {
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.question-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.question-block + .question-block {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}

.question-text {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
}

.question-tag {
  display: inline-block;
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
  font-size: 10px;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-right: 0.3rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.multi-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.options-grid {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.option-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.15s;
}

.option-item.selected {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.08);
}

.option-check {
  width: 16px;
  height: 16px;
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  color: transparent;
}

.option-item.selected .option-check {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: white;
}

.option-content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.option-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.option-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.custom-answer {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(14, 165, 233, 0.06);
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 6px;
}

.answer-label {
  font-size: 11px;
  font-weight: 600;
  color: #0ea5e9;
  white-space: nowrap;
}

.answer-text {
  font-size: 12px;
  color: var(--text-primary);
  font-style: italic;
}

.user-notes {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 6px;
}

.notes-label {
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  white-space: nowrap;
}

.notes-text {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-top: 1px solid rgba(14, 165, 233, 0.12);
  background: rgba(34, 197, 94, 0.04);
  font-size: 11px;
}

.card-footer.error {
  background: rgba(239, 68, 68, 0.04);
  border-top-color: rgba(239, 68, 68, 0.12);
}

.result-icon {
  font-weight: 600;
  color: #22c55e;
}

.card-footer.error .result-icon {
  color: #ef4444;
}

.result-label {
  font-weight: 500;
  color: var(--text-muted);
}
</style>