nexus/frontend/src/components/dashboard/v2/IrisChat.vue

<script setup lang="ts">
/**
 * IrisChat — Rechte Seitenleiste (Rail) im V2 Dashboard
 *
 * Container: 368px breit, border-left 1px var(--line), flex column
 *
 * Props:
 *   messages   – ChatMessage[]
 *   isThinking – zeigt "thinking…" Indicator an
 *
 * Emits:
 *   send(text) – Nachricht absenden
 */

import { ref, computed, nextTick, watch } from 'vue'
import { icons } from '../../../composables/icons'
import type { ChatMessage } from './types'

const props = defineProps<{
  messages: ChatMessage[]
  isThinking: boolean
  error?: string | null
}>()

const emit = defineEmits<{
  send: [text: string]
}>()

/* ── Input ────────────────────────────────────────── */
const inputText = ref('')
const msgContainer = ref<HTMLElement | null>(null)
const inputRef = ref<HTMLInputElement | null>(null)

function handleSend() {
  const text = inputText.value.trim()
  if (!text) return
  emit('send', text)
  inputText.value = ''
}

function onKeydown(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    handleSend()
  }
}

/* ── Reversed messages (newest first in DOM for column-reverse) ── */
const reversedMessages = computed(() => [...props.messages].reverse())

/* ── Auto-scroll: column-reverse means scrollTop=0 = bottom (newest) ── */
watch(
  () => props.messages.length,
  () => {
    nextTick(() => {
      if (msgContainer.value) {
        msgContainer.value.scrollTop = 0
      }
    })
  }
)
</script>

<template>
  <div class="irischat">
    <!-- Header -->
    <div class="chat-header">
      <div class="chat-header-left">
        <span class="header-icon" v-html="icons.bot || ''"></span>
        <div class="header-text">
          <span class="header-title">Live-Orchestrierung</span>
          <span class="header-subtitle">Iris Chat</span>
        </div>
      </div>
      <button class="ask-btn" type="button" @click="inputRef?.focus()">
        <span class="ask-icon" v-html="icons.spark || ''"></span>
        Ask Iris
      </button>
    </div>

    <!-- Messages (flex column-reverse — neueste unten) -->
    <div ref="msgContainer" class="messages">
      <!-- Error Banner -->
      <div v-if="error" class="chat-error">
        <span class="error-icon">⚠</span>
        <span>Chat unavailable: {{ error }}</span>
      </div>

      <!-- Thinking Indicator -->
      <div v-if="isThinking" class="thinking-indicator">
        <span class="thinking-dots">
          <span class="dot-1">●</span>
          <span class="dot-2">●</span>
          <span class="dot-3">●</span>
        </span>
        <span class="thinking-text">thinking…</span>
      </div>

      <!-- Empty State -->
      <div v-if="!messages.length && !isThinking" class="chat-empty">
        <span class="empty-text">No messages yet. Ask Iris something.</span>
      </div>

      <!-- Messages (reverse order → newest first in DOM, column-reverse flips) -->
      <template v-for="(msg, i) in reversedMessages" :key="i">
        <!-- Iris Bubble -->
        <div v-if="msg.sender === 'iris'" class="bubble iris-bubble">
          <div class="bubble-text">{{ msg.text }}</div>
          <!-- Tool-Call-Indikator -->
          <div v-if="msg.tool" class="tool-indicator">
            <span class="tool-icon" v-html="icons.search || ''"></span>
            <span class="tool-label">{{ msg.tool }}</span>
          </div>
          <div class="bubble-meta">{{ msg.ts }}</div>
        </div>

        <!-- User Bubble -->
        <div v-else class="bubble user-bubble">
          <div class="bubble-text">{{ msg.text }}</div>
          <div class="bubble-meta">{{ msg.ts }}</div>
        </div>
      </template>
    </div>

    <!-- Input Area -->
    <div class="chat-input-area">
      <div class="input-wrap">
        <input
          ref="inputRef"
          v-model="inputText"
          class="chat-input"
          type="text"
          placeholder="Nachricht an Iris…"
          @keydown="onKeydown"
        />
        <button
          class="send-btn"
          type="button"
          :disabled="!inputText.trim()"
          @click="handleSend"
          :aria-label="'Send message'"
        >
          <span v-html="icons.send || ''"></span>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.irischat {
  width: 368px;
  flex: 0 0 368px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 12, 32, 0.92), rgba(8, 6, 20, 0.92));
  overflow: hidden;
}

