<template>
  <div class="workbench-ai-shell workbench-ai-home">
    <div class="workbench-ai-orb" aria-hidden="true">
      <img
        :src="orbIcon"
        class="workbench-ai-orb__image"
        alt=""
      />
    </div>

    <div class="workbench-ai-copy">
      <h2>嗨，{{ runtime.displayUserName }}，我是您的小财管家</h2>
      <p>您可以直接向我提问，或选择下方推荐主题，快速完成费用相关事务</p>
    </div>

    <WorkbenchAiComposer
      :runtime="runtime"
      placeholder="今天我能帮您做点什么？"
    />
    <WorkbenchAiFileStrip :runtime="runtime" />

    <div class="workbench-ai-quick-start-section">
      <h3 class="workbench-ai-quick-start-title">快速开始</h3>
      <div class="workbench-ai-action-row" aria-label="推荐主题">
        <button
          v-for="item in runtime.aiModeActionItems"
          :key="item.label"
          type="button"
          class="workbench-ai-action"
          :disabled="runtime.isAiModeInputLocked"
          @click="runtime.runAiModeAction(item)"
        >
          <div class="action-icon-wrapper">
            <i :class="item.icon"></i>
          </div>
          <div class="action-text">
            <strong>{{ item.label }}</strong>
            <p>{{ item.prompt }}</p>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import orbIcon from '../../../assets/workbench-ai-mode-orb-icon.gif'
import WorkbenchAiComposer from './WorkbenchAiComposer.vue'
import WorkbenchAiFileStrip from './WorkbenchAiFileStrip.vue'

defineProps({
  runtime: { type: Object, required: true }
})
</script>

<style scoped src="../../../assets/styles/components/personal-workbench-ai-mode.css"></style>
