cosmic-ai-input 1.0.11 → 1.0.13

package/README.md

@@ -36,7 +36,7 @@ import 'cosmic-ai-input/dist/style.css';
 
 const App = () => {
   const aiInputRef = useRef(null);
-  
+
   const varList = [
     {
       type: 'input',
@@ -63,6 +63,22 @@ const App = () => {
       name: 'birthday',
       content: '',
       placeholder: 'Select birthday'
+    },
+    {
+      type: 'label',
+      name: 'tags',
+      content: ''
+    }
+  ];
+
+  const mentions = [
+    {
+      prefix: '@',
+      options: ['User1', 'User2', 'User3']
+    },
+    {
+      prefix: '[',
+      options: ['name', 'gender', 'hobbies', 'birthday', 'tags']
     }
   ];
 
@@ -78,17 +94,25 @@ const App = () => {
     }
   };
 
+  const handleFocus = () => {
+    if (aiInputRef.current) {
+      aiInputRef.current.focus();
+    }
+  };
+
   return (
     <div>
       <h1>AI 对话输入组件示例</h1>
       <AiInput
         ref={aiInputRef}
         varList={varList}
+        mentions={mentions}
         value="你好 [name]，你的性别是 [gender]，爱好是 [hobbies]，生日是 [birthday]"
         placeholder="在这里输入你的消息..."
         onSend={handleSend}
       />
       <button onClick={handleGetValue}>获取当前值</button>
+      <button onClick={handleFocus}>获得焦点</button>
     </div>
   );
 };
