@daflow-ui/ui-agent-chat-input

@daflow-ui/ui-agent-chat-input

Agent / AI 对话场景输入组件。

Installation

pnpm add @daflow-ui/ui-agent-chat-input

Usage

全局引入样式（在 main.ts 中）：

import '@daflow-ui/ui-agent-chat-input/style.css';

在组件中使用：

<script setup lang="ts">
import { ref } from 'vue';
import { DfAgentChatInput, type ChatModelOption } from '@daflow-ui/ui-agent-chat-input';

const message = ref('');
const model = ref('gpt-4.1');

const models: ChatModelOption[] = [
  { label: 'GPT-4.1', value: 'gpt-4.1' },
  { label: 'GPT-4o-mini', value: 'gpt-4o-mini' }
];
</script>

<template>
  <DfAgentChatInput
    v-model="message"
    v-model:model="model"
    :model-options="models"
    :min-rows="2"
    :max-rows="4"
    @submit="console.log"
  />
</template>

Public Surface

• Props：modelValue、model、modelOptions、minRows、maxRows、disabled、submitting、placeholder
• Emits：update:modelValue、update:model、submit
• Slots：当前仅公开 toolbar，用于左侧辅助操作区扩展
• 右侧主动作区中的发送按钮为组件内部固定能力，当前不作为公共 slot 对外开放
• submitting 表示发送中 / 生成中状态；主动作会显示为 loading 态，但当前版本不提供 stop 交互
• 内置模型选择器切换后会自动把焦点返回输入框；toolbar 插槽内的外部控件是否回焦由调用方自行决定

CSS Variables

推荐业务侧仅覆写与品牌或页面风格直接相关的 token：

• --df-agent-chat-input-font-size
• --df-agent-chat-input-line-height
• --df-agent-chat-input-padding-x
• --df-agent-chat-input-padding-y
• --df-agent-chat-input-radius
• --df-agent-chat-input-border-color
• --df-agent-chat-input-bg
• --df-agent-chat-input-text-color
• --df-agent-chat-input-placeholder-color
• --df-agent-chat-input-focus-border-color
• --df-agent-chat-input-submit-size
• --df-agent-chat-input-submit-radius

输入框高度由 minRows / maxRows 结合行高动态计算，不提供独立的高度 CSS 变量。

License

MIT