/* ── Header ───────────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-icon :deep(svg) {
  width: 20px;
  height: 20px;
  color: var(--a-mid);
}

.header-text {
  display: flex;
  flex-direction: column;
}

.header-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--tx);
  line-height: 1.3;
}

.header-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--tx-3);
  line-height: 1.3;
}

.ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 29px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background: var(--grad);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
  white-space: nowrap;
}

.ask-btn:hover {
  filter: brightness(1.1);
}

.ask-icon :deep(svg) {
  width: 14px;
  height: 14px;
}

/* ── Messages ─────────────────────────────────────── */
.messages {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
  padding: 12px;
  gap: 10px;
  min-height: 0;
}

.messages::-webkit-scrollbar {
  width: 6px;
}

.messages::-webkit-scrollbar-thumb {
  background: rgba(124, 108, 255, 0.22);
  border-radius: 6px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.messages::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 108, 255, 0.4);
  background-clip: padding-box;
}

.messages::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Bubbles ──────────────────────────────────────── */
.bubble {
  padding: 10px 13px;
  max-width: 86%;
  animation: bubble-in 0.2s ease-out;
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.iris-bubble {
  align-self: flex-start;
  background: rgba(124, 108, 255, 0.14);
  border-left: 2px solid var(--a-mid);
  border-radius: 0 10px 10px 10px;
}

.user-bubble {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.06);
  border-right: 2px solid var(--tx-3);
  border-radius: 10px 0 10px 10px;
}

.bubble-text {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tx);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bubble-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--tx-3);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Tool-Call-Indikator ──────────────────────────── */
.tool-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(52, 214, 245, 0.10);
  border: 1px solid rgba(52, 214, 245, 0.18);
}

.tool-icon :deep(svg) {
  width: 11px;
  height: 11px;
  color: var(--st-think);
  flex: 0 0 auto;
}

.tool-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--st-think);
}

/* ── Error Banner ─────────────────────────────────── */
.chat-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: rgba(251, 113, 133, 0.12);
  border: 1px solid rgba(251, 113, 133, 0.25);
  border-radius: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  color: #fda4b0;
}

.error-icon {
  flex: 0 0 auto;
  font-size: 14px;
}

/* ── Empty State ──────────────────────────────────── */
.chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.chat-empty .empty-text {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: var(--tx-3);
  font-style: italic;
}

/* ── Thinking Indicator ────────────────────────────── */
.thinking-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.thinking-dots {
  display: flex;
  gap: 2px;
  font-size: 6px;
  color: var(--a-mid);
}

.thinking-dots span {
  animation: think-pop 1.2s ease-in-out infinite;
}

.thinking-dots .dot-2 {
  animation-delay: 0.2s;
}

.thinking-dots .dot-3 {
  animation-delay: 0.4s;
}

@keyframes think-pop {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.7);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.thinking-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--tx-3);
  font-style: italic;
}

/* ── Input Area ───────────────────────────────────── */
.chat-input-area {
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input-wrap:focus-within {
  border-color: var(--line-3);
  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.12);
}

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: var(--tx);
  line-height: 1.4;
}

.chat-input::placeholder {
  color: var(--tx-3);
}

.send-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.send-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.send-btn:not(:disabled):hover {
  filter: brightness(1.1);
}

.send-btn :deep(svg) {
  width: 16px;
  height: 16px;
}
</style>