@@ -96,6 +120,15 @@ const App = () => {
 export default App;
 ```
 
+## 键盘快捷键
+
+| 快捷键 | 行为 |
+|--------|------|
+| Enter | 发送消息（触发 onSend 回调） |
+| Shift + Enter | 不再换行，直接发送消息 |
+| 上下箭头 | 在提及选项列表中导航 |
+| Escape | 关闭打开的下拉菜单 |
+
 ## API
 
 ### AiInputProps
@@ -103,13 +136,16 @@ export default App;
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|--------|------|
 | value | string | - | 输入框的值，支持使用 `[变量名]` 格式引用变量 |
-| varList | VarItem[] | - | 变量列表，包含输入框、选择框、多选框和日期选择器等 |
+| varList | VarItem[] | - | 变量列表，包含输入框、选择框、多选框、日期选择器和标签等 |
 | placeholder | string | '' | 占位符文本 |
 | maxLength | 1 \| 2 \| 3 \| 4 \| undefined | - | 最大行数限制 |
 | defaultRows | number | 3 | 默认显示行数 |
 | disabled | boolean | false | 是否禁用输入框 |
+| defaultFocus | boolean | false | 是否默认获得焦点 |
+| textIndex | number | 0 | 文本缩进距离（单位：像素） |
+| mentions | MentionItem[] | [] | 提及配置，支持自定义前缀触发选项列表 |
 | onParse | (parsedValue: string) => void | - | 解析输入值时的回调函数 |
-| onSend | (value: string) => void | - | 发送消息时的回调函数 |
+| onSend | (value: string) => void | - | 发送消息时的回调函数（按 Enter 键触发） |
 | onMaxLengthExceeded | (value: string, maxLength: number) => void | - | 超过最大长度时的回调函数 |
 | onFocus | (e: React.FocusEvent) => void | - | 获得焦点时的回调函数 |
 | onBlur | (e: React.FocusEvent) => void | - | 失去焦点时的回调函数 |
@@ -171,6 +207,49 @@ interface DatePickerItem extends BaseInputItem {
 }
 ```
 
+### LabelItem
+
+标签项：
+
+```typescript
+interface LabelItem {
+  type: 'label';      // 类型为 label
+  name: string;       // 变量名，用于在 value 中引用
+  content: string;    // 标签内容
+}
+```
+
+### MentionItem
+
+提及配置项：
+
+```typescript
+interface MentionItem {
+  prefix: string;      // 触发前缀，如 '@' 或 '['
+  title?: string;      // 可选的标题
+  options: string[];   // 选项列表
+}
+```
+
+**使用示例：**
+
+```typescript
+<AiInput
+  mentions={[
+    {
+      prefix: '@',
+      options: ['用户1', '用户2', '用户3']
+    },
+    {
+      prefix: '[',
+      options: ['话题1', '话题2', '话题3']
+    }
+  ]}
+  // 当用户输入 @ 或 [ 时，会显示对应的选项列表
+  // 支持键盘上下箭头导航，回车选择
+/>
+```
+
 ### AiInputRef
 
 通过 ref 可以访问的方法：
@@ -178,6 +257,7 @@ interface DatePickerItem extends BaseInputItem {
 | 方法 | 类型 | 描述 |
 |------|------|------|
 | getCurrentValue | () => string | 获取当前输入框的值（包含变量替换后的完整文本） |
+| focus | () => void | 让输入框获得焦点 |
 
 ## TypeScript 支持
 
@@ -212,7 +292,19 @@ export interface DatePickerItem extends BaseInputItem {
   type: 'date-picker';
 }
 
-export type VarItem = InputItem | SelectItem | MultipleSelectItem | DatePickerItem;
+export interface LabelItem {
+  type: 'label';
+  name: string;
+  content: string;
+}
+
+export interface MentionItem {
+  prefix: string;
+  title?: string;
+  options: string[];
+}
+
+export type VarItem = InputItem | SelectItem | MultipleSelectItem | DatePickerItem | LabelItem;
 
 export interface AiInputProps {
   value?: string;
@@ -221,6 +313,9 @@ export interface AiInputProps {
   maxLength?: 1 | 2 | 3 | 4;
   defaultRows?: number;
   disabled?: boolean;
+  defaultFocus?: boolean;
+  textIndex?: number;
+  mentions?: MentionItem[];
   onParse?: (parsedValue: string) => void;
   onSend?: (value: string) => void;
   onMaxLengthExceeded?: (value: string, maxLength: number) => void;

package/dist/index.cjs.js

@@ -1,6 +1,6 @@
-// Generated at: 2026-01-19T02:33:31.954Z
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),i=require("react"),xe=require("classnames"),ze=require("react-dom"),we=i.forwardRef(({value:c,position:r,id:s,onChange:p},S)=>{const[w,C]=i.useState(!0),k=i.useRef(null),R=i.useRef(null);i.useEffect(()=>{typeof S=="function"?S(k.current):S&&(S.current=k.current)},[S]);const m=d=>{console.log("DatePicker handleChange",d);const y=d.target.value;p==null||p(y,"date-picker")};i.useEffect(()=>{if(R.current)try{setTimeout(()=>{T()},100)}catch(d){console.log("无法自动打开日期选择器，浏览器安全策略限制",d)}},[]);const T=()=>{if(R.current)try{R.current.showPicker()}catch(d){console.log("点击后无法打开日期选择器",d)}},g=d=>{d.stopPropagation(),console.log("DatePicker handleClick",d)};return w?u.jsx("div",{ref:k,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:R,type:"date",value:c||"",onChange:m,onClick:g})}):null});we.displayName="DatePicker";function Y(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 M(c){if(c&&c.getAttribute("data-set-type")==="input"){const r=c.children[0];r.setAttribute("contenteditable","true"),requestAnimationFrame(()=>{r.focus()})}}function Ee(c){c&&c.getAttribute("data-set-type")==="input"&&c.children[0].setAttribute("contenteditable","false")}function P(c){return c&&c.getAttribute("data-set-type")==="input"}const Ce=i.forwardRef(({options:c,value:r,position:s,id:p,height:S=37,onChange:w},C)=>{const[k,R]=i.useState(r||""),m=i.useRef(null);i.useEffect(()=>{typeof C=="function"?C(m.current):C&&(C.current=m.current)},[C]);const T=d=>{const y=k.split(",").filter(D=>D)||[];let F="";y.includes(d)?F=y.filter(D=>D!==d).join(","):(console.log("handleOptionClick",y),y.length?F=`${y.join(",")},${d}`:F=d),R(F),w==null||w(F,"multiple-select")},g=k.split(",")||[];return u.jsx("div",{ref:m,className:"cosmic-ai-input-selectFloatElement",id:p,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,y)=>u.jsx("div",{className:`selectOption ${g.includes(d)?"selected":""}`,onClick:()=>T(d),children:d},y))})});Ce.displayName="MultipleSelect";const me=i.forwardRef(({options:c,value:r,position:s,id:p,height:S=120,onChange:w},C)=>{const[k,R]=i.useState(r||""),m=i.useRef(null);i.useEffect(()=>{typeof C=="function"?C(m.current):C&&(C.current=m.current)},[C]);const T=g=>{R(g),w==null||w(g,"select")};return u.jsx("div",{ref:m,className:"cosmic-ai-input-selectFloatElement",id:p,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.length>0&&c.map((g,d)=>u.jsx("div",{className:`selectOption ${k===g?"selected":""}`,onClick:()=>T(g),children:g},d))})});me.displayName="Select";function be(c){const r=c instanceof Element?c:document.getElementById(c);return r&&r.children[0].textContent||""}function ve(c,r){const s=c instanceof Element?c:document.getElementById(c);s&&(s.children[0].textContent=r)}function V(c){const r=document.createRange(),s=window.getSelection();if(!s){console.error("无法获取selection对象");return}if(!c||!(c instanceof Node)){console.error("element 不是有效的 DOM 节点");return}r.selectNodeContents(c),r.collapse(!0),s.removeAllRanges(),s.addRange(r)}function j(c){const r=document.createRange(),s=window.getSelection();if(!s){console.error("无法获取selection对象");return}if(!c||!(c instanceof Node)){console.error("element 不是有效的 DOM 节点");return}r.selectNodeContents(c),r.collapse(!1),s.removeAllRanges(),s.addRange(r)}function Z(c){const r=window.getSelection();if(!r||r.rangeCount===0)return 0;if(!c||!(c instanceof Node)){console.error("element 不是有效的 DOM 节点");return}const s=r.getRangeAt(0),p=s.cloneRange();return p.selectNodeContents(c),p.setEnd(s.startContainer,s.startOffset),p.toString().length}function Ue(){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 Xe(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const r=c.getRangeAt(0),s=r.startContainer,p=r.startOffset;return s.nodeType===Node.TEXT_NODE?p>0?s:s.previousSibling:s.nodeType===Node.ELEMENT_NODE?p>0?s.childNodes[p-1]:s.previousSibling:null}function Ge(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const r=c.getRangeAt(0),s=r.startContainer,p=r.startOffset;return s.nodeType===Node.TEXT_NODE?p<s.length?s:s.nextSibling:s.nodeType===Node.ELEMENT_NODE?p<s.childNodes.length?s.childNodes[p]:s.nextSibling:null}function Je(c){return c&&!c.getAttribute("data-set-type")}const Re=i.forwardRef((c,r)=>{const{value:s="",varList:p,placeholder:S="",maxLength:w,defaultRows:C=3,disabled:k=!1,defaultFocus:R=!1,onFocus:m,onBlur:T,onChange:g,onClick:d,onSend:y,onParse:F,onKeyDown:D,onKeyUp:O,onMaxLengthExceeded:K}=c,[Qe,Ye]=i.useState(s||""),[W,_]=i.useState(""),[Ze,I]=i.useState(""),[z,H]=i.useState(!1),[v,U]=i.useState({top:0,left:0}),[ee,te]=i.useState([]),[X,ne]=i.useState(""),[L,oe]=i.useState(null),[le,se]=i.useState(120),[ce,re]=i.useState(R),Se=240,Ae=240,ie=240,ae=276,x=i.useRef(null),E=i.useRef(null),N=i.useRef(null),B=()=>{var o,n;let e=((n=(o=x.current)==null?void 0:o.innerText)==null?void 0:n.replace(/\u200B/g,""))||"";return e===`
-`&&(e=""),e},de=()=>{var o;let e=((o=x.current)==null?void 0:o.innerHTML)||"";return e==="<br>"&&(e=""),e},ke=e=>{const o=[];let n=0;const l=/\[([^\]]+)\]/g;let a;const f=`${Date.now()}-${Math.random().toString(36).slice(2,9)}`;let h=0;if(e===""||!e||e===`
-`)return[{type:"text",content:"​",id:`text-${h++}-${f}`}];const $=new Set((p||[]).map(b=>b.name));for(;(a=l.exec(e))!==null;){if(a.index>n){const A=e.substring(n,a.index).split(`
-`);A.forEach((q,_e)=>{q&&o.push({type:"text",content:q,id:`text-${h++}-${f}`}),_e<A.length-1&&o.push({type:"newline",id:`newline-${h++}-${f}`})})}const b=a[1];if($.has(b)){const t=p.find(A=>A.name===b);(t==null?void 0:t.type)==="input"?o.push({type:"input",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",placeholder:(t==null?void 0:t.placeholder)||b,id:`input-${h++}-${f}`}):(t==null?void 0:t.type)==="select"?o.push({type:"select",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",placeholder:(t==null?void 0:t.placeholder)||b,options:(t==null?void 0:t.options)||[],id:`select-${h++}-${f}`}):(t==null?void 0:t.type)==="multiple-select"?o.push({type:"multiple-select",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",placeholder:(t==null?void 0:t.placeholder)||b,options:(t==null?void 0:t.options)||[],id:`multiple-select-${h++}-${f}`}):(t==null?void 0:t.type)==="date-picker"&&o.push({type:"date-picker",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",placeholder:(t==null?void 0:t.placeholder)||b,id:`date-picker-${h++}-${f}`})}else o.push({type:"text",content:`[${b}]`,id:`text-${h++}-${f}`});n=l.lastIndex}if(n<e.length){const t=e.substring(n).split(`
-`);t.forEach((A,q)=>{A&&o.push({type:"text",content:A,id:`text-${h++}`}),q<t.length-1&&o.push({type:"newline",id:`newline-${h++}`})})}return o},G=()=>{var e;(e=x.current)==null||e.setAttribute("contenteditable","true"),E.current&&(P(E.current)&&E.current.children[0].setAttribute("contenteditable","false"),E.current=null),j(x.current)},De=e=>{console.log("handleEditorClick",e),d==null||d(e)},Ne=e=>{console.log("handleEditorMouseDown",e),G()},ue=e=>{console.log("handleEditorInput",e),_(B()),I(de()),g==null||g(B())},Te=e=>{var o,n;if(e.code==="Enter"&&!e.shiftKey){e.preventDefault();const l=B();if(console.log("onSend",l,"maxLength:",w,"length:",l.length),l.length===0||(console.log("containerRef.current?.innerHTML",(o=x.current)==null?void 0:o.innerHTML),(n=x.current)!=null&&n.innerHTML.match(/^<span>[\s\u200B]*(<br\s*\/?>[\s\u200B]*)+<\/span>$/)))return;w?l.length<=w?y==null||y(l):(console.log("maxLength exceeded",l,w),K==null||K(l,w)):y==null||y(l)}},Le=e=>{var n;console.log("handleEditorKeyDown",e),D==null||D(e);const o=Ue();if(o&&Je(o)){if(e.code==="ArrowLeft"){const l=o==null?void 0:o.previousElementSibling,a=Z(o);l&&a===0&&P(l)&&l.children[0]&&(E.current=l,M(l),requestAnimationFrame(()=>{j(l.children[0])}))}if(e.code==="ArrowRight"){const l=o==null?void 0:o.nextElementSibling,a=Z(o);l&&a===((n=o.textContent)==null?void 0:n.length)&&P(l)&&l.children[0]&&(E.current=l,M(l),requestAnimationFrame(()=>{V(l.children[0])}))}e.code==="Backspace"&&(o.innerHTML==="​"&&e.preventDefault(),o.innerHTML==="<br>"&&(e.preventDefault(),o.innerHTML="​"))}if(o&&o.getAttribute("data-set-type")==="container"){if(e.code==="ArrowLeft"){const l=Xe();P(l)&&l.children[0]&&(E.current=l,M(l),requestAnimationFrame(()=>{j(l.children[0])}))}if(e.code==="ArrowRight"){const l=Ge();P(l)&&l.children[0]&&(E.current=l,M(l),requestAnimationFrame(()=>{V(l.children[0])}))}}Te(e)},$e=e=>{console.log("handleEditorKeyUp",e),O==null||O(e)},Me=e=>{e.preventDefault();const n=window.getSelection().toString();if(!n)return;const l=n,a=n;e.clipboardData.setData("text/plain",l),e.clipboardData.setData("text/html",a)},je=e=>{m==null||m(e)},Pe=(e,o)=>{o.stopPropagation(),console.log("handleInputClick",e)},Fe=(e,o)=>{var l;o.stopPropagation(),console.log("handleInputMouseDown",e,o),E.current&&Ee(E.current),(l=x.current)==null||l.setAttribute("contenteditable","false");const n=document.getElementById(e.id);E.current=n,requestAnimationFrame(()=>{M(n)})},Oe=(e,o)=>{var a,f,h,$,b;console.log("handleInputKeyDown",e,o),D==null||D(o),o.stopPropagation();const n=o.target,l=Z(n);if(o.code==="Backspace"&&l===0){const t=(a=n.parentElement)==null?void 0:a.previousElementSibling;console.log("previousElement",t),t&&(P(t)&&t.children[0]&&((f=t.children[0].textContent)!=null&&f.length)?(E.current=t,M(t),j(t.children[0]),requestAnimationFrame(()=>{Y(t.children[0])})):(G(),j(t)))}if(o.code==="ArrowRight"&&l===((h=n.textContent)==null?void 0:h.length)){const t=($=n.parentElement)==null?void 0:$.nextElementSibling;console.log("nextElement",t),t&&(P(t)&&t.children[0]&&((b=t.children[0].textContent)!=null&&b.length)?(E.current=t,M(t),V(t.children[0]),requestAnimationFrame(()=>{Y(t.children[0])})):(G(),V(t)))}},He=(e,o)=>{console.log("handleInputKeyUp",e,o),O==null||O(o);const n=o.target;Y(n)},Be=(e,o)=>{var l;o.stopPropagation(),console.log("handlePlaceholderMouseDown",e),E.current&&Ee(E.current),(l=x.current)==null||l.setAttribute("contenteditable","false");const n=document.getElementById(e.id);E.current=n,requestAnimationFrame(()=>{M(n)})},qe=(e,o)=>{console.log("handleInputChange",e,o),_(B()),I(de()),g==null||g(B())},Ve=(e,o)=>{console.log("handleTextSpanKeyDown 不生效",e,o)};i.useEffect(()=>{if(!z)return;const e=l=>{N.current&&!N.current.contains(l.target)&&H(!1)},o=l=>{N.current&&!N.current.contains(l.target)&&H(!1)},n=()=>{H(!1)};return document.addEventListener("mousedown",e),document.addEventListener("scroll",o,!0),window.addEventListener("resize",n),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("scroll",o,!0),window.removeEventListener("resize",n)}},[z]);const J=(e,o)=>{if(console.log("handleFloatChange",e,o),L&&ve(L.id,e),o==="select"&&H(!1),o==="multiple-select"||o==="date-picker"){const n=document.getElementById(L.id);n&&n.children[0]&&n.children[1]&&(e.length>0?(n.children[0].setAttribute("style","display: inline"),n.children[0].setAttribute("contenteditable","false"),n.children[1].setAttribute("style","display: none"),n.children[1].setAttribute("contenteditable","true")):(n.children[0].setAttribute("style","display: none"),n.children[0].setAttribute("contenteditable","true"),n.children[1].setAttribute("style","display: inline"),n.children[1].setAttribute("contenteditable","true")))}ue({})},pe=(e,o)=>{console.log("handleSelectClick",e,o);const l=o.target.getBoundingClientRect();te(e.options),ne(e.value||be(e.id)),U({top:-999999,left:-999999999}),oe(e),se(Ae),H(!0),requestAnimationFrame(()=>{if(N.current){console.log("currentFloatElementRef.current",N.current);const a=N.current.getBoundingClientRect();let f=l.left,h=l.top+l.height;window.innerWidth-l.right<Se&&l.width<a.width&&(f=l.right-a.width),l.top<a.height&&(h=l.top+l.height),U({top:h,left:f}),se(a.height)}})},Ke=(e,o)=>{console.log("handleDatePickerClick",e,o);const l=o.target.getBoundingClientRect();let a=l.left,f=l.top-ae;window.innerWidth-l.right<ie&&(a=a-ie+l.width),l.top<ae&&(f=l.top+l.height),te(e.options),ne(e.value||be(e.id)),U({top:f,left:a}),oe(e),H(!0)},[fe,he]=i.useState([]),[Q,ge]=i.useState(!0),ye=i.useCallback(()=>{ge(!1);const e=ke(s),o=[];return e.forEach(n=>{var l,a,f,h,$,b;if(n.type==="text")o.push(u.jsx("span",{onKeyDown:t=>Ve(n,t),children:n.content},n.id));else if(n.type==="newline")o.push(u.jsx("br",{},n.id));else if(n.type==="input")o.push(u.jsxs("span",{id:n.id,"data-set-type":"input",contentEditable:!1,suppressContentEditableWarning:!0,onInput:t=>qe(n,t),onClick:t=>Pe(n,t),onMouseDown:t=>Fe(n,t),"data-cosmic-ai-input-placeholder":n.placeholder,children:[u.jsx("span",{className:"cosmic-ai-input-inputContent",style:{padding:(l=n.content)!=null&&l.length?"2px 4px":"2px 0 2px 4px"},contentEditable:!1,onKeyDown:t=>Oe(n,t),onKeyUp:t=>He(n,t),children:n.content}),u.jsx("span",{contentEditable:!1,style:{display:(a=n.content)!=null&&a.length?"none":"inline"},className:"cosmic-ai-input-placeholder",onMouseDown:t=>Be(n,t),children:n.placeholder})]},n.id));else if(n.type==="select"){const t=n.content||((f=n.options)==null?void 0:f[0])||n.placeholder;o.push(u.jsx("span",{id:n.id,"data-set-type":"select",contentEditable:!1,suppressContentEditableWarning:!0,onClick:A=>pe(n,A),"data-cosmic-ai-input-placeholder":n.placeholder,children:u.jsx("span",{contentEditable:!1,children:t})},n.id))}else if(n.type==="multiple-select"){const t=n.content||((h=n.options)==null?void 0:h[0]);o.push(u.jsxs("span",{id:n.id,"data-set-type":"multiple-select",contentEditable:!1,suppressContentEditableWarning:!0,onClick:A=>pe(n,A),"data-cosmic-ai-input-placeholder":n.placeholder,children:[u.jsx("span",{style:{display:t!=null&&t.length?"inline":"none"},contentEditable:!1,children:t}),u.jsx("span",{style:{display:t!=null&&t.length?"none":"inline"},className:"cosmic-ai-input-selectPlaceholder",contentEditable:!1,children:n.placeholder})]},n.id))}else n.type==="date-picker"&&o.push(u.jsxs("span",{id:n.id,"data-set-type":"date-picker",contentEditable:!1,suppressContentEditableWarning:!0,onClick:t=>Ke(n,t),"data-cosmic-ai-input-placeholder":n.placeholder,children:[u.jsx("span",{style:{display:($=n.content)!=null&&$.length?"inline":"none"},contentEditable:!1,children:n.content}),u.jsx("span",{style:{display:(b=n.content)!=null&&b.length?"none":"inline"},className:"cosmic-ai-input-datePickerPlaceholder",contentEditable:!1,children:n.placeholder})]},n.id))}),setTimeout(()=>{ge(!0)},0),console.log("重新渲染 ============================>","elements",o,"parsed",e,s),o},[s]);i.useEffect(()=>{Q&&setTimeout(()=>{j(x.current)},0)},[Q]),i.useEffect(()=>{s!==W?(he(ye()),_(s),re(!0)):(s===""||!s)&&he(ye())},[s,W]),i.useEffect(()=>{if(!R&&!ce)return;const e=new MutationObserver(()=>{x.current&&document.contains(x.current)&&(requestAnimationFrame(()=>{j(x.current),re(!1)}),e.disconnect())});return x.current&&e.observe(document.body,{childList:!0,subtree:!0}),()=>e.disconnect()},[R,ce]);const We=()=>{x.current&&requestAnimationFrame(()=>{j(x.current)})};return i.useImperativeHandle(r,()=>({getCurrentValue:B,focus:We})),console.log("renderElements",fe),u.jsxs("div",{className:xe(`cosmic-ai-input-rows${C}`),children:[Q&&u.jsx("div",{"data-set-type":"container","data-cosmic-ai-input-placeholder":S,className:xe("cosmic-ai-input",`cosmic-ai-input-rows${C}`,{"is-disabled":k},{"is-empty":W.length===0}),ref:x,contentEditable:!0,suppressContentEditableWarning:!0,onClick:e=>De(e),onFocus:e=>{je(e)},onBlur:e=>{T==null||T(e)},onMouseDown:e=>Ne(e),onKeyDown:e=>Le(e),onKeyUp:e=>$e(e),onInput:e=>ue(e),onCopy:e=>Me(e),children:fe}),z&&ze.createPortal((L==null?void 0:L.type)==="multiple-select"?u.jsx(Ce,{ref:N,options:ee,value:X,position:v,height:le,onChange:J},"multiple-select"):(L==null?void 0:L.type)==="date-picker"?u.jsx(we,{ref:N,value:X,position:v,onChange:J},"date-picker"):u.jsx(me,{ref:N,options:ee,value:X,position:v,height:le,onChange:J},"select"),document.body)]})});Re.displayName="AiInput";exports.default=Re;
+// Generated at: 2026-03-10T07:58:48.707Z
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),c=require("react"),Re=require("classnames"),tt=require("react-dom");var g=(r=>(r.INPUT="input",r.SELECT="select",r.MULTIPLE_SELECT="multiple-select",r.DATE_PICKER="date-picker",r.LABEL="label",r))(g||{});const Te=c.forwardRef(({value:r,position:o,id:l,onChange:p},k)=>{const[C,E]=c.useState(!0),$=c.useRef(null),N=c.useRef(null);c.useEffect(()=>{typeof k=="function"?k($.current):k&&(k.current=$.current)},[k]);const L=h=>{const x=h.target.value;p==null||p(x,g.DATE_PICKER)};c.useEffect(()=>{if(N.current)try{setTimeout(()=>{D()},100)}catch{}},[]);const D=()=>{if(N.current)try{N.current.showPicker()}catch{}},A=h=>{h.stopPropagation()};return C?u.jsx("div",{ref:$,id:l,style:{top:(o==null?void 0:o.top)||0,left:(o==null?void 0:o.left)||0},className:"cosmic-ai-input-datePicker",suppressHydrationWarning:!0,children:u.jsx("input",{ref:N,type:"date",value:r||"",onChange:L,onClick:A})}):null});Te.displayName="DatePicker";function oe(r){const o=r.textContent||"",l=r.nextSibling;o.length?(l==null||l.setAttribute("style","display: none"),r.style.padding="2px 4px",r.style.borderTopLeftRadius="2px",r.style.borderBottomLeftRadius="2px",r.style.borderTopRightRadius="2px",r.style.borderBottomRightRadius="2px"):(l==null||l.setAttribute("style","display: inline"),r.style.padding="2px 0 2px 4px",r.style.borderTopLeftRadius="2px",r.style.borderBottomLeftRadius="2px",r.style.borderTopRightRadius="0",r.style.borderBottomRightRadius="0")}function H(r){if(r&&r.getAttribute("data-set-type")==="input"){const o=r.children[0];o.setAttribute("contenteditable","true"),requestAnimationFrame(()=>{o.focus()})}}function me(r){r&&r.getAttribute("data-set-type")==="input"&&r.children[0].setAttribute("contenteditable","false")}function O(r){return r&&(r!=null&&r.getAttribute)?r.getAttribute("data-set-type")==="input":!1}const De=c.forwardRef(({options:r,value:o,position:l,id:p,height:k=37,onChange:C},E)=>{const[$,N]=c.useState(o||""),L=c.useRef(null);c.useEffect(()=>{typeof E=="function"?E(L.current):E&&(E.current=L.current)},[E]);const D=h=>{const x=$.split(",").filter(y=>y)||[];let b="";x.includes(h)?b=x.filter(y=>y!==h).join(","):x.length?b=`${x.join(",")},${h}`:b=h,N(b),C==null||C(b,g.MULTIPLE_SELECT)},A=$.split(",")||[];return u.jsx("div",{ref:L,className:"cosmic-ai-input-selectFloatElement",id:p,style:{position:"absolute",top:(l==null?void 0:l.top)||0,left:(l==null?void 0:l.left)||0,zIndex:5e3,maxHeight:`${k}px`},children:r.map((h,x)=>u.jsx("div",{className:`selectOption ${A.includes(h)?"selected":""}`,onClick:()=>D(h),children:h},x))})});De.displayName="MultipleSelect";const Ne=c.forwardRef(({options:r,value:o,position:l,id:p,height:k=120,onChange:C},E)=>{const[$,N]=c.useState(o||""),L=c.useRef(null);c.useEffect(()=>{typeof E=="function"?E(L.current):E&&(E.current=L.current)},[E]);const D=A=>{N(A),C==null||C(A,g.SELECT)};return u.jsx("div",{ref:L,className:"cosmic-ai-input-selectFloatElement",id:p,style:{position:"absolute",top:(l==null?void 0:l.top)||0,left:(l==null?void 0:l.left)||0,zIndex:5e3,maxHeight:`${k}px`},children:r.length>0&&r.map((A,h)=>u.jsx("div",{className:`selectOption ${$===A?"selected":""}`,onClick:()=>D(A),children:A},h))})});Ne.displayName="Select";function Le(r){const o=r instanceof Element?r:document.getElementById(r);return o&&o.children[0].textContent||""}function nt(r,o){const l=r instanceof Element?r:document.getElementById(r);l&&(l.children[0].textContent=o)}function Q(r){const o=document.createRange(),l=window.getSelection();l&&(!r||!(r instanceof Node)||(o.selectNodeContents(r),o.collapse(!0),l.removeAllRanges(),l.addRange(o)))}function F(r){const o=document.createRange(),l=window.getSelection();l&&(!r||!(r instanceof Node)||(o.selectNodeContents(r),o.collapse(!1),l.removeAllRanges(),l.addRange(o)))}function ae(r){const o=window.getSelection();if(!o||o.rangeCount===0)return 0;if(!r||!(r instanceof Node))return;const l=o.getRangeAt(0),p=l.cloneRange();return p.selectNodeContents(r),p.setEnd(l.startContainer,l.startOffset),p.toString().length}function st(){const r=window.getSelection();if(!r||r.rangeCount===0)return null;const l=r.getRangeAt(0).startContainer;return l.nodeType===Node.TEXT_NODE?l.parentElement:l.nodeType===Node.ELEMENT_NODE?l:null}function rt(){const r=window.getSelection();return!r||r.rangeCount===0?null:r.getRangeAt(0).getBoundingClientRect()}function it(){return new Promise(r=>{requestAnimationFrame(()=>{r(rt())})})}function lt(){const r=window.getSelection();if(!r||r.rangeCount===0)return null;const o=r.getRangeAt(0),l=o.startContainer,p=o.startOffset;return l.nodeType===Node.TEXT_NODE?p>0?l:l.previousSibling:l.nodeType===Node.ELEMENT_NODE?p>0?l.childNodes[p-1]:l.previousSibling:null}function ct(){const r=window.getSelection();if(!r||r.rangeCount===0)return null;const o=r.getRangeAt(0),l=o.startContainer,p=o.startOffset;return l.nodeType===Node.TEXT_NODE?p<l.length?l:l.nextSibling:l.nodeType===Node.ELEMENT_NODE?p<l.childNodes.length?l.childNodes[p]:l.nextSibling:null}function ot(r){return r&&!r.getAttribute("data-set-type")}function Se(){return`${Date.now()}-${Math.random().toString(36).slice(2,9)}`}const ke=c.forwardRef(({options:r,value:o,position:l,id:p,height:k=120,onChange:C},E)=>{const[$,N]=c.useState(o||""),[L,D]=c.useState(0),A=c.useRef(null),h=c.useRef(L),x=c.useCallback(b=>{N(b),C==null||C(b,g.LABEL)},[C]);return c.useEffect(()=>{typeof E=="function"?E(A.current):E&&(E.current=A.current)},[E]),c.useEffect(()=>{h.current=L},[L]),c.useEffect(()=>{D(0)},[r]),c.useEffect(()=>{const b=y=>{r.length!==0&&(y.key==="ArrowDown"?(y.preventDefault(),D(R=>R<r.length-1?R+1:R)):y.key==="ArrowUp"?(y.preventDefault(),D(R=>R>0?R-1:R)):y.key==="Enter"&&(y.preventDefault(),setTimeout(()=>{const R=h.current;R>=0&&r[R]&&x(r[R])},0)))};return document.addEventListener("keydown",b),()=>{document.removeEventListener("keydown",b)}},[r,x]),u.jsx("div",{ref:A,className:"cosmic-ai-input-selectFloatElement",id:p,style:{position:"absolute",top:(l==null?void 0:l.top)||0,left:(l==null?void 0:l.left)||0,zIndex:5e3,maxHeight:`${k}px`},children:r.length>0&&r.map((b,y)=>u.jsx("div",{className:`selectOption ${$===b?"selected":""} ${L===y?"highlighted":""}`,onClick:()=>x(b),onMouseEnter:()=>D(y),children:b},y))})});ke.displayName="Mention";const Pe=c.forwardRef((r,o)=>{const{value:l="",varList:p,placeholder:k="",maxLength:C,defaultRows:E=3,disabled:$=!1,defaultFocus:N=!1,textIndex:L=0,mentions:D=[],onFocus:A,onBlur:h,onChange:x,onClick:b,onSend:y,onKeyDown:R,onKeyUp:q,onMaxLengthExceeded:Z}=r,[at,dt]=c.useState(l||""),[I,Y]=c.useState(""),[ut,de]=c.useState(""),[_,B]=c.useState(!1),[U,v]=c.useState({top:0,left:0}),[ee,te]=c.useState([]),[W,ue]=c.useState(""),[w,ne]=c.useState(null),[se,z]=c.useState(120),[fe,pe]=c.useState(N),he=240,ge=240,Ee=240,ye=276,m=c.useRef(null),S=c.useRef(null),j=c.useRef(null),re=c.useRef(!1),V=()=>{var s,e;let n=((e=(s=m.current)==null?void 0:s.innerText)==null?void 0:e.replace(/\u200B/g,""))||"";return n===`
+`&&(n=""),n},xe=()=>{var s;let n=((s=m.current)==null?void 0:s.innerHTML)||"";return n==="<br>"&&(n=""),n},$e=n=>{const s=[];let e=0;const i=/\[([^\]]+)\]/g;let a;const d=Se();let f=0;if(n===""||!n||n===`
+`)return[{type:"text",content:"​",id:`text-${f++}-${d}`}];const P=new Set((p||[]).map(T=>T.name));for(;(a=i.exec(n))!==null;){if(a.index>e){const M=n.substring(e,a.index).split(`
+`);M.forEach((J,et)=>{J&&s.push({type:"text",content:J,id:`text-${f++}-${d}`}),et<M.length-1&&s.push({type:"newline",id:`newline-${f++}-${d}`})})}const T=a[1];if(P.has(T)){const t=p.find(M=>M.name===T);(t==null?void 0:t.type)==="input"?s.push({type:"input",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",placeholder:(t==null?void 0:t.placeholder)||T,id:`input-${f++}-${d}`}):(t==null?void 0:t.type)==="label"?s.push({type:"label",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",id:`label-${f++}-${d}`}):(t==null?void 0:t.type)==="select"?s.push({type:"select",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",placeholder:(t==null?void 0:t.placeholder)||T,options:(t==null?void 0:t.options)||[],id:`select-${f++}-${d}`}):(t==null?void 0:t.type)==="multiple-select"?s.push({type:"multiple-select",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",placeholder:(t==null?void 0:t.placeholder)||T,options:(t==null?void 0:t.options)||[],id:`multiple-select-${f++}-${d}`}):(t==null?void 0:t.type)==="date-picker"&&s.push({type:"date-picker",name:t==null?void 0:t.name,content:(t==null?void 0:t.content)||"",placeholder:(t==null?void 0:t.placeholder)||T,id:`date-picker-${f++}-${d}`})}else s.push({type:"text",content:`[${T}]`,id:`text-${f++}-${d}`});e=i.lastIndex}if(e<n.length){const t=n.substring(e).split(`
+`);t.forEach((M,J)=>{M&&s.push({type:"text",content:M,id:`text-${f++}`}),J<t.length-1&&s.push({type:"newline",id:`newline-${f++}`})})}return s},ie=()=>{var n;(n=m.current)==null||n.setAttribute("contenteditable","true"),S.current&&(O(S.current)&&S.current.children[0].setAttribute("contenteditable","false"),S.current=null),F(m.current)},je=n=>{b==null||b(n)},Me=n=>{ie()},K=n=>{Y(V()),de(xe()),x==null||x(V()),Qe(n)},Be=n=>{var s;if(!re.current&&n.code==="Enter"&&!n.shiftKey){n.preventDefault();const e=V();if(e.length===0||(s=m.current)!=null&&s.innerHTML.match(/^<span>[\s\u200B]*(<br\s*\/?>[\s\u200B]*)+<\/span>$/))return;C?e.length<=C?y==null||y(e):Z==null||Z(e,C):y==null||y(e)}},He=n=>{var e;if(_&&(w==null?void 0:w.type)===g.LABEL&&(n.code==="ArrowUp"||n.code==="ArrowDown"||n.code==="Enter")){n.preventDefault();return}B(!1),R==null||R(n);const s=st();if(s&&ot(s)){if(n.code==="ArrowLeft"){const i=s==null?void 0:s.previousElementSibling,a=ae(s);i&&a===0&&O(i)&&i.children[0]&&(S.current=i,H(i),requestAnimationFrame(()=>{F(i.children[0])}))}if(n.code==="ArrowRight"){const i=s==null?void 0:s.nextElementSibling,a=ae(s);i&&a===((e=s.textContent)==null?void 0:e.length)&&O(i)&&i.children[0]&&(S.current=i,H(i),requestAnimationFrame(()=>{Q(i.children[0])}))}n.code==="Backspace"&&(s.innerHTML==="​"&&n.preventDefault(),s.innerHTML==="<br>"&&(n.preventDefault(),s.innerHTML="​"))}if(s&&s.getAttribute("data-set-type")==="container"){if(n.code==="ArrowLeft"){const i=lt();O(i)&&i.children[0]&&(S.current=i,H(i),requestAnimationFrame(()=>{F(i.children[0])}))}if(n.code==="ArrowRight"){const i=ct();O(i)&&i.children[0]&&(S.current=i,H(i),requestAnimationFrame(()=>{Q(i.children[0])}))}}Be(n)},Fe=n=>{if(_&&(w==null?void 0:w.type)===g.LABEL&&(n.code==="ArrowUp"||n.code==="ArrowDown"||n.code==="Enter")){n.preventDefault();return}q==null||q(n)},Oe=n=>{n.preventDefault();const e=window.getSelection().toString();if(!e)return;const i=e,a=e;n.clipboardData.setData("text/plain",i),n.clipboardData.setData("text/html",a)},qe=n=>{A==null||A(n)},Ve=()=>{re.current=!0},_e=()=>{re.current=!1},ve=(n,s)=>{s.stopPropagation()},Ke=(n,s)=>{var i;s.stopPropagation(),S.current&&me(S.current),(i=m.current)==null||i.setAttribute("contenteditable","false");const e=document.getElementById(n.id);S.current=e,requestAnimationFrame(()=>{H(e)})},Ue=(n,s)=>{var a,d,f,P,T;R==null||R(s),s.stopPropagation();const e=s.target,i=ae(e);if(s.code==="Backspace"&&i===0){const t=(a=e.parentElement)==null?void 0:a.previousElementSibling;t&&(O(t)&&t.children[0]&&((d=t.children[0].textContent)!=null&&d.length)?(S.current=t,H(t),F(t.children[0]),requestAnimationFrame(()=>{oe(t.children[0])})):(ie(),F(t)))}if(s.code==="ArrowRight"&&i===((f=e.textContent)==null?void 0:f.length)){const t=(P=e.parentElement)==null?void 0:P.nextElementSibling;t&&(O(t)&&t.children[0]&&((T=t.children[0].textContent)!=null&&T.length)?(S.current=t,H(t),Q(t.children[0]),requestAnimationFrame(()=>{oe(t.children[0])})):(ie(),Q(t)))}s.code==="Enter"&&s.shiftKey&&s.preventDefault()},We=(n,s)=>{q==null||q(s);const e=s.target;oe(e)},ze=(n,s)=>{var i;s.stopPropagation(),S.current&&me(S.current),(i=m.current)==null||i.setAttribute("contenteditable","false");const e=document.getElementById(n.id);S.current=e,requestAnimationFrame(()=>{H(e)})},Xe=(n,s)=>{Y(V()),de(xe()),x==null||x(V())},Ge=(n,s)=>{};c.useEffect(()=>{if(!_)return;const n=i=>{j.current&&!j.current.contains(i.target)&&B(!1)},s=i=>{j.current&&!j.current.contains(i.target)&&B(!1)},e=()=>{B(!1)};return document.addEventListener("mousedown",n),document.addEventListener("scroll",s,!0),window.addEventListener("resize",e),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("scroll",s,!0),window.removeEventListener("resize",e)}},[_]);const X=(n,s)=>{if(w&&s!==g.LABEL&&nt(w.id,n),s===g.SELECT&&(B(!1),K({})),s===g.LABEL&&(ce(),B(!1),requestAnimationFrame(()=>{const e=window.getSelection();e&&G.current&&(e.removeAllRanges(),e.addRange(G.current),setTimeout(()=>{var f;const i=document.createElement("span");i.contentEditable="false",i.setAttribute("data-set-type","label"),i.id=w.id;const a=document.createElement("span");a.contentEditable="false",a.textContent=n,i.appendChild(a);const d=(f=m.current)==null?void 0:f.children;if((d==null?void 0:d.length)===1&&d[0].tagName==="SPAN"&&d[0].innerHTML==="​[")m.current.innerHTML="",m.current.appendChild(i),setTimeout(()=>{K({}),ce()},0);else{document.execCommand("delete",!1,void 0);const P=G.current;P.insertNode(i),P.setStartAfter(i),P.setEndAfter(i),e.removeAllRanges(),e.addRange(P),setTimeout(()=>{K({})},0)}},0))})),s===g.MULTIPLE_SELECT||s===g.DATE_PICKER){const e=document.getElementById(w.id);e&&e.children[0]&&e.children[1]&&(n.length>0?(e.children[0].setAttribute("style","display: inline"),e.children[0].setAttribute("contenteditable","false"),e.children[1].setAttribute("style","display: none"),e.children[1].setAttribute("contenteditable","true")):(e.children[0].setAttribute("style","display: none"),e.children[0].setAttribute("contenteditable","true"),e.children[1].setAttribute("style","display: inline"),e.children[1].setAttribute("contenteditable","true"))),K({})}},G=c.useRef(null),Je=(D==null?void 0:D.map(n=>n.prefix))||[],Qe=n=>{const s=n==null?void 0:n.nativeEvent,e=s==null?void 0:s.data;Je.includes(e)&&it().then(i=>{var d;const a=window.getSelection();a&&a.rangeCount>0&&(G.current=a.getRangeAt(0)),Ze({options:((d=D.find(f=>f.prefix===e))==null?void 0:d.options)||[],value:"",type:g.LABEL,id:"label-"+Se()},i)})},Ze=(n,s)=>{te(n.options),v({top:-999999,left:-999999999}),ne(n),z(ge),B(!0),requestAnimationFrame(()=>{if(j.current){const e=j.current.getBoundingClientRect();let i=s.left,a=s.top+s.height;window.innerWidth-s.right<he&&s.width<e.width&&(i=s.right-e.width),s.top<e.height&&(a=s.top+s.height),v({top:a,left:i}),z(e.height)}})},be=(n,s)=>{const i=s.target.getBoundingClientRect();te(n.options),ue(n.value||Le(n.id)),v({top:-999999,left:-999999999}),ne(n),z(ge),B(!0),requestAnimationFrame(()=>{if(j.current){const a=j.current.getBoundingClientRect();let d=i.left,f=i.top+i.height;window.innerWidth-i.right<he&&i.width<a.width&&(d=i.right-a.width),i.top<a.height&&(f=i.top+i.height),v({top:f,left:d}),z(a.height)}})},Ie=(n,s)=>{const i=s.target.getBoundingClientRect();let a=i.left,d=i.top-ye;window.innerWidth-i.right<Ee&&(a=a-Ee+i.width),i.top<ye&&(d=i.top+i.height),te(n.options),ue(n.value||Le(n.id)),v({top:d,left:a}),ne(n),B(!0)},[Ye,we]=c.useState([]),[le,Ce]=c.useState(!0),Ae=c.useCallback(()=>{Ce(!1);const n=$e(l),s=[];return n.forEach(e=>{var i,a,d,f,P,T;if(e.type==="text")s.push(u.jsx("span",{onKeyDown:t=>Ge(),children:e.content},e.id));else if(e.type==="newline")s.push(u.jsx("br",{},e.id));else if(e.type==="label")s.push(u.jsx("span",{id:e.id,"data-set-type":"label",contentEditable:!1,children:u.jsx("span",{contentEditable:!1,children:e.name})},e.id));else if(e.type==="input")s.push(u.jsxs("span",{id:e.id,"data-set-type":"input",contentEditable:!1,suppressContentEditableWarning:!0,onInput:t=>Xe(),onClick:t=>ve(e,t),onMouseDown:t=>Ke(e,t),"data-cosmic-ai-input-placeholder":e.placeholder,children:[u.jsx("span",{className:"cosmic-ai-input-inputContent",style:{padding:(i=e.content)!=null&&i.length?"2px 4px":"2px 0 2px 4px"},contentEditable:!1,onKeyDown:t=>Ue(e,t),onKeyUp:t=>We(e,t),children:e.content}),u.jsx("span",{contentEditable:!1,style:{display:(a=e.content)!=null&&a.length?"none":"inline"},className:"cosmic-ai-input-placeholder",onMouseDown:t=>ze(e,t),children:e.placeholder})]},e.id));else if(e.type===g.SELECT){const t=e.content||((d=e.options)==null?void 0:d[0])||e.placeholder;s.push(u.jsx("span",{id:e.id,"data-set-type":"select",contentEditable:!1,suppressContentEditableWarning:!0,onClick:M=>be(e,M),"data-cosmic-ai-input-placeholder":e.placeholder,children:u.jsx("span",{contentEditable:!1,children:t})},e.id))}else if(e.type===g.MULTIPLE_SELECT){const t=e.content||((f=e.options)==null?void 0:f[0]);s.push(u.jsxs("span",{id:e.id,"data-set-type":"multiple-select",contentEditable:!1,suppressContentEditableWarning:!0,onClick:M=>be(e,M),"data-cosmic-ai-input-placeholder":e.placeholder,children:[u.jsx("span",{style:{display:t!=null&&t.length?"inline":"none"},contentEditable:!1,children:t}),u.jsx("span",{style:{display:t!=null&&t.length?"none":"inline"},className:"cosmic-ai-input-selectPlaceholder",contentEditable:!1,children:e.placeholder})]},e.id))}else e.type===g.DATE_PICKER&&s.push(u.jsxs("span",{id:e.id,"data-set-type":"date-picker",contentEditable:!1,suppressContentEditableWarning:!0,onClick:t=>Ie(e,t),"data-cosmic-ai-input-placeholder":e.placeholder,children:[u.jsx("span",{style:{display:(P=e.content)!=null&&P.length?"inline":"none"},contentEditable:!1,children:e.content}),u.jsx("span",{style:{display:(T=e.content)!=null&&T.length?"none":"inline"},className:"cosmic-ai-input-datePickerPlaceholder",contentEditable:!1,children:e.placeholder})]},e.id))}),setTimeout(()=>{Ce(!0)},0),s},[l]);c.useEffect(()=>{le&&setTimeout(()=>{F(m.current)},0)},[le]),c.useEffect(()=>{l!==I?(we(Ae()),Y(l),pe(!0)):(l===""||!l)&&we(Ae())},[l,I]),c.useEffect(()=>{if(!N&&!fe)return;const n=new MutationObserver(()=>{m.current&&document.contains(m.current)&&(requestAnimationFrame(()=>{F(m.current),pe(!1)}),n.disconnect())});return m.current&&n.observe(document.body,{childList:!0,subtree:!0}),()=>n.disconnect()},[N,fe]);const ce=()=>{m.current&&requestAnimationFrame(()=>{F(m.current)})};return c.useImperativeHandle(o,()=>({getCurrentValue:V,focus:ce})),u.jsxs("div",{className:Re(`cosmic-ai-input-rows${E}`),style:{textIndent:L+"px"},children:[le&&u.jsx("div",{"data-set-type":"container","data-cosmic-ai-input-placeholder":k,className:Re("cosmic-ai-input",`cosmic-ai-input-rows${E}`,{"is-disabled":$},{"is-empty":I.length===0}),ref:m,contentEditable:!0,suppressContentEditableWarning:!0,onClick:n=>je(n),onFocus:n=>{qe(n)},onBlur:n=>{h==null||h(n)},onMouseDown:n=>Me(),onKeyDown:n=>He(n),onKeyUp:n=>Fe(n),onInput:n=>K(n),onCopy:n=>Oe(n),onCompositionStart:Ve,onCompositionEnd:_e,children:Ye}),_&&tt.createPortal((w==null?void 0:w.type)===g.MULTIPLE_SELECT?u.jsx(De,{ref:j,options:ee,value:W,position:U,height:se,onChange:X},g.MULTIPLE_SELECT):(w==null?void 0:w.type)===g.DATE_PICKER?u.jsx(Te,{ref:j,value:W,position:U,onChange:X},g.DATE_PICKER):(w==null?void 0:w.type)===g.LABEL?u.jsx(ke,{ref:j,options:ee,value:W,position:U,height:se,onChange:X},g.LABEL):u.jsx(Ne,{ref:j,options:ee,value:W,position:U,height:se,onChange:X},g.SELECT),document.body)]})});Pe.displayName="AiInput";exports.default=Pe;

