cosmic-ai-input 1.0.0

package/LICENSE

@@ -0,0 +1,7 @@
+ISC License
+
+Copyright (c) [year], [fullname]
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,299 @@
+# Cosmic AI Input
+
+一个强大的 React AI 对话输入组件，支持 TypeScript。
+
+## 安装
+
+```bash
+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+
+
+请确保你的项目中已经安装了这些依赖
+
+## 样式导入
+
+**重要：** 使用本组件时，必须手动导入样式文件，否则组件将没有样式。
+
+```css
+/* 在你的全局 CSS 文件中导入 */
+@import 'cosmic-ai-input/dist/style.css';
+```
+
+## 使用方法
+
+### ES 模块环境
+
+```jsx
+import React, { useRef } from 'react';
+import { AiInput } from 'cosmic-ai-input';
+// 导入样式（推荐方法）
+import 'cosmic-ai-input/styles.css';
+
+const App = () => {
+  const aiInputRef = useRef(null);
+  
+  const varList = [
+    {
+      type: 'input',
+      name: 'name',
+      content: '',
+      cosmic-ai-input-placeholder: 'Your name'
+    },
+    {
+      type: 'select',
+      name: 'gender',
+      content: '',
+      cosmic-ai-input-placeholder: 'Select gender',
+      options: ['Male', 'Female', 'Other']
+    },
+    {
+      type: 'multiple-select',
+      name: 'hobbies',
+      content: '',
+      cosmic-ai-input-placeholder: 'Select hobbies',
+      options: ['Reading', 'Sports', 'Music', 'Travel']
+    },
+    {
+      type: 'date-picker',
+      name: 'birthday',
+      content: '',
+      cosmic-ai-input-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]"
+        cosmic-ai-input-placeholder="在这里输入你的消息..."
+        onSend={handleSend}
+      />
+      <button onClick={handleGetValue}>获取当前值</button>
+    </div>
+  );
+};
+
+export default App;
+```
+
+### CommonJS 环境
+
+```jsx
+const React = require('react');
+const { useRef } = React;
+const { AiInput } = require('cosmic-ai-input');
+// 获取样式文件路径
+const styles = require('cosmic-ai-input/styles.cjs');
+
+const App = () => {
+  const aiInputRef = useRef(null);
+  
+  const varList = [
+    {
+      type: 'input',
+      name: 'name',
+      content: '',
+      cosmic-ai-input-placeholder: 'Your name'
+    },
+    {
+      type: 'select',
+      name: 'gender',
+      content: '',
+      cosmic-ai-input-placeholder: 'Select gender',
+      options: ['Male', 'Female', 'Other']
+    },
+    {
+      type: 'multiple-select',
+      name: 'hobbies',
+      content: '',
+      cosmic-ai-input-placeholder: 'Select hobbies',
+      options: ['Reading', 'Sports', 'Music', 'Travel']
+    },
+    {
+      type: 'date-picker',
+      name: 'birthday',
+      content: '',
+      cosmic-ai-input-placeholder: 'Select birthday'
+    }
+  ];
+
+  const handleSend = (value) => {
+    console.log('发送的消息:', value);
+    // 在这里处理发送逻辑
+  };
+
+  const handleGetValue = () => {
+    if (aiInputRef.current) {
+      const currentValue = aiInputRef.current.getCurrentValue();
+      console.log('当前值:', currentValue);
+    }
+  };
+
+  return (
+    <div>
+      {/* 在 HTML 中手动引入样式文件 */}
+      <link rel="stylesheet" href={styles.stylePath} />
+      
+      <h1>AI 对话输入组件示例</h1>
+      <AiInput
+        ref={aiInputRef}
+        varList={varList}
+        value="你好 [name]，你的性别是 [gender]，爱好是 [hobbies]，生日是 [birthday]"
+        cosmic-ai-input-placeholder="在这里输入你的消息..."
+        onSend={handleSend}
+      />
+      <button onClick={handleGetValue}>获取当前值</button>
+    </div>
+  );
+};
+
+module.exports = App;
+```
+
+## API
+
+### AiInputProps
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| value | string | - | 输入框的值 |
+| varList | InputItem[] | - | 变量列表 |
+| cosmic-ai-input-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 | - | 按键抬起时的回调 |
+
+### InputItem
+
+| 属性 | 类型 | 描述 |
+|------|------|------|
+| type | 'input' | 组件类型 |
+| name | string | 变量名 |
+| content | string | 内容 |
+| cosmic-ai-input-placeholder | string | 占位符文本 |
+
+### SelectItem
+
+| 属性 | 类型 | 描述 |
+|------|------|------|
+| type | 'select' | 组件类型 |
+| name | string | 变量名 |
+| content | string | 内容 |
+| cosmic-ai-input-placeholder | string | 占位符文本 |
+| options | string[] | 选项列表 |
+
+### MultipleSelectItem
+
+| 属性 | 类型 | 描述 |
+|------|------|------|
+| type | 'multiple-select' | 组件类型 |
+| name | string | 变量名 |
+| content | string | 内容 |
+| cosmic-ai-input-placeholder | string | 占位符文本 |
+| options | string[] | 选项列表 |
+
+### DatePickerItem
+
+| 属性 | 类型 | 描述 |
+|------|------|------|
+| type | 'date-picker' | 组件类型 |
+| name | string | 变量名 |
+| content | string | 内容 |
+| cosmic-ai-input-placeholder | string | 占位符文本 |
+
+### AiInputRef
+
+| 方法 | 类型 | 描述 |
+|------|------|------|
+| getCurrentValue | () => string | 获取当前输入值 |
+
+## TypeScript 支持
+
+本组件完全支持 TypeScript，并提供了完整的类型定义。所有组件属性和方法都有类型检查，可以在开发过程中获得更好的代码提示和错误检测。
+
+### 类型定义
+
+```typescript
+import React from 'react';
+
+export interface BaseInputItem {
+  name: string;
+  content: string;
+  cosmic-ai-input-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[];
+  cosmic-ai-input-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;
+}
+```

package/dist/index.cjs.js

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),a=require("react"),Fe=require("classnames"),Oe=require("react-dom"),ae=a.forwardRef(({value:c,position:r,id:s,onChange:h},S)=>{const[g,E]=a.useState(!0),m=a.useRef(null),C=a.useRef(null);a.useEffect(()=>{typeof S=="function"?S(m.current):S&&(S.current=m.current)},[S]);const w=d=>{console.log("DatePicker handleChange",d);const N=d.target.value;h==null||h(N,"date-picker")};a.useEffect(()=>{if(C.current&&g)try{setTimeout(()=>{R()},0)}catch(d){console.log("无法自动打开日期选择器，浏览器安全策略限制",d)}},[g]);const R=()=>{if(C.current)try{C.current.showPicker()}catch(d){console.log("点击后无法打开日期选择器",d)}},b=d=>{d.stopPropagation(),console.log("DatePicker handleClick",d)};return g?u.jsx("div",{ref:m,id:s,style:{top:(r==null?void 0:r.top)||0,left:(r==null?void 0:r.left)||0},className:"cosmic-ai-input-datePicker",suppressHydrationWarning:!0,children:u.jsx("input",{ref:C,type:"date",onChange:w,onClick:b})}):null});ae.displayName="DatePicker";function X(c){const r=c.textContent||"",s=c.nextSibling;r.length?(s==null||s.setAttribute("style","display: none"),c.style.padding="2px 4px",c.style.borderTopLeftRadius="2px",c.style.borderBottomLeftRadius="2px",c.style.borderTopRightRadius="2px",c.style.borderBottomRightRadius="2px"):(s==null||s.setAttribute("style","display: inline"),c.style.padding="2px 0 2px 4px",c.style.borderTopLeftRadius="2px",c.style.borderBottomLeftRadius="2px",c.style.borderTopRightRadius="0",c.style.borderBottomRightRadius="0")}function L(c){if(c&&c.getAttribute("data-set-type")==="input"){const r=c.children[0];r.setAttribute("contenteditable","true"),requestAnimationFrame(()=>{r.focus()})}}function ie(c){c&&c.getAttribute("data-set-type")==="input"&&c.children[0].setAttribute("contenteditable","false")}function F(c){return c&&c.getAttribute("data-set-type")==="input"}const de=a.forwardRef(({options:c,value:r,position:s,id:h,height:S=37,onChange:g},E)=>{const[m,C]=a.useState(r||""),w=a.useRef(null);a.useEffect(()=>{typeof E=="function"?E(w.current):E&&(E.current=w.current)},[E]);const R=d=>{const N=m.split(",").filter(D=>D)||[];let A="";N.includes(d)?A=N.filter(D=>D!==d).join(","):(console.log("handleOptionClick",N),N.length?A=`${N.join(",")},${d}`:A=d),C(A),g==null||g(A,"multiple-select")},b=m.split(",")||[];return u.jsx("div",{ref:w,className:"cosmic-ai-input-selectFloatElement",id:h,style:{position:"absolute",top:(s==null?void 0:s.top)||0,left:(s==null?void 0:s.left)||0,zIndex:5e3,maxHeight:`${S}px`},children:c.map((d,N)=>u.jsx("div",{className:`selectOption ${b.includes(d)?"selected":""}`,onClick:()=>R(d),children:d},N))})});de.displayName="MultipleSelect";const ue=a.forwardRef(({options:c,value:r,position:s,id:h,height:S=120,onChange:g},E)=>{const[m,C]=a.useState(r||""),w=a.useRef(null);a.useEffect(()=>{typeof E=="function"?E(w.current):E&&(E.current=w.current)},[E]);const R=b=>{C(b),g==null||g(b,"select")};return u.jsx("div",{ref:w,className:"cosmic-ai-input-selectFloatElement",id:h,style:{position:"absolute",top:(s==null?void 0:s.top)||0,left:(s==null?void 0:s.left)||0,zIndex:5e3,maxHeight:`${S}px`},children:c.map((b,d)=>u.jsx("div",{className:`selectOption ${m===b?"selected":""}`,onClick:()=>R(b),children:b},d))})});ue.displayName="Select";function re(c){const r=c instanceof Element?c:document.getElementById(c);return r&&r.children[0].textContent||""}function Me(c,r){const s=c instanceof Element?c:document.getElementById(c);s&&(s.children[0].textContent=r)}function q(c){const r=document.createRange(),s=window.getSelection();if(!s){console.error("无法获取selection对象");return}r.selectNodeContents(c),r.collapse(!0),s.removeAllRanges(),s.addRange(r)}function B(c){const r=document.createRange(),s=window.getSelection();if(!s){console.error("无法获取selection对象");return}r.selectNodeContents(c),r.collapse(!1),s.removeAllRanges(),s.addRange(r)}function G(c){const r=window.getSelection();if(!r||r.rangeCount===0)return 0;const s=r.getRangeAt(0),h=s.cloneRange();return h.selectNodeContents(c),h.setEnd(s.startContainer,s.startOffset),h.toString().length}function $e(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const s=c.getRangeAt(0).startContainer;return s.nodeType===Node.TEXT_NODE?s.parentElement:s.nodeType===Node.ELEMENT_NODE?s:null}function qe(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const r=c.getRangeAt(0),s=r.startContainer,h=r.startOffset;return s.nodeType===Node.TEXT_NODE?h>0?s:s.previousSibling:s.nodeType===Node.ELEMENT_NODE?h>0?s.childNodes[h-1]:s.previousSibling:null}function Be(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const r=c.getRangeAt(0),s=r.startContainer,h=r.startOffset;return s.nodeType===Node.TEXT_NODE?h<s.length?s:s.nextSibling:s.nodeType===Node.ELEMENT_NODE?h<s.childNodes.length?s.childNodes[h]:s.nextSibling:null}function Ve(c){return c&&!c.getAttribute("data-set-type")}const pe=a.forwardRef((c,r)=>{const{value:s,varList:h,placeholder:S="",maxLength:g,defaultRows:E=3,disabled:m=!1,onFocus:C,onBlur:w,onChange:R,onClick:b,onSend:d,onParse:N,onKeyDown:A,onKeyUp:D,onMaxLengthExceeded:V}=c,[J,He]=a.useState(s||""),[Ke,Q]=a.useState(s||""),[he,Y]=a.useState(""),[H,O]=a.useState(!1),[K,W]=a.useState({top:0,left:0}),[Z,v]=a.useState([]),[_,I]=a.useState(""),[j,ee]=a.useState(null),[te,ne]=a.useState(120),fe=240,ge=240,le=240,oe=276,M=a.useRef(null),x=a.useRef(null),T=a.useRef(null),$=()=>{var e;return((e=M.current)==null?void 0:e.innerText)||""},se=()=>{var e;return((e=M.current)==null?void 0:e.innerHTML)||""},ye=e=>{const n=[];let t=0;const o=/\[([^\]]+)\]/g;let p,f=0;const k=new Set(h.map(y=>y.name));for(;(p=o.exec(e))!==null;){if(p.index>t){const i=e.substring(t,p.index).split(`
+`);i.forEach((P,Le)=>{P&&n.push({type:"text",content:P,id:`text-${f++}`}),Le<i.length-1&&n.push({type:"newline",id:`newline-${f++}`})})}const y=p[1];if(k.has(y)){const l=h.find(i=>i.name===y);(l==null?void 0:l.type)==="input"?n.push({type:"input",name:l==null?void 0:l.name,content:(l==null?void 0:l.content)||"",placeholder:(l==null?void 0:l.placeholder)||y,id:`input-${f++}`}):(l==null?void 0:l.type)==="select"?n.push({type:"select",name:l==null?void 0:l.name,content:(l==null?void 0:l.content)||"",placeholder:(l==null?void 0:l.placeholder)||y,options:(l==null?void 0:l.options)||[],id:`select-${f++}`}):(l==null?void 0:l.type)==="multiple-select"?n.push({type:"multiple-select",name:l==null?void 0:l.name,content:(l==null?void 0:l.content)||"",placeholder:(l==null?void 0:l.placeholder)||y,options:(l==null?void 0:l.options)||[],id:`multiple-select-${f++}`}):(l==null?void 0:l.type)==="date-picker"&&n.push({type:"date-picker",name:l==null?void 0:l.name,content:(l==null?void 0:l.content)||"",placeholder:(l==null?void 0:l.placeholder)||y,id:`date-picker-${f++}`})}else n.push({type:"text",content:`[${y}]`,id:`text-${f++}`});t=o.lastIndex}if(t<e.length){const l=e.substring(t).split(`
+`);l.forEach((i,P)=>{i&&n.push({type:"text",content:i,id:`text-${f++}`}),P<l.length-1&&n.push({type:"newline",id:`newline-${f++}`})})}return n},z=()=>{var e;(e=M.current)==null||e.setAttribute("contenteditable","true"),x.current&&(F(x.current)&&x.current.children[0].setAttribute("contenteditable","false"),x.current=null)},xe=e=>{console.log("handleEditorClick",e),b==null||b(e)},Ee=e=>{console.log("handleEditorMouseDown",e),z()},be=e=>{console.log("handleEditorInput",e),Q($()),Y(se()),R==null||R($())},we=e=>{if(e.code==="Enter"&&!e.shiftKey){e.preventDefault();const n=$();console.log("onSend",n,"maxLength:",g,"length:",n.length),g?n.length<=g?d==null||d(n):(console.log("maxLength exceeded",n,g),V==null||V(n,g)):d==null||d(n)}},Ce=e=>{var t;console.log("handleEditorKeyDown",e),A==null||A(e);const n=$e();if(n&&Ve(n)){if(e.code==="ArrowLeft"){const o=n==null?void 0:n.previousElementSibling,p=G(n);o&&p===0&&F(o)&&o.children[0]&&(x.current=o,L(o),requestAnimationFrame(()=>{B(o.children[0])}))}if(e.code==="ArrowRight"){const o=n==null?void 0:n.nextElementSibling,p=G(n);o&&p===((t=n.textContent)==null?void 0:t.length)&&F(o)&&o.children[0]&&(x.current=o,L(o),requestAnimationFrame(()=>{q(o.children[0])}))}}if(n&&n.getAttribute("data-set-type")==="container"){if(e.code==="ArrowLeft"){const o=qe();F(o)&&o.children[0]&&(x.current=o,L(o),requestAnimationFrame(()=>{B(o.children[0])}))}if(e.code==="ArrowRight"){const o=Be();F(o)&&o.children[0]&&(x.current=o,L(o),requestAnimationFrame(()=>{q(o.children[0])}))}}we(e)},Re=e=>{console.log("handleEditorKeyUp",e),D==null||D(e)},Ae=(e,n)=>{n.stopPropagation(),console.log("handleInputClick",e)},Se=(e,n)=>{var o;n.stopPropagation(),console.log("handleInputMouseDown",e,n),x.current&&ie(x.current),(o=M.current)==null||o.setAttribute("contenteditable","false");const t=document.getElementById(e.id);x.current=t,requestAnimationFrame(()=>{L(t)})},ke=(e,n)=>{var p,f,k,y,l;console.log("handleInputKeyDown",e,n),A==null||A(n),n.stopPropagation();const t=n.target,o=G(t);if(n.code==="Backspace"&&o===0){const i=(p=t.parentElement)==null?void 0:p.previousElementSibling;console.log("previousElement",i),i&&(F(i)&&i.children[0]&&((f=i.children[0].textContent)!=null&&f.length)?(x.current=i,L(i),B(i.children[0]),requestAnimationFrame(()=>{X(i.children[0])})):(z(),B(i)))}if(n.code==="ArrowRight"&&o===((k=t.textContent)==null?void 0:k.length)){const i=(y=t.parentElement)==null?void 0:y.nextElementSibling;console.log("nextElement",i),i&&(F(i)&&i.children[0]&&((l=i.children[0].textContent)!=null&&l.length)?(x.current=i,L(i),q(i.children[0]),requestAnimationFrame(()=>{X(i.children[0])})):(z(),q(i)))}},me=(e,n)=>{console.log("handleInputKeyUp",e,n),D==null||D(n);const t=n.target;X(t)},Ne=(e,n)=>{var o;n.stopPropagation(),console.log("handlePlaceholderMouseDown",e),x.current&&ie(x.current),(o=M.current)==null||o.setAttribute("contenteditable","false");const t=document.getElementById(e.id);x.current=t,requestAnimationFrame(()=>{L(t)})},De=(e,n)=>{console.log("handleInputChange",e,n),Q($()),Y(se()),R==null||R($())},Te=(e,n)=>{console.log("handleTextSpanKeyDown 不生效",e,n)};a.useEffect(()=>{if(!H)return;const e=o=>{T.current&&!T.current.contains(o.target)&&O(!1)},n=o=>{T.current&&!T.current.contains(o.target)&&O(!1)},t=()=>{O(!1)};return document.addEventListener("mousedown",e),document.addEventListener("scroll",n,!0),window.addEventListener("resize",t),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("scroll",n,!0),window.removeEventListener("resize",t)}},[H]);const U=(e,n)=>{if(console.log("handleFloatChange",e,n),j&&Me(j.id,e),n==="select"&&O(!1),n==="multiple-select"||n==="date-picker"){const t=document.getElementById(j.id);t&&t.children[0]&&t.children[1]&&(e.length>0?(t.children[0].setAttribute("style","display: inline"),t.children[0].setAttribute("contenteditable","false"),t.children[1].setAttribute("style","display: none"),t.children[1].setAttribute("contenteditable","true")):(t.children[0].setAttribute("style","display: none"),t.children[0].setAttribute("contenteditable","true"),t.children[1].setAttribute("style","display: inline"),t.children[1].setAttribute("contenteditable","true")))}},ce=(e,n)=>{console.log("handleSelectClick",e,n);const o=n.target.getBoundingClientRect();v(e.options),I(e.value||re(e.id)),W({top:-999999,left:-999999999}),ee(e),ne(ge),O(!0),requestAnimationFrame(()=>{if(T.current){console.log("currentFloatElementRef.current",T.current);const p=T.current.getBoundingClientRect();let f=o.left,k=o.top+o.height;window.innerWidth-o.right<fe&&o.width<p.width&&(f=o.right-p.width),o.top<p.height&&(k=o.top+o.height),W({top:k,left:f}),ne(p.height)}})},je=(e,n)=>{console.log("handleDatePickerClick",e,n);const o=n.target.getBoundingClientRect();let p=o.left,f=o.top-oe;window.innerWidth-o.right<le&&(p=p-le+o.width),o.top<oe&&(f=o.top+o.height),v(e.options),I(e.value||re(e.id)),W({top:f,left:p}),ee(e),O(!0)},Pe=()=>{const e=ye(J);console.log("parsed",e);const n=[];return e.forEach(t=>{var o,p,f,k,y,l;if(t.type==="text")n.push(u.jsx("span",{onKeyDown:i=>Te(t,i),children:t.content},t.id));else if(t.type==="newline")n.push(u.jsx("br",{},t.id));else if(t.type==="input")n.push(u.jsxs("span",{id:t.id,"data-set-type":"input",contentEditable:!1,suppressContentEditableWarning:!0,onInput:i=>De(t,i),onClick:i=>Ae(t,i),onMouseDown:i=>Se(t,i),"data-cosmic-ai-input-placeholder":t.placeholder,children:[u.jsx("span",{className:"cosmic-ai-input-inputContent",style:{padding:(o=t.content)!=null&&o.length?"2px 4px":"2px 0 2px 4px"},contentEditable:!1,onKeyDown:i=>ke(t,i),onKeyUp:i=>me(t,i),children:t.content}),u.jsx("span",{contentEditable:!1,style:{display:(p=t.content)!=null&&p.length?"none":"inline"},className:"cosmic-ai-input-placeholder",onMouseDown:i=>Ne(t,i),children:t.placeholder})]},t.id));else if(t.type==="select"){const i=t.content||((f=t.options)==null?void 0:f[0])||t.placeholder;n.push(u.jsx("span",{id:t.id,"data-set-type":"select",contentEditable:!0,suppressContentEditableWarning:!0,onClick:P=>ce(t,P),"data-cosmic-ai-input-placeholder":t.placeholder,children:u.jsx("span",{contentEditable:!1,children:i})},t.id))}else if(t.type==="multiple-select"){const i=t.content||((k=t.options)==null?void 0:k[0]);n.push(u.jsxs("span",{id:t.id,"data-set-type":"multiple-select",contentEditable:!0,suppressContentEditableWarning:!0,onClick:P=>ce(t,P),"data-cosmic-ai-input-placeholder":t.placeholder,children:[u.jsx("span",{style:{display:i!=null&&i.length?"inline":"none"},contentEditable:!1,children:i}),u.jsx("span",{style:{display:i!=null&&i.length?"none":"inline"},className:"cosmic-ai-input-selectPlaceholder",contentEditable:!1,children:t.placeholder})]},t.id))}else t.type==="date-picker"&&n.push(u.jsxs("span",{id:t.id,"data-set-type":"date-picker",contentEditable:!0,suppressContentEditableWarning:!0,onClick:i=>je(t,i),"data-cosmic-ai-input-placeholder":t.placeholder,children:[u.jsx("span",{style:{display:(y=t.content)!=null&&y.length?"inline":"none"},contentEditable:!1,children:t.content}),u.jsx("span",{style:{display:(l=t.content)!=null&&l.length?"none":"inline"},className:"cosmic-ai-input-datePickerPlaceholder",contentEditable:!1,children:t.placeholder})]},t.id))}),n};return a.useImperativeHandle(r,()=>({getCurrentValue:$})),u.jsxs(u.Fragment,{children:[u.jsx("div",{"data-set-type":"container","data-cosmic-ai-input-placeholder":S,className:Fe("cosmic-ai-input",`cosmic-ai-input-rows${E}`,{"is-disabled":m},{"is-empty":J.length===0||he==="<br>"}),ref:M,contentEditable:!0,suppressContentEditableWarning:!0,onClick:e=>xe(e),onFocus:e=>{C==null||C(e)},onBlur:e=>{w==null||w(e)},onMouseDown:e=>Ee(e),onKeyDown:e=>Ce(e),onKeyUp:e=>Re(e),onInput:e=>be(e),children:Pe()}),H&&Oe.createPortal((j==null?void 0:j.type)==="multiple-select"?u.jsx(de,{ref:T,options:Z,value:_,position:K,height:te,onChange:U},"multiple-select"):(j==null?void 0:j.type)==="date-picker"?u.jsx(ae,{ref:T,value:_,position:K,onChange:U},"date-picker"):u.jsx(ue,{ref:T,options:Z,value:_,position:K,height:te,onChange:U},"select"),document.body)]})});pe.displayName="AiInput";exports.default=pe;

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import { default as default_2 } from 'react';
+
+declare const AiInput: default_2.ForwardRefExoticComponent<AiInputProps & default_2.RefAttributes<AiInputRef>>;
+export default AiInput;
+
+declare interface AiInputProps {
+    value?: string;
+    varList: (InputItem | SelectItem | MultipleSelectItem | DatePickerItem)[];
+    placeholder?: string;
+    maxLength?: 1 | 2 | 3 | 4 | undefined;
+    defaultRows?: number;
+    disabled?: boolean;
+    onParse?: (parsedValue: string) => void;
+    onSend?: (value: string) => void;
+    onMaxLengthExceeded?: (value: string, maxLength: number) => void;
+    onFocus?: (e: default_2.FocusEvent) => void;
+    onBlur?: (e: default_2.FocusEvent) => void;
+    onChange?: (value: string) => void;
+    onClick?: (e: default_2.MouseEvent) => void;
+    onKeyDown?: (e: default_2.KeyboardEvent) => void;
+    onKeyUp?: (e: default_2.KeyboardEvent) => void;
+}
+
+export declare interface AiInputRef {
+    getCurrentValue: () => string;
+}
+
+declare interface DatePickerItem {
+    type: 'date-picker';
+    name: string;
+    content: string;
+    placeholder: string;
+}
+
+declare interface InputItem {
+    type: 'input';
+    name: string;
+    content: string;
+    placeholder: string;
+}
+
+declare interface MultipleSelectItem extends Omit<SelectItem, 'type'> {
+    type: 'multiple-select';
+}
+
+declare interface SelectItem {
+    type: 'select';
+    name: string;
+    content: string;
+    placeholder: string;
+    options: string[];
+}
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,573 @@
+import { jsx as h, jsxs as q, Fragment as Be } from "react/jsx-runtime";
+import { forwardRef as _, useState as A, useRef as $, useEffect as H, useImperativeHandle as Ve } from "react";
+import He from "classnames";
+import { createPortal as qe } from "react-dom";
+const he = _(
+  ({ value: s, position: r, id: c, onChange: u }, k) => {
+    const [f, E] = A(!0), N = $(null), w = $(null);
+    H(() => {
+      typeof k == "function" ? k(N.current) : k && (k.current = N.current);
+    }, [k]);
+    const x = (a) => {
+      console.log("DatePicker handleChange", a);
+      const S = a.target.value;
+      u == null || u(S, "date-picker");
+    };
+    H(() => {
+      if (w.current && f)
+        try {
+          setTimeout(() => {
+            C();
+          }, 0);
+        } catch (a) {
+          console.log("无法自动打开日期选择器，浏览器安全策略限制", a);
+        }
+    }, [f]);
+    const C = () => {
+      if (w.current)
+        try {
+          w.current.showPicker();
+        } catch (a) {
+          console.log("点击后无法打开日期选择器", a);
+        }
+    }, b = (a) => {
+      a.stopPropagation(), console.log("DatePicker handleClick", a);
+    };
+    return f ? /* @__PURE__ */ h(
+      "div",
+      {
+        ref: N,
+        id: c,
+        style: {
+          top: (r == null ? void 0 : r.top) || 0,
+          left: (r == null ? void 0 : r.left) || 0
+        },
+        className: "cosmic-ai-input-datePicker",
+        suppressHydrationWarning: !0,
+        children: /* @__PURE__ */ h("input", { ref: w, type: "date", onChange: x, onClick: b })
+      }
+    ) : null;
+  }
+);
+he.displayName = "DatePicker";
+function Y(s) {
+  const r = s.textContent || "", c = s.nextSibling;
+  r.length ? (c == null || c.setAttribute("style", "display: none"), s.style.padding = "2px 4px", s.style.borderTopLeftRadius = "2px", s.style.borderBottomLeftRadius = "2px", s.style.borderTopRightRadius = "2px", s.style.borderBottomRightRadius = "2px") : (c == null || c.setAttribute("style", "display: inline"), s.style.padding = "2px 0 2px 4px", s.style.borderTopLeftRadius = "2px", s.style.borderBottomLeftRadius = "2px", s.style.borderTopRightRadius = "0", s.style.borderBottomRightRadius = "0");
+}
+function F(s) {
+  if (s && s.getAttribute("data-set-type") === "input") {
+    const r = s.children[0];
+    r.setAttribute("contenteditable", "true"), requestAnimationFrame(() => {
+      r.focus();
+    });
+  }
+}
+function ue(s) {
+  s && s.getAttribute("data-set-type") === "input" && s.children[0].setAttribute("contenteditable", "false");
+}
+function O(s) {
+  return s && s.getAttribute("data-set-type") === "input";
+}
+const fe = _(({
+  options: s,
+  value: r,
+  position: c,
+  id: u,
+  height: k = 37,
+  onChange: f
+}, E) => {
+  const [N, w] = A(r || ""), x = $(null);
+  H(() => {
+    typeof E == "function" ? E(x.current) : E && (E.current = x.current);
+  }, [E]);
+  const C = (a) => {
+    const S = N.split(",").filter((D) => D) || [];
+    let m = "";
+    S.includes(a) ? m = S.filter((D) => D !== a).join(",") : (console.log("handleOptionClick", S), S.length ? m = `${S.join(",")},${a}` : m = a), w(m), f == null || f(m, "multiple-select");
+  }, b = N.split(",") || [];
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: x,
+      className: "cosmic-ai-input-selectFloatElement",
+      id: u,
+      style: {
+        position: "absolute",
+        top: (c == null ? void 0 : c.top) || 0,
+        left: (c == null ? void 0 : c.left) || 0,
+        zIndex: 5e3,
+        maxHeight: `${k}px`
+      },
+      children: s.map((a, S) => /* @__PURE__ */ h(
+        "div",
+        {
+          className: `selectOption ${b.includes(a) ? "selected" : ""}`,
+          onClick: () => C(a),
+          children: a
+        },
+        S
+      ))
+    }
+  );
+});
+fe.displayName = "MultipleSelect";
+const ge = _(({
+  options: s,
+  value: r,
+  position: c,
+  id: u,
+  height: k = 120,
+  onChange: f
+}, E) => {
+  const [N, w] = A(r || ""), x = $(null);
+  H(() => {
+    typeof E == "function" ? E(x.current) : E && (E.current = x.current);
+  }, [E]);
+  const C = (b) => {
+    w(b), f == null || f(b, "select");
+  };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: x,
+      className: "cosmic-ai-input-selectFloatElement",
+      id: u,
+      style: {
+        position: "absolute",
+        top: (c == null ? void 0 : c.top) || 0,
+        left: (c == null ? void 0 : c.left) || 0,
+        zIndex: 5e3,
+        maxHeight: `${k}px`
+      },
+      children: s.map((b, a) => /* @__PURE__ */ h(
+        "div",
+        {
+          className: `selectOption ${N === b ? "selected" : ""}`,
+          onClick: () => C(b),
+          children: b
+        },
+        a
+      ))
+    }
+  );
+});
+ge.displayName = "Select";
+function pe(s) {
+  const r = s instanceof Element ? s : document.getElementById(s);
+  return r && r.children[0].textContent || "";
+}
+function Ke(s, r) {
+  const c = s instanceof Element ? s : document.getElementById(s);
+  c && (c.children[0].textContent = r);
+}
+function K(s) {
+  const r = document.createRange(), c = window.getSelection();
+  if (!c) {
+    console.error("无法获取selection对象");
+    return;
+  }
+  r.selectNodeContents(s), r.collapse(!0), c.removeAllRanges(), c.addRange(r);
+}
+function W(s) {
+  const r = document.createRange(), c = window.getSelection();
+  if (!c) {
+    console.error("无法获取selection对象");
+    return;
+  }
+  r.selectNodeContents(s), r.collapse(!1), c.removeAllRanges(), c.addRange(r);
+}
+function Z(s) {
+  const r = window.getSelection();
+  if (!r || r.rangeCount === 0)
+    return 0;
+  const c = r.getRangeAt(0), u = c.cloneRange();
+  return u.selectNodeContents(s), u.setEnd(c.startContainer, c.startOffset), u.toString().length;
+}
+function We() {
+  const s = window.getSelection();
+  if (!s || s.rangeCount === 0)
+    return null;
+  const c = s.getRangeAt(0).startContainer;
+  return c.nodeType === Node.TEXT_NODE ? c.parentElement : c.nodeType === Node.ELEMENT_NODE ? c : null;
+}
+function _e() {
+  const s = window.getSelection();
+  if (!s || s.rangeCount === 0)
+    return null;
+  const r = s.getRangeAt(0), c = r.startContainer, u = r.startOffset;
+  return c.nodeType === Node.TEXT_NODE ? u > 0 ? c : c.previousSibling : c.nodeType === Node.ELEMENT_NODE ? u > 0 ? c.childNodes[u - 1] : c.previousSibling : null;
+}
+function ze() {
+  const s = window.getSelection();
+  if (!s || s.rangeCount === 0)
+    return null;
+  const r = s.getRangeAt(0), c = r.startContainer, u = r.startOffset;
+  return c.nodeType === Node.TEXT_NODE ? u < c.length ? c : c.nextSibling : c.nodeType === Node.ELEMENT_NODE ? u < c.childNodes.length ? c.childNodes[u] : c.nextSibling : null;
+}
+function je(s) {
+  return s && !s.getAttribute("data-set-type");
+}
+const Ue = _((s, r) => {
+  const { value: c, varList: u, placeholder: k = "", maxLength: f, defaultRows: E = 3, disabled: N = !1, onFocus: w, onBlur: x, onChange: C, onClick: b, onSend: a, onParse: S, onKeyDown: m, onKeyUp: D, onMaxLengthExceeded: z } = s, [I, Xe] = A(c || ""), [Ge, v] = A(c || ""), [ye, ee] = A(""), [j, M] = A(!1), [U, X] = A({ top: 0, left: 0 }), [te, ne] = A([]), [G, le] = A(""), [P, oe] = A(null), [ce, se] = A(120), Ee = 240, be = 240, ie = 240, re = 276, B = $(null), y = $(null), T = $(null), V = () => {
+    var e;
+    return ((e = B.current) == null ? void 0 : e.innerText) || "";
+  }, ae = () => {
+    var e;
+    return ((e = B.current) == null ? void 0 : e.innerHTML) || "";
+  }, xe = (e) => {
+    const n = [];
+    let t = 0;
+    const o = /\[([^\]]+)\]/g;
+    let d, p = 0;
+    const R = new Set(u.map((g) => g.name));
+    for (; (d = o.exec(e)) !== null; ) {
+      if (d.index > t) {
+        const i = e.substring(t, d.index).split(`
+`);
+        i.forEach((L, Me) => {
+          L && n.push({
+            type: "text",
+            content: L,
+            id: `text-${p++}`
+          }), Me < i.length - 1 && n.push({
+            type: "newline",
+            id: `newline-${p++}`
+          });
+        });
+      }
+      const g = d[1];
+      if (R.has(g)) {
+        const l = u.find((i) => i.name === g);
+        (l == null ? void 0 : l.type) === "input" ? n.push({
+          type: "input",
+          name: l == null ? void 0 : l.name,
+          content: (l == null ? void 0 : l.content) || "",
+          placeholder: (l == null ? void 0 : l.placeholder) || g,
+          id: `input-${p++}`
+        }) : (l == null ? void 0 : l.type) === "select" ? n.push({
+          type: "select",
+          name: l == null ? void 0 : l.name,
+          content: (l == null ? void 0 : l.content) || "",
+          placeholder: (l == null ? void 0 : l.placeholder) || g,
+          options: (l == null ? void 0 : l.options) || [],
+          id: `select-${p++}`
+        }) : (l == null ? void 0 : l.type) === "multiple-select" ? n.push({
+          type: "multiple-select",
+          name: l == null ? void 0 : l.name,
+          content: (l == null ? void 0 : l.content) || "",
+          placeholder: (l == null ? void 0 : l.placeholder) || g,
+          options: (l == null ? void 0 : l.options) || [],
+          id: `multiple-select-${p++}`
+        }) : (l == null ? void 0 : l.type) === "date-picker" && n.push({
+          type: "date-picker",
+          name: l == null ? void 0 : l.name,
+          content: (l == null ? void 0 : l.content) || "",
+          placeholder: (l == null ? void 0 : l.placeholder) || g,
+          id: `date-picker-${p++}`
+        });
+      } else
+        n.push({
+          type: "text",
+          content: `[${g}]`,
+          id: `text-${p++}`
+        });
+      t = o.lastIndex;
+    }
+    if (t < e.length) {
+      const l = e.substring(t).split(`
+`);
+      l.forEach((i, L) => {
+        i && n.push({
+          type: "text",
+          content: i,
+          id: `text-${p++}`
+        }), L < l.length - 1 && n.push({
+          type: "newline",
+          id: `newline-${p++}`
+        });
+      });
+    }
+    return n;
+  }, J = () => {
+    var e;
+    (e = B.current) == null || e.setAttribute("contenteditable", "true"), y.current && (O(y.current) && y.current.children[0].setAttribute("contenteditable", "false"), y.current = null);
+  }, we = (e) => {
+    console.log("handleEditorClick", e), b == null || b(e);
+  }, Ce = (e) => {
+    console.log("handleEditorMouseDown", e), J();
+  }, me = (e) => {
+    console.log("handleEditorInput", e), v(V()), ee(ae()), C == null || C(V());
+  }, Ae = (e) => {
+    if (e.code === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      const n = V();
+      console.log("onSend", n, "maxLength:", f, "length:", n.length), f ? n.length <= f ? a == null || a(n) : (console.log("maxLength exceeded", n, f), z == null || z(n, f)) : a == null || a(n);
+    }
+  }, ke = (e) => {
+    var t;
+    console.log("handleEditorKeyDown", e), m == null || m(e);
+    const n = We();
+    if (n && je(n)) {
+      if (e.code === "ArrowLeft") {
+        const o = n == null ? void 0 : n.previousElementSibling, d = Z(n);
+        o && d === 0 && O(o) && o.children[0] && (y.current = o, F(o), requestAnimationFrame(() => {
+          W(o.children[0]);
+        }));
+      }
+      if (e.code === "ArrowRight") {
+        const o = n == null ? void 0 : n.nextElementSibling, d = Z(n);
+        o && d === ((t = n.textContent) == null ? void 0 : t.length) && O(o) && o.children[0] && (y.current = o, F(o), requestAnimationFrame(() => {
+          K(o.children[0]);
+        }));
+      }
+    }
+    if (n && n.getAttribute("data-set-type") === "container") {
+      if (e.code === "ArrowLeft") {
+        const o = _e();
+        O(o) && o.children[0] && (y.current = o, F(o), requestAnimationFrame(() => {
+          W(o.children[0]);
+        }));
+      }
+      if (e.code === "ArrowRight") {
+        const o = ze();
+        O(o) && o.children[0] && (y.current = o, F(o), requestAnimationFrame(() => {
+          K(o.children[0]);
+        }));
+      }
+    }
+    Ae(e);
+  }, Re = (e) => {
+    console.log("handleEditorKeyUp", e), D == null || D(e);
+  }, Ne = (e, n) => {
+    n.stopPropagation(), console.log("handleInputClick", e);
+  }, Se = (e, n) => {
+    var o;
+    n.stopPropagation(), console.log("handleInputMouseDown", e, n), y.current && ue(y.current), (o = B.current) == null || o.setAttribute("contenteditable", "false");
+    const t = document.getElementById(e.id);
+    y.current = t, requestAnimationFrame(() => {
+      F(t);
+    });
+  }, De = (e, n) => {
+    var d, p, R, g, l;
+    console.log("handleInputKeyDown", e, n), m == null || m(n), n.stopPropagation();
+    const t = n.target, o = Z(t);
+    if (n.code === "Backspace" && o === 0) {
+      const i = (d = t.parentElement) == null ? void 0 : d.previousElementSibling;
+      console.log("previousElement", i), i && (O(i) && i.children[0] && ((p = i.children[0].textContent) != null && p.length) ? (y.current = i, F(i), W(i.children[0]), requestAnimationFrame(() => {
+        Y(i.children[0]);
+      })) : (J(), W(i)));
+    }
+    if (n.code === "ArrowRight" && o === ((R = t.textContent) == null ? void 0 : R.length)) {
+      const i = (g = t.parentElement) == null ? void 0 : g.nextElementSibling;
+      console.log("nextElement", i), i && (O(i) && i.children[0] && ((l = i.children[0].textContent) != null && l.length) ? (y.current = i, F(i), K(i.children[0]), requestAnimationFrame(() => {
+        Y(i.children[0]);
+      })) : (J(), K(i)));
+    }
+  }, Te = (e, n) => {
+    console.log("handleInputKeyUp", e, n), D == null || D(n);
+    const t = n.target;
+    Y(t);
+  }, Pe = (e, n) => {
+    var o;
+    n.stopPropagation(), console.log("handlePlaceholderMouseDown", e), y.current && ue(y.current), (o = B.current) == null || o.setAttribute("contenteditable", "false");
+    const t = document.getElementById(e.id);
+    y.current = t, requestAnimationFrame(() => {
+      F(t);
+    });
+  }, Le = (e, n) => {
+    console.log("handleInputChange", e, n), v(V()), ee(ae()), C == null || C(V());
+  }, Fe = (e, n) => {
+    console.log("handleTextSpanKeyDown 不生效", e, n);
+  };
+  H(() => {
+    if (!j)
+      return;
+    const e = (o) => {
+      T.current && !T.current.contains(o.target) && M(!1);
+    }, n = (o) => {
+      T.current && !T.current.contains(o.target) && M(!1);
+    }, t = () => {
+      M(!1);
+    };
+    return document.addEventListener("mousedown", e), document.addEventListener("scroll", n, !0), window.addEventListener("resize", t), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("scroll", n, !0), window.removeEventListener("resize", t);
+    };
+  }, [j]);
+  const Q = (e, n) => {
+    if (console.log("handleFloatChange", e, n), P && Ke(P.id, e), n === "select" && M(!1), n === "multiple-select" || n === "date-picker") {
+      const t = document.getElementById(P.id);
+      t && t.children[0] && t.children[1] && (e.length > 0 ? (t.children[0].setAttribute("style", "display: inline"), t.children[0].setAttribute("contenteditable", "false"), t.children[1].setAttribute("style", "display: none"), t.children[1].setAttribute("contenteditable", "true")) : (t.children[0].setAttribute("style", "display: none"), t.children[0].setAttribute("contenteditable", "true"), t.children[1].setAttribute("style", "display: inline"), t.children[1].setAttribute("contenteditable", "true")));
+    }
+  }, de = (e, n) => {
+    console.log("handleSelectClick", e, n);
+    const o = n.target.getBoundingClientRect();
+    ne(e.options), le(e.value || pe(e.id)), X({ top: -999999, left: -999999999 }), oe(e), se(be), M(!0), requestAnimationFrame(() => {
+      if (T.current) {
+        console.log("currentFloatElementRef.current", T.current);
+        const d = T.current.getBoundingClientRect();
+        let p = o.left, R = o.top + o.height;
+        window.innerWidth - o.right < Ee && o.width < d.width && (p = o.right - d.width), o.top < d.height && (R = o.top + o.height), X({ top: R, left: p }), se(d.height);
+      }
+    });
+  }, Oe = (e, n) => {
+    console.log("handleDatePickerClick", e, n);
+    const o = n.target.getBoundingClientRect();
+    let d = o.left, p = o.top - re;
+    window.innerWidth - o.right < ie && (d = d - ie + o.width), o.top < re && (p = o.top + o.height), ne(e.options), le(e.value || pe(e.id)), X({ top: p, left: d }), oe(e), M(!0);
+  }, $e = () => {
+    const e = xe(I);
+    console.log("parsed", e);
+    const n = [];
+    return e.forEach((t) => {
+      var o, d, p, R, g, l;
+      if (t.type === "text")
+        n.push(
+          /* @__PURE__ */ h("span", { onKeyDown: (i) => Fe(t, i), children: t.content }, t.id)
+        );
+      else if (t.type === "newline")
+        n.push(/* @__PURE__ */ h("br", {}, t.id));
+      else if (t.type === "input")
+        n.push(
+          /* @__PURE__ */ q(
+            "span",
+            {
+              id: t.id,
+              "data-set-type": "input",
+              contentEditable: !1,
+              suppressContentEditableWarning: !0,
+              onInput: (i) => Le(t, i),
+              onClick: (i) => Ne(t, i),
+              onMouseDown: (i) => Se(t, i),
+              "data-cosmic-ai-input-placeholder": t.placeholder,
+              children: [
+                /* @__PURE__ */ h("span", { className: "cosmic-ai-input-inputContent", style: { padding: (o = t.content) != null && o.length ? "2px 4px" : "2px 0 2px 4px" }, contentEditable: !1, onKeyDown: (i) => De(t, i), onKeyUp: (i) => Te(t, i), children: t.content }),
+                /* @__PURE__ */ h("span", { contentEditable: !1, style: { display: (d = t.content) != null && d.length ? "none" : "inline" }, className: "cosmic-ai-input-placeholder", onMouseDown: (i) => Pe(t, i), children: t.placeholder })
+              ]
+            },
+            t.id
+          )
+        );
+      else if (t.type === "select") {
+        const i = t.content || ((p = t.options) == null ? void 0 : p[0]) || t.placeholder;
+        n.push(
+          /* @__PURE__ */ h(
+            "span",
+            {
+              id: t.id,
+              "data-set-type": "select",
+              contentEditable: !0,
+              suppressContentEditableWarning: !0,
+              onClick: (L) => de(t, L),
+              "data-cosmic-ai-input-placeholder": t.placeholder,
+              children: /* @__PURE__ */ h("span", { contentEditable: !1, children: i })
+            },
+            t.id
+          )
+        );
+      } else if (t.type === "multiple-select") {
+        const i = t.content || ((R = t.options) == null ? void 0 : R[0]);
+        n.push(
+          /* @__PURE__ */ q(
+            "span",
+            {
+              id: t.id,
+              "data-set-type": "multiple-select",
+              contentEditable: !0,
+              suppressContentEditableWarning: !0,
+              onClick: (L) => de(t, L),
+              "data-cosmic-ai-input-placeholder": t.placeholder,
+              children: [
+                /* @__PURE__ */ h("span", { style: { display: i != null && i.length ? "inline" : "none" }, contentEditable: !1, children: i }),
+                /* @__PURE__ */ h("span", { style: { display: i != null && i.length ? "none" : "inline" }, className: "cosmic-ai-input-selectPlaceholder", contentEditable: !1, children: t.placeholder })
+              ]
+            },
+            t.id
+          )
+        );
+      } else t.type === "date-picker" && n.push(
+        /* @__PURE__ */ q(
+          "span",
+          {
+            id: t.id,
+            "data-set-type": "date-picker",
+            contentEditable: !0,
+            suppressContentEditableWarning: !0,
+            onClick: (i) => Oe(t, i),
+            "data-cosmic-ai-input-placeholder": t.placeholder,
+            children: [
+              /* @__PURE__ */ h("span", { style: { display: (g = t.content) != null && g.length ? "inline" : "none" }, contentEditable: !1, children: t.content }),
+              /* @__PURE__ */ h("span", { style: { display: (l = t.content) != null && l.length ? "none" : "inline" }, className: "cosmic-ai-input-datePickerPlaceholder", contentEditable: !1, children: t.placeholder })
+            ]
+          },
+          t.id
+        )
+      );
+    }), n;
+  };
+  return Ve(r, () => ({
+    getCurrentValue: V
+  })), /* @__PURE__ */ q(Be, { children: [
+    /* @__PURE__ */ h(
+      "div",
+      {
+        "data-set-type": "container",
+        "data-cosmic-ai-input-placeholder": k,
+        className: He("cosmic-ai-input", `cosmic-ai-input-rows${E}`, { "is-disabled": N }, { "is-empty": I.length === 0 || ye === "<br>" }),
+        ref: B,
+        contentEditable: !0,
+        suppressContentEditableWarning: !0,
+        onClick: (e) => we(e),
+        onFocus: (e) => {
+          w == null || w(e);
+        },
+        onBlur: (e) => {
+          x == null || x(e);
+        },
+        onMouseDown: (e) => Ce(e),
+        onKeyDown: (e) => ke(e),
+        onKeyUp: (e) => Re(e),
+        onInput: (e) => me(e),
+        children: $e()
+      }
+    ),
+    j && qe(
+      (P == null ? void 0 : P.type) === "multiple-select" ? /* @__PURE__ */ h(
+        fe,
+        {
+          ref: T,
+          options: te,
+          value: G,
+          position: U,
+          height: ce,
+          onChange: Q
+        },
+        "multiple-select"
+      ) : (P == null ? void 0 : P.type) === "date-picker" ? /* @__PURE__ */ h(
+        he,
+        {
+          ref: T,
+          value: G,
+          position: U,
+          onChange: Q
+        },
+        "date-picker"
+      ) : /* @__PURE__ */ h(
+        ge,
+        {
+          ref: T,
+          options: te,
+          value: G,
+          position: U,
+          height: ce,
+          onChange: Q
+        },
+        "select"
+      ),
+      document.body
+    )
+  ] });
+});
+Ue.displayName = "AiInput";
+export {
+  Ue as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.cosmic-ai-input{font-size:14px;outline:none}.cosmic-ai-input [data-set-type=input]{color:#b4c5fc;padding:0 2px;caret-color:#000}.cosmic-ai-input [data-set-type=select]{padding:0 2px;outline:none;color:#2356f6;cursor:pointer;position:relative;display:inline-block}.cosmic-ai-input [data-set-type=select] span{outline:none;background-color:#f2f5fe;border-radius:2px;white-space:nowrap;padding:0 16px 0 4px;display:inline-block}.cosmic-ai-input [data-set-type=select]:after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #2356f6;pointer-events:none}.cosmic-ai-input [data-set-type=multiple-select]{padding:0 2px;outline:none;color:#2356f6;cursor:pointer;position:relative;display:inline-block}.cosmic-ai-input [data-set-type=multiple-select] span{outline:none;background-color:#f2f5fe;border-radius:2px;white-space:nowrap;padding:2px 16px 2px 4px;display:inline-block}.cosmic-ai-input [data-set-type=multiple-select]:after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #2356f6;pointer-events:none}.cosmic-ai-input [data-set-type=date-picker]{padding:0 2px;outline:none;color:#2356f6;cursor:pointer;position:relative;display:inline-block}.cosmic-ai-input [data-set-type=date-picker] span{outline:none;background-color:#f2f5fe;border-radius:2px;white-space:nowrap;padding:2px 16px 2px 4px;display:inline-block}.cosmic-ai-input [data-set-type=date-picker]:after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #2356f6;pointer-events:none}.cosmic-ai-input.is-empty:before{content:attr(data-cosmic-ai-input-placeholder);position:absolute;color:#999;pointer-events:none}.cosmic-ai-input.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}.cosmic-ai-input-displayNone{display:none}.cosmic-ai-input-inputContent{outline:none;color:#2356f6;background-color:#f2f5fe;border-radius:2px}.cosmic-ai-input-placeholder{background-color:#f2f5fe;padding:2px 4px 2px 0;border-top-right-radius:2px;border-bottom-right-radius:2px}.cosmic-ai-input-selectPlaceholder,.cosmic-ai-input-datePickerPlaceholder{color:#b4c5fc}.cosmic-ai-input-rows1{min-height:auto}.cosmic-ai-input-rows2{min-height:46px}.cosmic-ai-input-rows3{min-height:69px}.cosmic-ai-input-rows4{min-height:92px}.cosmic-ai-input-selectFloatElement{background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 2px 8px #00000026;overflow-y:auto;z-index:5000;max-width:240px}.cosmic-ai-input-selectFloatElement .selectOption{padding:8px 12px;cursor:pointer;transition:background-color .2s ease;border-bottom:1px solid #f0f0f0;font-size:14px;color:#333;box-sizing:border-box;word-wrap:break-word;word-break:break-all;display:flex;align-items:center;justify-content:space-between}.cosmic-ai-input-selectFloatElement .selectOption:last-child{border-bottom:none}.cosmic-ai-input-selectFloatElement .selectOption:hover{background-color:#f5f5f5}.cosmic-ai-input-selectFloatElement .selectOption.selected{background-color:#e6f0ff;color:#2356f6;font-weight:500}.cosmic-ai-input-selectFloatElement .selectOption.selected:after{content:"✓";color:#2356f6;padding-left:6px}.cosmic-ai-input-datePicker{position:absolute;z-index:5000}.cosmic-ai-input-datePicker input[type=date]{visibility:hidden;height:0!important;box-sizing:border-box;border:none!important;position:relative;top:-10px}.cosmic-ai-input-commonSlot{padding:2px 0}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "cosmic-ai-input",
+  "version": "1.0.0",
+  "description": "A powerful AI conversation input component for React with TypeScript support",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "private": false,  
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./style.css": "./dist/style-global.css",
+    "./styles.css": "./dist/style-global.css",
+    "./styles": "./styles.js",
+    "./styles.cjs": "./styles.cjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "styles.js",
+    "styles.cjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "ai",
+    "input",
+    "conversation",
+    "typescript"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "classnames": "^2.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    },
+    "classnames": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "core-js": "^3.47.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.5",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "classnames": "^2.5.1",
+    "less": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "bundledDependencies": [],
+  "bundleDependencies": []
+}