Cosmic AI Input

一个强大的 React AI 对话输入组件，支持 TypeScript。

安装

npm install cosmic-ai-input

pnpm install cosmic-ai-input

依赖

这个组件需要以下 peer dependencies：

• React 18.2.0+
• React-DOM 18.2.0+
• classnames 2.5.1+

请确保你的项目中已经安装了这些依赖

样式导入

重要： 使用本组件时，必须手动导入样式文件，否则组件将没有样式。

使用方法

ES 模块环境

import React, { useRef } from 'react';
import { AiInput } from 'cosmic-ai-input';
// 导入样式（推荐方法）
import 'cosmic-ai-input/dist/style.css';

const App = () => {
  const aiInputRef = useRef(null);
  
  const varList = [
    {
      type: 'input',
      name: 'name',
      content: '',
      placeholder: 'Your name'
    },
    {
      type: 'select',
      name: 'gender',
      content: '',
      placeholder: 'Select gender',
      options: ['Male', 'Female', 'Other']
    },
    {
      type: 'multiple-select',
      name: 'hobbies',
      content: '',
      placeholder: 'Select hobbies',
      options: ['Reading', 'Sports', 'Music', 'Travel']
    },
    {
      type: 'date-picker',
      name: 'birthday',
      content: '',
      placeholder: 'Select birthday'
    }
  ];

  const handleSend = (value) => {
    console.log('发送的消息:', value);
    // 在这里处理发送逻辑
  };

  const handleGetValue = () => {
    if (aiInputRef.current) {
      const currentValue = aiInputRef.current.getCurrentValue();
      console.log('当前值:', currentValue);
    }
  };

  return (
    <div>
      <h1>AI 对话输入组件示例</h1>
      <AiInput
        ref={aiInputRef}
        varList={varList}
        value="你好 [name]，你的性别是 [gender]，爱好是 [hobbies]，生日是 [birthday]"
        placeholder="在这里输入你的消息..."
        onSend={handleSend}
      />
      <button onClick={handleGetValue}>获取当前值</button>
    </div>
  );
};

export default App;

API

AiInputProps

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | value | string | - | 输入框的值，支持使用 [变量名] 格式引用变量 | | varList | VarItem[] | - | 变量列表，包含输入框、选择框、多选框和日期选择器等 | | placeholder | string | '' | 占位符文本 | | maxLength | 1 | 2 | 3 | 4 | undefined | - | 最大行数限制 | | defaultRows | number | 3 | 默认显示行数 | | disabled | boolean | false | 是否禁用输入框 | | onParse | (parsedValue: string) => void | - | 解析输入值时的回调函数 | | onSend | (value: string) => void | - | 发送消息时的回调函数 | | onMaxLengthExceeded | (value: string, maxLength: number) => void | - | 超过最大长度时的回调函数 | | onFocus | (e: React.FocusEvent) => void | - | 获得焦点时的回调函数 | | onBlur | (e: React.FocusEvent) => void | - | 失去焦点时的回调函数 | | onChange | (value: string) => void | - | 值改变时的回调函数 | | onClick | (e: React.MouseEvent) => void | - | 点击时的回调函数 | | onKeyDown | (e: React.KeyboardEvent) => void | - | 按键按下时的回调函数 | | onKeyUp | (e: React.KeyboardEvent) => void | - | 按键抬起时的回调函数 |

BaseInputItem

所有输入项的基础接口：

| 属性 | 类型 | 描述 | |------|------|------| | type | string | 组件类型 | | name | string | 变量名，用于在 value 中引用 | | content | string | 初始内容 | | placeholder | string | 占位符文本 |

InputItem

基础输入项：

interface InputItem extends BaseInputItem {
  type: 'input';
}

SelectItem

下拉选择项：

interface SelectItem extends BaseInputItem {
  type: 'select';
  options: string[];  // 选项列表
}

MultipleSelectItem

多选框项：

interface MultipleSelectItem extends BaseInputItem {
  type: 'multiple-select';
  options: string[];  // 选项列表
}

DatePickerItem

日期选择器项：

interface DatePickerItem extends BaseInputItem {
  type: 'date-picker';
}

AiInputRef

通过 ref 可以访问的方法：

| 方法 | 类型 | 描述 | |------|------|------| | getCurrentValue | () => string | 获取当前输入框的值（包含变量替换后的完整文本） |

TypeScript 支持

本组件完全支持 TypeScript，并提供了完整的类型定义。所有组件属性和方法都有类型检查，可以在开发过程中获得更好的代码提示和错误检测。

类型定义

import React from 'react';

export interface BaseInputItem {
  name: string;
  content: string;
  placeholder: string;
}

export interface InputItem extends BaseInputItem {
  type: 'input';
}

export interface SelectItem extends BaseInputItem {
  type: 'select';
  options: string[];
}

export interface MultipleSelectItem extends BaseInputItem {
  type: 'multiple-select';
  options: string[];
}

export interface DatePickerItem extends BaseInputItem {
  type: 'date-picker';
}

export type VarItem = InputItem | SelectItem | MultipleSelectItem | DatePickerItem;

export interface AiInputProps {
  value?: string;
  varList: VarItem[];
  placeholder?: string;
  maxLength?: 1 | 2 | 3 | 4;
  defaultRows?: number;
  disabled?: boolean;
  onParse?: (parsedValue: string) => void;
  onSend?: (value: string) => void;
  onMaxLengthExceeded?: (value: string, maxLength: number) => void;
  onFocus?: (e: React.FocusEvent) => void;
  onBlur?: (e: React.FocusEvent) => void;
  onChange?: (value: string) => void;
  onClick?: (e: React.MouseEvent) => void;
  onKeyDown?: (e: React.KeyboardEvent) => void;
  onKeyUp?: (e: React.KeyboardEvent) => void;
}

export interface AiInputRef {
  getCurrentValue: () => string;
  focus: () => void;
}