@magicx-eng/ai-autocomplete-react 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -8
- package/dist/index.js +263 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +263 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -3
- package/dist/index.css +0 -2
- package/dist/index.css.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,264 @@
|
|
|
1
|
-
import{forwardRef as vt,useCallback as At,useEffect as Ct,useImperativeHandle as kt,useRef as ve,useState as wt}from"react";var D={};var be={};var Re={};var G={};import{jsx as st,jsxs as it}from"react/jsx-runtime";function _e({option:e,isHighlighted:n,onSelect:t,onHighlight:o,id:r}){let a=[G.item,n?G.highlighted:"",e.is_tappable?G.tappable:G.nonTappable].filter(Boolean).join(" ");return it("div",{id:r,role:"option","aria-selected":n,className:a,tabIndex:e.is_tappable?0:-1,onClick:()=>e.is_tappable&&t(e),onKeyDown:i=>{e.is_tappable&&(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),t(e))},onMouseEnter:o,children:[e.icon?`${e.icon} ${e.text}`:e.text,e.tag&&st("span",{className:G.tag,children:e.tag})]})}import{jsx as Te}from"react/jsx-runtime";function Ee({options:e,activeIndex:n,onSelect:t,onHighlight:o,listboxId:r}){return Te("div",{className:Re.grid,children:e.map((a,i)=>Te(_e,{option:a,isHighlighted:i===n,onSelect:t,onHighlight:()=>o(i),id:`${r}-option-${i}`},a.text))})}import{jsx as Me}from"react/jsx-runtime";function ye({suggestions:e,activeIndex:n,onSelect:t,onHighlight:o,isOpen:r,id:a,className:i}){let p=e[0],f=r&&p&&p.options.length>0;return Me("div",{id:a,role:"listbox",className:`${be.dropdown} ${f?be.visible:""} ${i??""}`,onMouseDown:g=>g.preventDefault(),children:p&&p.options.length>0&&Me(Ee,{options:p.options,activeIndex:n,onSelect:t,onHighlight:o,listboxId:a})})}var ne={};import{jsx as Ue}from"react/jsx-runtime";function lt(e){return e===0?.4:e===1?.3:.15}function Le({pills:e,activePillIndex:n,onSelectPill:t}){return Ue("span",{className:ne.list,children:e.map((o,r)=>Ue("button",{type:"button",className:`${ne.pill} ${r===n?ne.active:""}`,style:{opacity:lt(r)},onClick:()=>t(r),children:o.text},`${o.type}-${o.text}`))})}import{useCallback as Z,useMemo as se,useRef as E,useState as ie}from"react";function ae(e,n){let t=n.trimStart();if(!t)return e;let o=t.toLowerCase();return e.filter(r=>!r.is_tappable||r.text.toLowerCase().includes(o))}function ee(e,n){let t=n.trim();if(!t)return null;let o=t.toLowerCase();return e.find(r=>r.is_tappable&&r.text.toLowerCase()===o)??null}function Ne(e,n){let t=[],o=0;for(let a of n){let i=e.indexOf(a.text,o);i!==-1&&(i>o&&t.push({type:"text",value:e.slice(o,i)}),t.push({type:"completed",value:a.text,param:a}),o=i+a.text.length)}let r=e.slice(o);return r&&t.push({type:"text",value:r}),t}function De(e,n){let t=[],o=[],r=0;for(let a of n){let i=e.indexOf(a.text,r);i===-1?o.push(a):(t.push(a),r=i+a.text.length)}return{valid:t,invalid:o}}import{useCallback as ht,useEffect as je,useRef as J,useState as Se}from"react";var ut="0.1.8",pt="/ac/suggest",Fe=!1;function mt(e){let n=e?.apiKey||""||"";return!n&&!Fe&&(Fe=!0,console.warn("[AIAutocomplete] No API key set (MAGICX_AI_AUTOCOMPLETE_API_KEY). Requests will be sent without an Authorization header.")),n}function dt(e){return e?.authScheme?e.authScheme:""==="Basic"?"Basic":"Bearer"}function ft(){return crypto.randomUUID()}function gt(e,n){return{placeholder:e.placeholder,type:e.type,...n&&{text:e.text},kind:e.kind}}async function $e(e,n,t){let o=t?.apiConfig,r=mt(o),a=dt(o),i=!t?.maskCompletedText,p=n.find(c=>c.type==="contact"&&c.metadata?.contact_account_count)?.metadata?.contact_account_count,f=typeof p=="number"?p:void 0,g={data:{raw_query:e,completed_params:n.map(c=>gt(c,i)),...f!=null&&{contact_account_count:f}},meta:{request_id:ft(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:ut}},m={"Content-Type":"application/json","X-App-Identifier":"active-campaign-demo",...o?.headers};r&&(m.Authorization=a==="Basic"?`Basic ${btoa(r)}`:`Bearer ${r}`);let h=await fetch(o?.endpoint||pt,{method:"POST",headers:m,body:JSON.stringify(g),signal:t?.signal});if(!h.ok)throw new Error(`API error: ${h.status} ${h.statusText}`);return h.json()}function Y(e,n){let t=e,o={},r=[];for(let a of n){let i=(o[a.type]??0)+1;o[a.type]=i;let f=`{{${a.type.toUpperCase().replace(/\s+/g,"_")}_${i}}}`,g=t.indexOf(a.text);g!==-1&&(t=t.slice(0,g)+f+t.slice(g+a.text.length)),r.push({...a,placeholder:f})}return{rawQuery:t,completedParams:r}}function Ke(e,n){return n?e.map(t=>{let o=n[t.type];if(!o)return t;let r=o("");if(r.length===0)return t;let a=new Set(r.map(p=>p.text)),i=(t.options??[]).filter(p=>!a.has(p.text));return{...t,options:[...r,...i]}}):e}var bt=100,yt=300,St=2;function ze({textRef:e,suggestionsRef:n,filterBaseRef:t,maskCompletedTextRef:o,apiConfigRef:r,optionOverridesRef:a,onErrorRef:i,setCompletedParams:p,setSuggestions:f,setActiveDropdownIndex:g}){let[m,h]=Se(!1),[c,y]=Se(null),[k,b]=Se(!1),A=J(0),M=J(null),d=J(""),l=ht(async(s,u)=>{M.current?.abort();let x=new AbortController;M.current=x;let w=++A.current,O=e.current.length;n.current.some(C=>C.type!=="placeholder")||h(!0),y(null);try{let C=await $e(s,u,{maskCompletedText:o.current,signal:x.signal,apiConfig:r.current});if(w!==A.current)return;let L=Ke(C.data.suggestions??[],a.current);b(C.data.is_ready??!1),d.current=s;let z=C.data.input??[],_=z[z.length-1],T=e.current;if(_?.state==="in_progress"){let F=T.toLowerCase().lastIndexOf(_.text.toLowerCase());F!==-1?t.current=F:t.current=O}else t.current=O;let N=L.filter(F=>F.type!=="placeholder")[0];if(N){let F=T.slice(t.current),I=ee(N.options,F);I&&(p($=>[...$,{id:crypto.randomUUID(),placeholder:"",type:N.type,text:I.text,kind:I.kind,suggestionType:N.type,suggestionPlaceholder:N.text,options:N.options,metadata:I.metadata}]),L=L.filter($=>$!==N))}f(L),h(!1),g(-1)}catch(C){if(w===A.current){let L=C instanceof Error?C:new Error(String(C));y(L),h(!1),i.current?.(L)}}},[e,n,t,o,r,a,i,p,f,g]);return je(()=>(l("",[]),()=>{M.current?.abort()}),[l]),{doFetch:l,isLoading:m,error:c,isReady:k,lastRawQueryRef:d}}function qe({text:e,completedParams:n,doFetch:t,filterBaseRef:o,skipNextFetchRef:r,suggestionsRef:a,lastRawQueryRef:i}){let p=J(null),f=J(null),g=J(!0);je(()=>{p.current&&clearTimeout(p.current),f.current&&clearTimeout(f.current);let m=h=>{if(r.current)return r.current=!1,!1;if(!e&&n.length===0)return g.current?(t("",[]),!0):(g.current=!0,!1);let c=e.slice(o.current),b=a.current.filter(O=>O.type!=="placeholder")[0],M=(b?ae(b.options,c):[]).filter(O=>O.is_tappable),d=b?ee(b.options,c)!==null:!1,l=c.trim().length>0;if(M.length>0&&!d&&l)return!1;let{rawQuery:s,completedParams:u}=Y(e,n),x=s.length<i.current.length,w=Math.abs(s.length-i.current.length);return x||w>=h?(t(s,u),!0):!1};return p.current=setTimeout(()=>{m(St)&&f.current&&clearTimeout(f.current)},bt),f.current=setTimeout(()=>m(1),yt),()=>{p.current&&clearTimeout(p.current),f.current&&clearTimeout(f.current)}},[e,n,t,o,r,a,i])}import{useCallback as Be}from"react";function Qe({activeDropdownIndex:e,setActiveDropdownIndex:n,filteredOptions:t,selectOption:o,onSubmitRef:r,text:a,completedParams:i,isDropdownOpen:p,hasPlaceholder:f,placeholderText:g,suggestions:m,filterBaseRef:h,columns:c,setText:y,setCompletedParams:k,setSuggestions:b}){let A=Be(()=>{let d=t.map((s,u)=>s.is_tappable?u:-1).filter(s=>s!==-1),l=Array.from({length:c},()=>[]);for(let s of d)l[s%c].push(s);return l.flat()},[t,c]);return{handleKeyDown:Be(d=>{let l=A();switch(d.key){case"ArrowDown":{if(d.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s<l.length-1?s+1:0;n(l[u]);break}case"ArrowUp":{if(d.preventDefault(),l.length===0)return;let s=l.indexOf(e),u=s>0?s-1:l.length-1;n(l[u]);break}case"ArrowRight":{if(e<0)break;if(e%c<c-1){let u=e+1;u<t.length&&t[u]?.is_tappable&&(d.preventDefault(),n(u))}break}case"ArrowLeft":{if(e<0)break;if(e%c>0){let s=e-1;s>=0&&t[s]?.is_tappable&&(d.preventDefault(),n(s))}break}case"Enter":{if(d.preventDefault(),e>=0&&t[e]?.is_tappable)o(t[e]);else if(r.current){let{rawQuery:s,completedParams:u}=Y(a,i),x={query:a.trim(),raw_query:s,completed_params:u};r.current(x)}break}case"Tab":{if(e>=0&&t[e]?.is_tappable)d.preventDefault(),o(t[e]);else if(p){let s=t.find(u=>u.is_tappable);s&&(d.preventDefault(),o(s))}else if(!a&&f){d.preventDefault();let s=m.find(u=>u.type==="placeholder");s?(y(g),h.current=g.length,k(u=>[...u,{id:crypto.randomUUID(),placeholder:"",type:s.type,text:g,kind:null,suggestionType:s.type,suggestionPlaceholder:s.text,options:s.options}]),b(u=>u.filter(x=>x!==s))):(y(g),h.current=g.length)}break}case"Escape":n(-1);break}},[e,c,i,t,h,A,f,p,r,g,o,n,k,b,y,m,a]),getTappableIndices:A}}import{useCallback as xe}from"react";function He({completedParams:e,suggestions:n,setCompletedParams:t,setSuggestions:o,setActiveDropdownIndex:r,filterBaseRef:a,pillTappedRef:i}){let p=xe(m=>{let h=n.filter(b=>b.type!=="placeholder");if(m<0||m>=h.length)return;let c=h[m],y=h.filter((b,A)=>A!==m),k=n.filter(b=>b.type==="placeholder");o([...k,c,...y]),i.current=!0,r(-1)},[n,o,r,i]),f=xe(()=>{if(e.length===0)return;let m=e[e.length-1],h={type:m.suggestionType,text:m.suggestionPlaceholder,required:!0,options:m.options};t(c=>c.slice(0,-1)),o(c=>[h,...c]),r(-1)},[e,t,o,r]),g=xe(m=>{let h={type:m.suggestionType,text:m.suggestionPlaceholder,required:!0,options:m.options};return{apply:c=>{c(y=>{let k=0;for(let b of e){let A=y.indexOf(b.text,k);if(A!==-1){if(b.id===m.id){let M=y.slice(0,A),d=y.slice(A+m.text.length),l=(M+d).replace(/ {2,}/g," ");return a.current=Math.min(a.current,l.length),l}k=A+b.text.length}}return y}),t(y=>y.filter(k=>k.id!==m.id)),o(y=>[h,...y]),r(-1),i.current=!0}}},[e,t,o,r,a,i]);return{setActivePill:p,removeLastParam:f,reEditParam:g}}var xt=0;function Pt(){let e=E(null);return e.current===null&&(e.current=`:ac-${++xt}:`),e.current}function Pe({onSubmit:e,onError:n,optionOverrides:t,maskCompletedText:o,placeholder:r,apiConfig:a,columns:i=2,eagerSuggestions:p=!0,value:f,completedParams:g,onChange:m,onParamsChange:h}){let c=f!==void 0,y=g!==void 0,[k,b]=ie(""),[A,M]=ie([]),[d,l]=ie([]),[s,u]=ie(-1),x=c?f:k,w=y?g:A,O=E(e);O.current=e;let B=E(m);B.current=m;let C=E(h);C.current=h;let L=E(f);L.current=f;let z=E(g);z.current=g;let _=Z(S=>{if(typeof S=="function")if(c){let v=S(L.current??"");B.current?.(v)}else b(v=>{let q=S(v);return B.current?.(q),q});else c||b(S),B.current?.(S)},[c]),T=Z(S=>{if(typeof S=="function")if(y){let v=S(z.current??[]);C.current?.(v)}else M(v=>{let q=S(v);return C.current?.(q),q});else y||M(S),C.current?.(S)},[y]),X=E(n);X.current=n;let N=E(t);N.current=t;let F=E(o);F.current=o;let I=E(a);I.current=a;let $=E(x);$.current=x;let ce=E(d);ce.current=d;let K=E(0),te=E(!1),Ae=E(!1),le=Pt(),{doFetch:ue,isLoading:Ce,error:Ve,isReady:Xe,lastRawQueryRef:pe}=ze({textRef:$,suggestionsRef:ce,filterBaseRef:K,maskCompletedTextRef:F,apiConfigRef:I,optionOverridesRef:N,onErrorRef:X,setCompletedParams:T,setSuggestions:l,setActiveDropdownIndex:u});qe({text:x,completedParams:w,doFetch:ue,filterBaseRef:K,skipNextFetchRef:Ae,suggestionsRef:ce,lastRawQueryRef:pe});let We=se(()=>Ne(x,w),[x,w]);K.current=Math.min(K.current,x.length);let me=x.slice(K.current),de=se(()=>d.filter(v=>v.type==="placeholder").map(v=>v.text).join(" ")||r||"",[d,r]),oe=se(()=>d.filter(S=>S.type!=="placeholder"),[d]),P=oe[0],ke=P?t?.[P.type]:void 0,we=P?ke?ke(me.trim()):P.options??[]:[],fe=se(()=>ae(we,me),[we,me]),Oe=de.length>0,ge=!Ce&&fe.length>0&&(!!x||te.current||!Oe),Ie=Z(S=>{if(!P)return;let v={id:crypto.randomUUID(),placeholder:"",type:P.type,text:S.text,kind:S.kind,suggestionType:P.type,suggestionPlaceholder:P.text,options:P.options,metadata:S.metadata},q=K.current,U=$.current.slice(0,q);if(U.length>0&&!U.endsWith(" ")){let R=U.split(/\s+/).pop()??"";R&&S.text.toLowerCase().startsWith(R.toLowerCase())&&(U=U.slice(0,U.length-R.length))}let he=U.length>0&&U[U.length-1]!==" ",W=U+(he?" ":"")+S.text+" ";_(W),K.current=W.length,T(R=>[...R,v]),te.current=!1,u(-1);let Q=oe.length-1;p&&Q>0?(l(R=>R.filter(H=>H!==P)),Ae.current=!0):l(R=>R.filter(H=>H.type==="placeholder"))},[P,oe,p,_,T]),Ge=Z(S=>{let v=S.target.value,U=v.length>0&&!S.nativeEvent?.isComposing&&v[0]!==v[0].toUpperCase()?v[0].toUpperCase()+v.slice(1):v;_(U),te.current=!1,u(-1);let{valid:he,invalid:W}=De(U,w);if(W.length>0){T(()=>he);for(let Q of W)l(R=>[{type:Q.suggestionType,text:Q.suggestionPlaceholder,required:!0,options:Q.options},...R])}if(P&&W.length===0){let Q=U.slice(K.current),R=ee(P.options,Q);R&&(T(H=>[...H,{id:crypto.randomUUID(),placeholder:"",type:P.type,text:R.text,kind:R.kind,suggestionType:P.type,suggestionPlaceholder:P.text,options:P.options,metadata:R.metadata}]),l(H=>H.filter(tt=>tt!==P)))}},[w,P,_,T]),{handleKeyDown:Ye}=Qe({activeDropdownIndex:s,setActiveDropdownIndex:u,filteredOptions:fe,selectOption:Ie,onSubmitRef:O,text:x,completedParams:w,isDropdownOpen:ge,hasPlaceholder:Oe,placeholderText:de,suggestions:d,filterBaseRef:K,columns:i,setText:_,setCompletedParams:T,setSuggestions:l}),re=He({completedParams:w,suggestions:d,setCompletedParams:T,setSuggestions:l,setActiveDropdownIndex:u,filterBaseRef:K,pillTappedRef:te}),Je=Z(S=>{re.reEditParam(S).apply(_)},[re,_]),Ze=Z(()=>{_(""),T(()=>[]),l([]),u(-1),K.current=0,pe.current="",ue("",[])},[ue,_,T,pe]),et=s>=0?`${le}-option-${s}`:void 0;return{completedParams:w,suggestionPills:oe,setActivePill:re.setActivePill,removeLastParam:re.removeLastParam,reEditParam:Je,segments:We,suggestions:d,activeIndex:s,isReady:Xe,isLoading:Ce,error:Ve,inputProps:{value:x,placeholder:de||void 0,onChange:Ge,onKeyDown:Ye,role:"combobox","aria-expanded":ge,"aria-activedescendant":et,"aria-autocomplete":"list","aria-controls":le},reset:Ze,dropdownProps:{suggestions:P?[{...P,options:fe}]:[],activeIndex:s,onSelect:Ie,onHighlight:u,isOpen:ge,id:le}}}import{jsx as j,jsxs as V}from"react/jsx-runtime";var Ot=vt(function({onSubmit:n,onError:t,optionOverrides:o,maskCompletedText:r,placeholder:a,className:i,apiConfig:p,columns:f,eagerSuggestions:g,value:m,completedParams:h,onChange:c,onParamsChange:y},k){let b=ve(null),[A,M]=wt(!1),d=ve(()=>{}),l=ve(void 0);Ct(()=>(b.current?.focus(),()=>clearTimeout(l.current)),[]);let{completedParams:s,suggestionPills:u,setActivePill:x,segments:w,inputProps:O,dropdownProps:B,reset:C}=Pe({onSubmit:I=>d.current(I),onError:t,optionOverrides:o,maskCompletedText:r,placeholder:a,apiConfig:p,columns:f,eagerSuggestions:g,value:m,completedParams:h,onChange:c,onParamsChange:y});kt(k,()=>({focus:()=>b.current?.focus(),reset:C}),[C]);let L=()=>{b.current?.focus()},z=!!O.value||s.length>0,_=At(()=>{if(!z)return;let{rawQuery:I,completedParams:$}=Y(O.value,s);n({query:O.value.trim(),raw_query:I,completed_params:$}),C(),M(!0),clearTimeout(l.current),l.current=setTimeout(()=>M(!1),3e3)},[z,O.value,s,n,C]);d.current=_;let{onChange:T,placeholder:X,...N}=O,F=!O.value;return V("div",{className:`${D.container} ${i??""}`,children:[j("div",{className:`${D.checkmark} ${A?D.checkmarkVisible:""}`,children:V("svg",{width:"72",height:"72",viewBox:"0 0 24 24",fill:"none",role:"img","aria-label":"Success",children:[j("circle",{cx:"12",cy:"12",r:"12",fill:"#34C759"}),j("path",{d:"M7 12.5l3.5 3.5L17 9",stroke:"#000",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:D.checkmarkPath})]})}),j(ye,{...B}),V("div",{className:D.inputWrapper,onClick:L,children:[V("div",{className:D.editorArea,children:[V("div",{className:D.sizerContent,"aria-hidden":"true",children:[F&&X?V("span",{className:D.placeholderText,children:[X," "]}):V("span",{className:D.sizerText,children:[w.map((I,$)=>j("span",{children:I.value},`${$}-${I.type}`)),w.length===0&&"\xA0"]})," ",j(Le,{pills:u,activePillIndex:0,onSelectPill:x})]}),j("textarea",{ref:b,className:D.textarea,rows:1,onChange:T,...N})]}),j("button",{type:"button",className:D.submitButton,disabled:!z,onClick:I=>{I.stopPropagation(),_()},"aria-label":"Submit",children:j("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:j("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})});export{Ot as AIAutocomplete,ye as AIAutocompleteDropdown,Pe as useAIAutocomplete};
|
|
1
|
+
import{forwardRef as bt,useCallback as yt,useEffect as At,useImperativeHandle as _t,useRef as xe,useState as St}from"react";if(typeof document<"u"){let e=document.createElement("style");e.textContent=`.AIAutocomplete-module_container_KKjFU {
|
|
2
|
+
position: relative;
|
|
3
|
+
font-family: "IBM Plex Sans", sans-serif;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.AIAutocomplete-module_checkmark_CVE0Z {
|
|
7
|
+
position: absolute;
|
|
8
|
+
bottom: -130px;
|
|
9
|
+
left: 50%;
|
|
10
|
+
transform: translateX(-50%) translateY(8px) scale(0.8);
|
|
11
|
+
opacity: 0;
|
|
12
|
+
pointer-events: none;
|
|
13
|
+
z-index: 10;
|
|
14
|
+
animation: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.AIAutocomplete-module_checkmarkVisible_DWYbI {
|
|
18
|
+
animation: AIAutocomplete-module_checkmarkFadeInOut_U1Oof 3s ease forwards;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes AIAutocomplete-module_checkmarkFadeInOut_U1Oof {
|
|
22
|
+
0% {
|
|
23
|
+
opacity: 0;
|
|
24
|
+
transform: translateX(-50%) translateY(8px) scale(0.8);
|
|
25
|
+
}
|
|
26
|
+
10% {
|
|
27
|
+
opacity: 1;
|
|
28
|
+
transform: translateX(-50%) translateY(0) scale(1);
|
|
29
|
+
}
|
|
30
|
+
80% {
|
|
31
|
+
opacity: 1;
|
|
32
|
+
transform: translateX(-50%) translateY(0) scale(1);
|
|
33
|
+
}
|
|
34
|
+
100% {
|
|
35
|
+
opacity: 0;
|
|
36
|
+
transform: translateX(-50%) translateY(-8px) scale(0.8);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.AIAutocomplete-module_checkmarkPath_BJRUs {
|
|
41
|
+
stroke-dasharray: 30;
|
|
42
|
+
stroke-dashoffset: 30;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.AIAutocomplete-module_checkmarkVisible_DWYbI .AIAutocomplete-module_checkmarkPath_BJRUs {
|
|
46
|
+
animation: AIAutocomplete-module_drawCheck_je-B3 0.4s ease forwards 0.1s;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@keyframes AIAutocomplete-module_drawCheck_je-B3 {
|
|
50
|
+
to {
|
|
51
|
+
stroke-dashoffset: 0;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.AIAutocomplete-module_inputWrapper_FLq1b {
|
|
56
|
+
min-height: 60px;
|
|
57
|
+
padding: 24px;
|
|
58
|
+
border: 1px solid var(--ac-color-border-default, #9ea5b2);
|
|
59
|
+
border-radius: 23px;
|
|
60
|
+
background: transparent;
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
gap: 12px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.AIAutocomplete-module_editorArea_7rBWq {
|
|
68
|
+
position: relative;
|
|
69
|
+
flex: 1;
|
|
70
|
+
min-width: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.AIAutocomplete-module_sizerContent_DQgmV {
|
|
74
|
+
position: relative;
|
|
75
|
+
z-index: 1;
|
|
76
|
+
pointer-events: none;
|
|
77
|
+
min-height: 60px;
|
|
78
|
+
white-space: pre-wrap;
|
|
79
|
+
word-break: break-word;
|
|
80
|
+
font-family: inherit;
|
|
81
|
+
font-size: 21px;
|
|
82
|
+
line-height: 38px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.AIAutocomplete-module_sizerText_iZIMK {
|
|
86
|
+
color: transparent;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.AIAutocomplete-module_placeholderText_K3ayy {
|
|
90
|
+
color: var(--ac-color-text-muted, #c1c4cb);
|
|
91
|
+
opacity: 0.7;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.AIAutocomplete-module_textarea_eyn6A {
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 0;
|
|
97
|
+
left: 0;
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 100%;
|
|
100
|
+
padding: 0;
|
|
101
|
+
border: none;
|
|
102
|
+
background: transparent;
|
|
103
|
+
color: var(--ac-color-text-default, #fff);
|
|
104
|
+
caret-color: var(--ac-color-text-default, #fff);
|
|
105
|
+
font-family: inherit;
|
|
106
|
+
font-size: 21px;
|
|
107
|
+
line-height: 38px;
|
|
108
|
+
white-space: pre-wrap;
|
|
109
|
+
word-break: break-word;
|
|
110
|
+
outline: none;
|
|
111
|
+
resize: none;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.AIAutocomplete-module_textarea_eyn6A::placeholder {
|
|
116
|
+
color: var(--ac-color-text-muted, #c1c4cb);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.AIAutocomplete-module_submitButton_sl1Mi {
|
|
120
|
+
flex-shrink: 0;
|
|
121
|
+
width: 36px;
|
|
122
|
+
height: 36px;
|
|
123
|
+
border-radius: 50%;
|
|
124
|
+
border: none;
|
|
125
|
+
background: var(--ac-color-text-default, #fff);
|
|
126
|
+
color: var(--ac-color-bg-default, #000);
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: center;
|
|
131
|
+
padding: 0;
|
|
132
|
+
transition: opacity 0.2s ease;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.AIAutocomplete-module_submitButton_sl1Mi:hover {
|
|
136
|
+
opacity: 0.85;
|
|
137
|
+
}
|
|
138
|
+
`,document.head.appendChild(e)}var K={container:"AIAutocomplete-module_container_KKjFU",checkmark:"AIAutocomplete-module_checkmark_CVE0Z",checkmarkVisible:"AIAutocomplete-module_checkmarkVisible_DWYbI",checkmarkFadeInOut:"AIAutocomplete-module_checkmarkFadeInOut_U1Oof",checkmarkPath:"AIAutocomplete-module_checkmarkPath_BJRUs",drawCheck:"AIAutocomplete-module_drawCheck_je-B3",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",sizerContent:"AIAutocomplete-module_sizerContent_DQgmV",sizerText:"AIAutocomplete-module_sizerText_iZIMK",placeholderText:"AIAutocomplete-module_placeholderText_K3ayy",textarea:"AIAutocomplete-module_textarea_eyn6A",submitButton:"AIAutocomplete-module_submitButton_sl1Mi"};if(typeof document<"u"){let e=document.createElement("style");e.textContent=`.AIAutocompleteDropdown-module_dropdown_yz2KC {
|
|
139
|
+
position: absolute;
|
|
140
|
+
left: 0;
|
|
141
|
+
right: 0;
|
|
142
|
+
top: 100%;
|
|
143
|
+
margin-top: 6px;
|
|
144
|
+
background: var(--ac-color-background-default, #00002d);
|
|
145
|
+
border-radius: 23px;
|
|
146
|
+
overflow: hidden;
|
|
147
|
+
z-index: 10;
|
|
148
|
+
opacity: 0;
|
|
149
|
+
pointer-events: none;
|
|
150
|
+
transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.AIAutocompleteDropdown-module_visible_QCoXj {
|
|
154
|
+
opacity: 1;
|
|
155
|
+
pointer-events: auto;
|
|
156
|
+
}
|
|
157
|
+
`,document.head.appendChild(e)}var be={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj"};if(typeof document<"u"){let e=document.createElement("style");e.textContent=`.SuggestionGrid-module_grid_jvaPb {
|
|
158
|
+
display: grid;
|
|
159
|
+
grid-template-columns: 1fr 1fr;
|
|
160
|
+
gap: 12px 18px;
|
|
161
|
+
padding: 18px 24px;
|
|
162
|
+
max-height: 192px;
|
|
163
|
+
overflow-y: auto;
|
|
164
|
+
scrollbar-width: thin;
|
|
165
|
+
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar {
|
|
169
|
+
width: 6px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-track {
|
|
173
|
+
background: transparent;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-thumb {
|
|
177
|
+
background: rgba(255, 255, 255, 0.3);
|
|
178
|
+
border-radius: 3px;
|
|
179
|
+
}
|
|
180
|
+
`,document.head.appendChild(e)}var Oe={grid:"SuggestionGrid-module_grid_jvaPb"};if(typeof document<"u"){let e=document.createElement("style");e.textContent=`.SuggestionItem-module_item_d4vpD {
|
|
181
|
+
display: flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
font-family: "IBM Plex Sans", sans-serif;
|
|
184
|
+
font-size: 21px;
|
|
185
|
+
line-height: 30px;
|
|
186
|
+
color: var(--ac-color-text-muted, #c1c4cb);
|
|
187
|
+
white-space: nowrap;
|
|
188
|
+
opacity: 0.35;
|
|
189
|
+
animation: SuggestionItem-module_fadeIn_I8u35 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@keyframes SuggestionItem-module_fadeIn_I8u35 {
|
|
193
|
+
from {
|
|
194
|
+
opacity: 0;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.SuggestionItem-module_tappable_70KcX {
|
|
199
|
+
cursor: pointer;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.SuggestionItem-module_tappable_70KcX:hover {
|
|
203
|
+
color: var(--ac-color-text-default, #fff);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.SuggestionItem-module_nonTappable_xSZM- {
|
|
207
|
+
cursor: default;
|
|
208
|
+
opacity: 0.3;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.SuggestionItem-module_highlighted_Hb0SU {
|
|
212
|
+
color: var(--ac-color-text-default, #fff);
|
|
213
|
+
opacity: 0.5;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.SuggestionItem-module_tag_e3Fwe {
|
|
217
|
+
font-size: 13px;
|
|
218
|
+
margin-left: 6px;
|
|
219
|
+
opacity: 0.5;
|
|
220
|
+
}
|
|
221
|
+
`,document.head.appendChild(e)}var G={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe"};import{jsx as ot,jsxs as nt}from"react/jsx-runtime";function Re({option:e,isHighlighted:r,onSelect:t,onHighlight:o,id:n}){let i=[G.item,r?G.highlighted:"",e.is_tappable?G.tappable:G.nonTappable].filter(Boolean).join(" ");return nt("div",{id:n,role:"option","aria-selected":r,className:i,tabIndex:e.is_tappable?0:-1,onClick:()=>e.is_tappable&&t(e),onKeyDown:s=>{e.is_tappable&&(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),t(e))},onMouseEnter:o,children:[e.icon?`${e.icon} ${e.text}`:e.text,e.tag&&ot("span",{className:G.tag,children:e.tag})]})}import{jsx as Te}from"react/jsx-runtime";function Ee({options:e,activeIndex:r,onSelect:t,onHighlight:o,listboxId:n}){return Te("div",{className:Oe.grid,children:e.map((i,s)=>Te(Re,{option:i,isHighlighted:s===r,onSelect:t,onHighlight:()=>o(s),id:`${n}-option-${s}`},i.text))})}import{jsx as Me}from"react/jsx-runtime";function ye({suggestions:e,activeIndex:r,onSelect:t,onHighlight:o,isOpen:n,id:i,className:s}){let p=e[0],g=n&&p&&p.options.length>0;return Me("div",{id:i,role:"listbox",className:`${be.dropdown} ${g?be.visible:""} ${s??""}`,onMouseDown:f=>f.preventDefault(),children:p&&p.options.length>0&&Me(Ee,{options:p.options,activeIndex:r,onSelect:t,onHighlight:o,listboxId:i})})}if(typeof document<"u"){let e=document.createElement("style");e.textContent=`.PillList-module_list_qvLqO {
|
|
222
|
+
position: relative;
|
|
223
|
+
z-index: 1;
|
|
224
|
+
pointer-events: auto;
|
|
225
|
+
display: inline-flex;
|
|
226
|
+
gap: 5px;
|
|
227
|
+
align-items: center;
|
|
228
|
+
vertical-align: middle;
|
|
229
|
+
transform: translateY(-3px);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.PillList-module_pill_osSyz {
|
|
233
|
+
display: inline-flex;
|
|
234
|
+
align-items: center;
|
|
235
|
+
justify-content: center;
|
|
236
|
+
height: 36px;
|
|
237
|
+
padding: 7px 9px;
|
|
238
|
+
border: none;
|
|
239
|
+
border-radius: 6px;
|
|
240
|
+
background: var(--ac-color-background-supportive, #313255);
|
|
241
|
+
color: var(--ac-color-text-muted, #c1c4cb);
|
|
242
|
+
font-family: "IBM Plex Sans", sans-serif;
|
|
243
|
+
font-size: 21px;
|
|
244
|
+
line-height: 30px;
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
white-space: nowrap;
|
|
247
|
+
animation: PillList-module_fadeIn_Aezob 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.PillList-module_pill_osSyz:hover {
|
|
251
|
+
filter: brightness(1.2);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.PillList-module_active_Oll-- {
|
|
255
|
+
outline: 1px solid #5a5b8a;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
@keyframes PillList-module_fadeIn_Aezob {
|
|
259
|
+
from {
|
|
260
|
+
opacity: 0;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
`,document.head.appendChild(e)}var re={list:"PillList-module_list_qvLqO",pill:"PillList-module_pill_osSyz",fadeIn:"PillList-module_fadeIn_Aezob",active:"PillList-module_active_Oll--"};import{jsx as Le}from"react/jsx-runtime";function rt(e){return e===0?.4:e===1?.3:.15}function Ue({pills:e,activePillIndex:r,onSelectPill:t}){return Le("span",{className:re.list,children:e.map((o,n)=>Le("button",{type:"button",className:`${re.pill} ${n===r?re.active:""}`,style:{opacity:rt(n)},onClick:()=>t(n),children:o.text},`${o.type}-${o.text}`))})}import{useCallback as J,useMemo as ae,useRef as E,useState as se}from"react";function ie(e,r){if(!e)return[];let t=r.trimStart();if(!t)return e;let o=t.toLowerCase();return e.filter(n=>!n.is_tappable||n.text.toLowerCase().includes(o))}function ee(e,r){if(!e)return null;let t=r.trim();if(!t)return null;let o=t.toLowerCase();return e.find(n=>n.is_tappable&&n.text.toLowerCase()===o)??null}function De(e,r){let t=[],o=0;for(let i of r){let s=e.indexOf(i.text,o);s!==-1&&(s>o&&t.push({type:"text",value:e.slice(o,s)}),t.push({type:"completed",value:i.text,param:i}),o=s+i.text.length)}let n=e.slice(o);return n&&t.push({type:"text",value:n}),t}function Ke(e,r){let t=[],o=[],n=0;for(let i of r){let s=e.indexOf(i.text,n);s===-1?o.push(i):(t.push(i),n=s+i.text.length)}return{valid:t,invalid:o}}import{useCallback as pt,useEffect as Ne,useRef as Z,useState as Ae}from"react";var it="0.1.10",at="/ac/suggest",je=!1;function st(e){let r=e?.apiKey||""||"";return!r&&!je&&(je=!0,console.warn("[AIAutocomplete] No API key set (MAGICX_AI_AUTOCOMPLETE_API_KEY). Requests will be sent without an Authorization header.")),r}function lt(e){return e?.authScheme?e.authScheme:""==="Basic"?"Basic":"Bearer"}function ct(){return crypto.randomUUID()}function ut(e,r){return{placeholder:e.placeholder,type:e.type,...r&&{text:e.text},kind:e.kind}}async function Fe(e,r,t){let o=t?.apiConfig,n=st(o),i=lt(o),s=!t?.maskCompletedText,p=r.find(l=>l.type==="contact"&&l.metadata?.contact_account_count)?.metadata?.contact_account_count,g=typeof p=="number"?p:void 0,f={data:{raw_query:e,completed_params:r.map(l=>ut(l,s)),...g!=null&&{contact_account_count:g}},meta:{request_id:ct(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:it}},m={"Content-Type":"application/json","X-App-Identifier":"active-campaign-demo",...o?.headers};n&&(m.Authorization=i==="Basic"?`Basic ${btoa(n)}`:`Bearer ${n}`);let h=await fetch(o?.endpoint||at,{method:"POST",headers:m,body:JSON.stringify(f),signal:t?.signal});if(!h.ok)throw new Error(`API error: ${h.status} ${h.statusText}`);return h.json()}function Y(e,r){let t=e,o={},n=[];for(let i of r){let s=(o[i.type]??0)+1;o[i.type]=s;let g=`{{${i.type.toUpperCase().replace(/\s+/g,"_")}_${s}}}`,f=t.indexOf(i.text);f!==-1&&(t=t.slice(0,f)+g+t.slice(f+i.text.length)),n.push({...i,placeholder:g})}return{rawQuery:t,completedParams:n}}function ze(e,r){return r?e.map(t=>{let o=r[t.type];if(!o)return t;let n=o("");if(n.length===0)return t;let i=new Set(n.map(p=>p.text)),s=(t.options??[]).filter(p=>!i.has(p.text));return{...t,options:[...n,...s]}}):e}var mt=100,dt=300,gt=2;function Be({textRef:e,suggestionsRef:r,filterBaseRef:t,maskCompletedTextRef:o,apiConfigRef:n,optionOverridesRef:i,onErrorRef:s,setCompletedParams:p,setSuggestions:g,setActiveDropdownIndex:f}){let[m,h]=Ae(!1),[l,y]=Ae(null),[I,b]=Ae(!1),P=Z(0),M=Z(null),d=Z(""),c=pt(async(a,u)=>{M.current?.abort();let _=new AbortController;M.current=_;let C=++P.current,k=e.current.length;r.current.some(v=>v.type!=="placeholder")||h(!0),y(null);try{let v=await Fe(a,u,{maskCompletedText:o.current,signal:_.signal,apiConfig:n.current});if(C!==P.current)return;let U=ze(v.data.suggestions??[],i.current);b(v.data.is_ready??!1),d.current=a;let B=v.data.input??[],R=B[B.length-1],T=e.current;if(R?.state==="in_progress"){let j=T.toLowerCase().lastIndexOf(R.text.toLowerCase());j!==-1?t.current=j:t.current=k}else t.current=k;let D=U.filter(j=>j.type!=="placeholder")[0];if(D){let j=T.slice(t.current),w=ee(D.options,j);w&&(p(F=>[...F,{id:crypto.randomUUID(),placeholder:"",type:D.type,text:w.text,kind:w.kind,suggestionType:D.type,suggestionPlaceholder:D.text,options:D.options,metadata:w.metadata}]),U=U.filter(F=>F!==D))}g(U),h(!1),f(-1)}catch(v){if(C===P.current){let U=v instanceof Error?v:new Error(String(v));y(U),h(!1),s.current?.(U)}}},[e,r,t,o,n,i,s,p,g,f]);return Ne(()=>(c("",[]),()=>{M.current?.abort()}),[c]),{doFetch:c,isLoading:m,error:l,isReady:I,lastRawQueryRef:d}}function $e({text:e,completedParams:r,doFetch:t,filterBaseRef:o,skipNextFetchRef:n,suggestionsRef:i,lastRawQueryRef:s}){let p=Z(null),g=Z(null),f=Z(!0);Ne(()=>{p.current&&clearTimeout(p.current),g.current&&clearTimeout(g.current);let m=h=>{if(n.current)return n.current=!1,!1;if(!e&&r.length===0)return f.current?(t("",[]),!0):(f.current=!0,!1);let l=e.slice(o.current),b=i.current.filter(k=>k.type!=="placeholder")[0],M=(b?ie(b.options,l):[]).filter(k=>k.is_tappable),d=b?ee(b.options,l)!==null:!1,c=l.trim().length>0;if(M.length>0&&!d&&c)return!1;let{rawQuery:a,completedParams:u}=Y(e,r),_=a.length<s.current.length,C=Math.abs(a.length-s.current.length);return _||C>=h?(t(a,u),!0):!1};return p.current=setTimeout(()=>{m(gt)&&g.current&&clearTimeout(g.current)},mt),g.current=setTimeout(()=>m(1),dt),()=>{p.current&&clearTimeout(p.current),g.current&&clearTimeout(g.current)}},[e,r,t,o,n,i,s])}import{useCallback as qe}from"react";function Qe({activeDropdownIndex:e,setActiveDropdownIndex:r,filteredOptions:t,selectOption:o,onSubmitRef:n,text:i,completedParams:s,isDropdownOpen:p,hasPlaceholder:g,placeholderText:f,suggestions:m,filterBaseRef:h,columns:l,setText:y,setCompletedParams:I,setSuggestions:b}){let P=qe(()=>{let d=t.map((a,u)=>a.is_tappable?u:-1).filter(a=>a!==-1),c=Array.from({length:l},()=>[]);for(let a of d)c[a%l].push(a);return c.flat()},[t,l]);return{handleKeyDown:qe(d=>{let c=P();switch(d.key){case"ArrowDown":{if(d.preventDefault(),c.length===0)return;let a=c.indexOf(e),u=a<c.length-1?a+1:0;r(c[u]);break}case"ArrowUp":{if(d.preventDefault(),c.length===0)return;let a=c.indexOf(e),u=a>0?a-1:c.length-1;r(c[u]);break}case"ArrowRight":{if(e<0)break;if(e%l<l-1){let u=e+1;u<t.length&&t[u]?.is_tappable&&(d.preventDefault(),r(u))}break}case"ArrowLeft":{if(e<0)break;if(e%l>0){let a=e-1;a>=0&&t[a]?.is_tappable&&(d.preventDefault(),r(a))}break}case"Enter":{if(d.preventDefault(),e>=0&&t[e]?.is_tappable)o(t[e]);else if(n.current){let{rawQuery:a,completedParams:u}=Y(i,s),_={query:i.trim(),raw_query:a,completed_params:u};n.current(_)}break}case"Tab":{if(e>=0&&t[e]?.is_tappable)d.preventDefault(),o(t[e]);else if(p){let a=t.find(u=>u.is_tappable);a&&(d.preventDefault(),o(a))}else if(!i&&g){d.preventDefault();let a=m.find(u=>u.type==="placeholder");a?(y(f),h.current=f.length,I(u=>[...u,{id:crypto.randomUUID(),placeholder:"",type:a.type,text:f,kind:null,suggestionType:a.type,suggestionPlaceholder:a.text,options:a.options}]),b(u=>u.filter(_=>_!==a))):(y(f),h.current=f.length)}break}case"Escape":r(-1);break}},[e,l,s,t,h,P,g,p,n,f,o,r,I,b,y,m,i]),getTappableIndices:P}}import{useCallback as _e}from"react";function He({completedParams:e,suggestions:r,setCompletedParams:t,setSuggestions:o,setActiveDropdownIndex:n,filterBaseRef:i,pillTappedRef:s}){let p=_e(m=>{let h=r.filter(b=>b.type!=="placeholder");if(m<0||m>=h.length)return;let l=h[m],y=h.filter((b,P)=>P!==m),I=r.filter(b=>b.type==="placeholder");o([...I,l,...y]),s.current=!0,n(-1)},[r,o,n,s]),g=_e(()=>{if(e.length===0)return;let m=e[e.length-1],h={type:m.suggestionType,text:m.suggestionPlaceholder,required:!0,options:m.options};t(l=>l.slice(0,-1)),o(l=>[h,...l]),n(-1)},[e,t,o,n]),f=_e(m=>{let h={type:m.suggestionType,text:m.suggestionPlaceholder,required:!0,options:m.options};return{apply:l=>{l(y=>{let I=0;for(let b of e){let P=y.indexOf(b.text,I);if(P!==-1){if(b.id===m.id){let M=y.slice(0,P),d=y.slice(P+m.text.length),c=(M+d).replace(/ {2,}/g," ");return i.current=Math.min(i.current,c.length),c}I=P+b.text.length}}return y}),t(y=>y.filter(I=>I.id!==m.id)),o(y=>[h,...y]),n(-1),s.current=!0}}},[e,t,o,n,i,s]);return{setActivePill:p,removeLastParam:g,reEditParam:f}}var ft=0;function ht(){let e=E(null);return e.current===null&&(e.current=`:ac-${++ft}:`),e.current}function Se({onSubmit:e,onError:r,optionOverrides:t,maskCompletedText:o,placeholder:n,apiConfig:i,columns:s=2,eagerSuggestions:p=!0,value:g,completedParams:f,onChange:m,onParamsChange:h}){let l=g!==void 0,y=f!==void 0,[I,b]=se(""),[P,M]=se([]),[d,c]=se([]),[a,u]=se(-1),_=l?g:I,C=y?f:P,k=E(e);k.current=e;let q=E(m);q.current=m;let v=E(h);v.current=h;let U=E(g);U.current=g;let B=E(f);B.current=f;let R=J(A=>{if(typeof A=="function")if(l){let x=A(U.current??"");q.current?.(x)}else b(x=>{let $=A(x);return q.current?.($),$});else l||b(A),q.current?.(A)},[l]),T=J(A=>{if(typeof A=="function")if(y){let x=A(B.current??[]);v.current?.(x)}else M(x=>{let $=A(x);return v.current?.($),$});else y||M(A),v.current?.(A)},[y]),W=E(r);W.current=r;let D=E(t);D.current=t;let j=E(o);j.current=o;let w=E(i);w.current=i;let F=E(_);F.current=_;let le=E(d);le.current=d;let z=E(0),te=E(!1),Pe=E(!1),ce=ht(),{doFetch:ue,isLoading:ve,error:Ve,isReady:We,lastRawQueryRef:pe}=Be({textRef:F,suggestionsRef:le,filterBaseRef:z,maskCompletedTextRef:j,apiConfigRef:w,optionOverridesRef:D,onErrorRef:W,setCompletedParams:T,setSuggestions:c,setActiveDropdownIndex:u});$e({text:_,completedParams:C,doFetch:ue,filterBaseRef:z,skipNextFetchRef:Pe,suggestionsRef:le,lastRawQueryRef:pe});let Xe=ae(()=>De(_,C),[_,C]);z.current=Math.min(z.current,_.length);let me=_.slice(z.current),de=ae(()=>d.filter(x=>x.type==="placeholder").map(x=>x.text).join(" ")||n||"",[d,n]),oe=ae(()=>d.filter(A=>A.type!=="placeholder"),[d]),S=oe[0],Ie=S?t?.[S.type]:void 0,Ce=S?Ie?Ie(me.trim()):S.options??[]:[],ge=ae(()=>ie(Ce,me),[Ce,me]),ke=de.length>0,fe=!ve&&ge.length>0&&(!!_||te.current||!ke),we=J(A=>{if(!S)return;let x={id:crypto.randomUUID(),placeholder:"",type:S.type,text:A.text,kind:A.kind,suggestionType:S.type,suggestionPlaceholder:S.text,options:S.options,metadata:A.metadata},$=z.current,L=F.current.slice(0,$);if(L.length>0&&!L.endsWith(" ")){let O=L.split(/\s+/).pop()??"";O&&A.text.toLowerCase().startsWith(O.toLowerCase())&&(L=L.slice(0,L.length-O.length))}let he=L.length>0&&L[L.length-1]!==" ",X=L+(he?" ":"")+A.text+" ";R(X),z.current=X.length,T(O=>[...O,x]),te.current=!1,u(-1);let Q=oe.length-1;p&&Q>0?(c(O=>O.filter(H=>H!==S)),Pe.current=!0):c(O=>O.filter(H=>H.type==="placeholder"))},[S,oe,p,R,T]),Ge=J(A=>{let x=A.target.value,L=x.length>0&&!A.nativeEvent?.isComposing&&x[0]!==x[0].toUpperCase()?x[0].toUpperCase()+x.slice(1):x;R(L),te.current=!1,u(-1);let{valid:he,invalid:X}=Ke(L,C);if(X.length>0){T(()=>he);for(let Q of X)c(O=>[{type:Q.suggestionType,text:Q.suggestionPlaceholder,required:!0,options:Q.options},...O])}if(S&&X.length===0){let Q=L.slice(z.current),O=ee(S.options,Q);O&&(T(H=>[...H,{id:crypto.randomUUID(),placeholder:"",type:S.type,text:O.text,kind:O.kind,suggestionType:S.type,suggestionPlaceholder:S.text,options:S.options,metadata:O.metadata}]),c(H=>H.filter(tt=>tt!==S)))}},[C,S,R,T]),{handleKeyDown:Ye}=Qe({activeDropdownIndex:a,setActiveDropdownIndex:u,filteredOptions:ge,selectOption:we,onSubmitRef:k,text:_,completedParams:C,isDropdownOpen:fe,hasPlaceholder:ke,placeholderText:de,suggestions:d,filterBaseRef:z,columns:s,setText:R,setCompletedParams:T,setSuggestions:c}),ne=He({completedParams:C,suggestions:d,setCompletedParams:T,setSuggestions:c,setActiveDropdownIndex:u,filterBaseRef:z,pillTappedRef:te}),Ze=J(A=>{ne.reEditParam(A).apply(R)},[ne,R]),Je=J(()=>{R(""),T(()=>[]),c([]),u(-1),z.current=0,pe.current="",ue("",[])},[ue,R,T,pe]),et=a>=0?`${ce}-option-${a}`:void 0;return{completedParams:C,suggestionPills:oe,setActivePill:ne.setActivePill,removeLastParam:ne.removeLastParam,reEditParam:Ze,segments:Xe,suggestions:d,activeIndex:a,isReady:We,isLoading:ve,error:Ve,inputProps:{value:_,placeholder:de||void 0,onChange:Ge,onKeyDown:Ye,role:"combobox","aria-expanded":fe,"aria-activedescendant":et,"aria-autocomplete":"list","aria-controls":ce},reset:Je,dropdownProps:{suggestions:S?[{...S,options:ge}]:[],activeIndex:a,onSelect:we,onHighlight:u,isOpen:fe,id:ce}}}import{jsx as N,jsxs as V}from"react/jsx-runtime";var xt=bt(function({onSubmit:r,onError:t,optionOverrides:o,maskCompletedText:n,placeholder:i,className:s,apiConfig:p,columns:g,eagerSuggestions:f,value:m,completedParams:h,onChange:l,onParamsChange:y},I){let b=xe(null),[P,M]=St(!1),d=xe(()=>{}),c=xe(void 0);At(()=>(b.current?.focus(),()=>clearTimeout(c.current)),[]);let{completedParams:a,suggestionPills:u,setActivePill:_,segments:C,inputProps:k,dropdownProps:q,reset:v}=Se({onSubmit:w=>d.current(w),onError:t,optionOverrides:o,maskCompletedText:n,placeholder:i,apiConfig:p,columns:g,eagerSuggestions:f,value:m,completedParams:h,onChange:l,onParamsChange:y});_t(I,()=>({focus:()=>b.current?.focus(),reset:v}),[v]);let U=()=>{b.current?.focus()},B=!!k.value||a.length>0,R=yt(()=>{if(!B)return;let{rawQuery:w,completedParams:F}=Y(k.value,a);r({query:k.value.trim(),raw_query:w,completed_params:F}),v(),M(!0),clearTimeout(c.current),c.current=setTimeout(()=>M(!1),3e3)},[B,k.value,a,r,v]);d.current=R;let{onChange:T,placeholder:W,...D}=k,j=!k.value;return V("div",{className:`${K.container} ${s??""}`,children:[N("div",{className:`${K.checkmark} ${P?K.checkmarkVisible:""}`,children:V("svg",{width:"72",height:"72",viewBox:"0 0 24 24",fill:"none",role:"img","aria-label":"Success",children:[N("circle",{cx:"12",cy:"12",r:"12",fill:"#34C759"}),N("path",{d:"M7 12.5l3.5 3.5L17 9",stroke:"#000",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:K.checkmarkPath})]})}),N(ye,{...q}),V("div",{className:K.inputWrapper,onClick:U,children:[V("div",{className:K.editorArea,children:[V("div",{className:K.sizerContent,"aria-hidden":"true",children:[j&&W?V("span",{className:K.placeholderText,children:[W," "]}):V("span",{className:K.sizerText,children:[C.map((w,F)=>N("span",{children:w.value},`${F}-${w.type}`)),C.length===0&&"\xA0"]})," ",N(Ue,{pills:u,activePillIndex:0,onSelectPill:_})]}),N("textarea",{ref:b,className:K.textarea,rows:1,onChange:T,...D})]}),N("button",{type:"button",className:K.submitButton,disabled:!B,onClick:w=>{w.stopPropagation(),R()},"aria-label":"Submit",children:N("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:N("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})});export{xt as AIAutocomplete,ye as AIAutocompleteDropdown,Se as useAIAutocomplete};
|
|
2
264
|
//# sourceMappingURL=index.mjs.map
|