package/dist/index.d.ts

@@ -5,13 +5,14 @@ export default AiInput;
 
 declare interface AiInputProps {
     value?: string;
-    varList: (InputItem | SelectItem | MultipleSelectItem | DatePickerItem)[];
+    varList: (InputItem | SelectItem | MultipleSelectItem | DatePickerItem | LabelItem)[];
     placeholder?: string;
     maxLength?: number;
     defaultRows?: number;
     disabled?: boolean;
     defaultFocus?: boolean;
-    onParse?: (parsedValue: string) => void;
+    textIndex?: number;
+    mentions?: MentionItem[];
     onSend?: (value: string) => void;
     onMaxLengthExceeded?: (value: string, maxLength: number) => void;
     onFocus?: (e: default_2.FocusEvent) => void;
@@ -28,25 +29,45 @@ export declare interface AiInputRef {
 }
 
 declare interface DatePickerItem {
-    type: "date-picker";
+    type: ITEM_TYPE.DATE_PICKER;
     name: string;
     content: string;
     placeholder: string;
 }
 
 declare interface InputItem {
-    type: "input";
+    type: ITEM_TYPE.INPUT;
     name: string;
     content: string;
     placeholder: string;
 }
 
+declare enum ITEM_TYPE {
+    INPUT = "input",
+    SELECT = "select",
+    MULTIPLE_SELECT = "multiple-select",
+    DATE_PICKER = "date-picker",
+    LABEL = "label"
+}
+
+declare interface LabelItem {
+    type: ITEM_TYPE.LABEL;
+    name: string;
+    content: string;
+}
+
+declare interface MentionItem {
+    prefix: string;
+    title?: string;
+    options: string[];
+}
+
 declare interface MultipleSelectItem extends Omit<SelectItem, "type"> {
-    type: "multiple-select";
+    type: ITEM_TYPE.MULTIPLE_SELECT;
 }
 
 declare interface SelectItem {
-    type: "select";
+    type: ITEM_TYPE.SELECT;
     name: string;
     content: string;
     placeholder: string;