@magicx-eng/ai-autocomplete-react 0.1.14 → 0.1.16

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.
Files changed (8) hide show
  1. package/README.md +16 -10
  2. package/dist/index.d.mts +7 -7
  3. package/dist/index.d.ts +7 -7
  4. package/dist/index.js +325 -8
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +325 -8
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -12,7 +12,8 @@ A React/TypeScript SDK that provides a guided AI-powered autocomplete experience
12
12
  - **Controlled & uncontrolled** — works out of the box or integrates with external state
13
13
  - **Ref forwarding** — imperative `focus()` and `reset()` via ref
14
14
  - **Accessible** — ARIA combobox pattern with `role="listbox"`, `aria-activedescendant`
15
- - **Lightweight** — zero dependencies beyond React
15
+ - **Animations** — option selection streak animation, text shimmer on newly added params, typewriter reveal effect
16
+ - **Lightweight** — zero dependencies beyond React, styles auto-injected at runtime
16
17
  - **TypeScript first** — full type definitions shipped with the package
17
18
 
18
19
  ## Installation
@@ -132,7 +133,7 @@ The full component. Owns the input, pills, dropdown, and keyboard navigation.
132
133
  | `placeholder?` | `string` | — | Fallback placeholder when the server doesn't return one. |
133
134
  | `className?` | `string` | — | CSS class applied to the container. |
134
135
  | `columns?` | `number` | `2` | Number of columns in the dropdown grid. |
135
- | `eagerSuggestions?` | `boolean` | `true` | When `true`, show cached next suggestions immediately after selecting an option. When `false`, clear the dropdown and wait for the server response before showing the next suggestions. |
136
+ | `typewriterEffect?` | `boolean` | `true` | When `true`, reveal selected option text letter by letter with a shimmer. When `false`, show all at once with a shimmer sweep. |
136
137
  | `value?` | `string` | — | Controlled text value. |
137
138
  | `completedParams?` | `CompletedParamState[]` | — | Controlled completed params. |
138
139
  | `onChange?` | `(value: string) => void` | — | Called when text changes (controlled mode). |
@@ -143,9 +144,10 @@ The full component. Owns the input, pills, dropdown, and keyboard navigation.
143
144
 
144
145
  | Field | Type | Description |
145
146
  |---|---|---|
146
- | `endpoint?` | `string` | Full URL for the suggest endpoint (e.g. `"https://api.example.com/ac/suggest"`). Falls back to `MAGICX_API_ENDPOINT` env var, then `"/ac/suggest"`. |
147
- | `apiKey?` | `string` | API key for Authorization header. Falls back to `MAGICX_AI_AUTOCOMPLETE_API_KEY` env var. |
147
+ | `endpoint?` | `string` | Full URL for the suggest endpoint (e.g. `"https://api.example.com/ac/suggest"`). Default: `"/ac/suggest"`. |
148
+ | `apiKey?` | `string` | API key for Authorization header. A dev warning is logged if not provided. |
148
149
  | `authScheme?` | `"Bearer" \| "Basic"` | Auth header scheme. Default: `"Bearer"`. |
150
+ | `appIdentifier?` | `string` | Value for the `X-App-Identifier` header. Only sent when provided. |
149
151
  | `headers?` | `Record<string, string>` | Additional headers merged into every request. |
150
152
 
151
153
  ### `AutocompleteResult`
@@ -173,9 +175,10 @@ Accepts the same props as `<AIAutocomplete />` (except `className` and `ref`), w
173
175
  | `completedParams` | `CompletedParamState[]` | All parameters the user has filled so far. Each entry contains the selected option's `text`, `kind`, `type`, and `metadata`, plus client-side fields like `id` (stable UUID), `options` (cached for re-editing), `suggestionType`, and `suggestionPlaceholder`. Use these to render completed values (e.g. bold text) and to build the final query on submit. |
174
176
  | `suggestionPills` | `Suggestion[]` | Unfilled suggestions that should be rendered as pills (inline chips). Excludes placeholder-type suggestions. The first item is the "active" pill whose options appear in the dropdown. Tapping a pill reorders it to the front via `setActivePill`. |
175
177
  | `segments` | `Segment[]` | The input text split into typed segments for overlay rendering. Each segment is either `{ type: "text", value: string }` for plain text, or `{ type: "completed", value: string, param: CompletedParamState }` for a completed parameter. Use these to render a styled overlay on top of the textarea — e.g. showing completed params in bold while keeping the textarea's actual text transparent. |
178
+ | `newParamId` | `string \| null` | The `id` of the most recently added completed param, or `null`. Use this to apply shimmer animations to the newly added text segment. Cleared automatically after the animation completes. |
176
179
  | `suggestions` | `Suggestion[]` | All suggestions from the server, including placeholder-type suggestions. Most consumers should use `suggestionPills` and `dropdownProps` instead — this is exposed for advanced use cases like custom pill or dropdown rendering. |
177
180
  | `activeIndex` | `number` | Index of the currently keyboard-highlighted option in the dropdown. `-1` when no option is highlighted. Automatically managed by arrow keys. |
178
- | `isLoading` | `boolean` | `true` while a fetch is in flight and no cached suggestions are visible. With `eagerSuggestions={true}` (default), this only triggers on initial mount or after `reset()` — the dropdown stays open during background re-fetches. With `eagerSuggestions={false}`, it also becomes `true` after each option selection, closing the dropdown until fresh data arrives. |
181
+ | `isLoading` | `boolean` | `true` while a fetch is in flight and no cached suggestions are visible. Only triggers on initial mount, after `reset()`, or when all cached suggestions are consumed. The dropdown stays open with cached data during background re-fetches. |
179
182
  | `isReady` | `boolean` | `true` when the server's `is_ready` flag indicates the query is complete and ready for execution. Use this to show a visual indicator or enable a submit button. |
180
183
  | `error` | `Error \| null` | The most recent fetch error, or `null` if the last fetch succeeded. Cleared on every new fetch attempt. |
181
184
 
@@ -186,6 +189,7 @@ Accepts the same props as `<AIAutocomplete />` (except `className` and `ref`), w
186
189
  | `setActivePill` | `(index: number) => void` | Reorder pills by moving the pill at `index` to the front, making it the active pill whose options show in the dropdown. |
187
190
  | `removeLastParam` | `() => void` | Remove the most recently completed parameter, restore it as a pill, and re-show its options in the dropdown. Useful for handling backspace on an empty input. |
188
191
  | `reEditParam` | `(param: CompletedParamState) => void` | Remove a specific completed parameter from the input text, restore it as a pill with its cached options, and open the dropdown. Use this when the user taps on a bold (completed) param to change their selection. |
192
+ | `clearNewParamId` | `() => void` | Manually clear `newParamId`. Called automatically after the shimmer/typewriter animation completes. |
189
193
  | `reset` | `() => void` | Clear all text, completed params, and suggestions, then re-fetch initial suggestions from the server. Returns the component to its mount state. |
190
194
 
191
195
  **Spread Props**
@@ -218,7 +222,7 @@ Represents an unfilled parameter slot. Rendered as a pill in Tier 1, or availabl
218
222
  | `type` | `string` | Suggestion type identifier (e.g. `"task"`, `"goal"`, `"contact"`). Used as the key for `optionOverrides`. |
219
223
  | `text` | `string` | Display text for the pill (e.g. `"type"`, `"goal"`). |
220
224
  | `required` | `boolean` | Whether this suggestion must be filled before submission. |
221
- | `options` | `SuggestionOption[]` | Available options the user can select from. |
225
+ | `options?` | `SuggestionOption[]` | Available options the user can select from. May be `undefined` if the server omits it. |
222
226
 
223
227
  ### `SuggestionOption`
224
228
 
@@ -235,7 +239,7 @@ An individual option within a suggestion's dropdown.
235
239
 
236
240
  ## CSS Customization
237
241
 
238
- The component uses CSS Modules with customizable CSS variables. Override them on a parent element:
242
+ Styles are auto-injected at runtime — no CSS import needed. The component uses CSS variables for theming. Override them on a parent element:
239
243
 
240
244
  ```css
241
245
  .my-autocomplete {
@@ -252,11 +256,13 @@ The component uses CSS Modules with customizable CSS variables. Override them on
252
256
 
253
257
  | Key | Behavior |
254
258
  |---|---|
255
- | **Arrow Down/Up** | Navigate options. |
256
- | **Arrow Left/Right** | Jump between columns on the same row. |
259
+ | **Arrow Down** | Open dropdown (if closed and cursor at end) and select first option, or navigate to next option. |
260
+ | **Arrow Up** | Navigate to previous option. Deselects if on the first row. Does nothing if no option is selected. |
261
+ | **Arrow Right** | Jump to next column when an option is highlighted. Cycles to the next suggestion pill when cursor is at the end and no option is selected. |
262
+ | **Arrow Left** | Jump to previous column when an option is highlighted. |
257
263
  | **Tab** | Select the first tappable option (or highlighted one). Accepts placeholder when input is empty. |
258
264
  | **Enter** | Select highlighted option if one is highlighted. Otherwise submits the query. |
259
- | **Escape** | Clear the highlighted option. |
265
+ | **Escape** | Deselect the highlighted option. |
260
266
 
261
267
  ## Option Overrides
262
268
 
package/dist/index.d.mts CHANGED
@@ -60,9 +60,8 @@ interface AIAutocompleteProps {
60
60
  className?: string;
61
61
  apiConfig?: APIConfig;
62
62
  columns?: number;
63
- /** When true (default), show cached next suggestions immediately after option select.
64
- * When false, clear suggestions and wait for the server response. */
65
- eagerSuggestions?: boolean;
63
+ /** When true (default), reveal selected option text letter by letter. */
64
+ typewriterEffect?: boolean;
66
65
  value?: string;
67
66
  completedParams?: CompletedParamState[];
68
67
  onChange?: (value: string) => void;
@@ -81,9 +80,8 @@ interface UseAIAutocompleteOptions {
81
80
  placeholder?: string;
82
81
  apiConfig?: APIConfig;
83
82
  columns?: number;
84
- /** When true (default), show cached next suggestions immediately after option select.
85
- * When false, clear suggestions and wait for the server response. */
86
- eagerSuggestions?: boolean;
83
+ /** When true (default), reveal selected option text letter by letter. */
84
+ typewriterEffect?: boolean;
87
85
  value?: string;
88
86
  completedParams?: CompletedParamState[];
89
87
  onChange?: (value: string) => void;
@@ -97,6 +95,8 @@ interface UseAIAutocompleteReturn {
97
95
  reEditParam: (param: CompletedParamState) => void;
98
96
  reset: () => void;
99
97
  segments: Segment[];
98
+ newParamId: string | null;
99
+ clearNewParamId: () => void;
100
100
  suggestions: Suggestion[];
101
101
  activeIndex: number;
102
102
  isReady: boolean;
@@ -129,6 +129,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
129
129
 
130
130
  declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
131
131
 
132
- declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, placeholder: customPlaceholder, apiConfig, columns, eagerSuggestions, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
132
+ declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, placeholder: customPlaceholder, apiConfig, columns, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
133
133
 
134
134
  export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type APIConfig, type AutocompleteResult, type CompletedParam, type CompletedParamState, type OptionOverrides, type Segment, type Suggestion, type SuggestionOption, type TaskKind, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };
package/dist/index.d.ts CHANGED
@@ -60,9 +60,8 @@ interface AIAutocompleteProps {
60
60
  className?: string;
61
61
  apiConfig?: APIConfig;
62
62
  columns?: number;
63
- /** When true (default), show cached next suggestions immediately after option select.
64
- * When false, clear suggestions and wait for the server response. */
65
- eagerSuggestions?: boolean;
63
+ /** When true (default), reveal selected option text letter by letter. */
64
+ typewriterEffect?: boolean;
66
65
  value?: string;
67
66
  completedParams?: CompletedParamState[];
68
67
  onChange?: (value: string) => void;
@@ -81,9 +80,8 @@ interface UseAIAutocompleteOptions {
81
80
  placeholder?: string;
82
81
  apiConfig?: APIConfig;
83
82
  columns?: number;
84
- /** When true (default), show cached next suggestions immediately after option select.
85
- * When false, clear suggestions and wait for the server response. */
86
- eagerSuggestions?: boolean;
83
+ /** When true (default), reveal selected option text letter by letter. */
84
+ typewriterEffect?: boolean;
87
85
  value?: string;
88
86
  completedParams?: CompletedParamState[];
89
87
  onChange?: (value: string) => void;
@@ -97,6 +95,8 @@ interface UseAIAutocompleteReturn {
97
95
  reEditParam: (param: CompletedParamState) => void;
98
96
  reset: () => void;
99
97
  segments: Segment[];
98
+ newParamId: string | null;
99
+ clearNewParamId: () => void;
100
100
  suggestions: Suggestion[];
101
101
  activeIndex: number;
102
102
  isReady: boolean;
@@ -129,6 +129,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
129
129
 
130
130
  declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
131
131
 
132
- declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, placeholder: customPlaceholder, apiConfig, columns, eagerSuggestions, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
132
+ declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, placeholder: customPlaceholder, apiConfig, columns, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
133
133
 
134
134
  export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type APIConfig, type AutocompleteResult, type CompletedParam, type CompletedParamState, type OptionOverrides, type Segment, type Suggestion, type SuggestionOption, type TaskKind, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var xe=Object.defineProperty;var tt=Object.getOwnPropertyDescriptor;var ot=Object.getOwnPropertyNames;var nt=Object.prototype.hasOwnProperty;var rt=(e,n)=>{for(var t in n)xe(e,t,{get:n[t],enumerable:!0})},it=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of ot(n))!nt.call(e,r)&&r!==t&&xe(e,r,{get:()=>n[r],enumerable:!(o=tt(n,r))||o.enumerable});return e};var at=e=>it(xe({},"__esModule",{value:!0}),e);var bt={};rt(bt,{AIAutocomplete:()=>Be,AIAutocompleteDropdown:()=>se,useAIAutocomplete:()=>pe});module.exports=at(bt);var F=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-cc65f4cc")){let e=document.createElement("style");e.id="ac-style-cc65f4cc",e.textContent=`.AIAutocomplete-module_container_KKjFU {
1
+ "use strict";var Pe=Object.defineProperty;var at=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var lt=Object.prototype.hasOwnProperty;var ut=(e,r)=>{for(var t in r)Pe(e,t,{get:r[t],enumerable:!0})},ct=(e,r,t,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of st(r))!lt.call(e,n)&&n!==t&&Pe(e,n,{get:()=>r[n],enumerable:!(o=at(r,n))||o.enumerable});return e};var pt=e=>ct(Pe({},"__esModule",{value:!0}),e);var St={};ut(St,{AIAutocomplete:()=>Je,AIAutocompleteDropdown:()=>be,useAIAutocomplete:()=>_e});module.exports=pt(St);var D=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-cc65f4cc")){let e=document.createElement("style");e.id="ac-style-cc65f4cc",e.textContent=`.AIAutocomplete-module_container_KKjFU {
2
2
  position: relative;
3
3
  font-family: "IBM Plex Sans", sans-serif;
4
4
  }
@@ -37,6 +37,14 @@
37
37
  color: transparent;
38
38
  }
39
39
 
40
+ .AIAutocomplete-module_sizerTextVisible_HR-5h {
41
+ color: var(--ac-color-text-default, #fff);
42
+ }
43
+
44
+ .AIAutocomplete-module_textareaHidden_UayJt {
45
+ color: transparent !important;
46
+ }
47
+
40
48
  .AIAutocomplete-module_placeholderText_K3ayy {
41
49
  color: var(--ac-color-text-muted, #c1c4cb);
42
50
  opacity: 0.7;
@@ -86,7 +94,52 @@
86
94
  .AIAutocomplete-module_submitButton_sl1Mi:hover {
87
95
  opacity: 0.85;
88
96
  }
89
- `,document.head.appendChild(e)}var Q={container:"AIAutocomplete-module_container_KKjFU",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"&&!document.getElementById("ac-style-2eef895d")){let e=document.createElement("style");e.id="ac-style-2eef895d",e.textContent=`.AIAutocompleteDropdown-module_dropdown_yz2KC {
97
+
98
+ /* Text shimmer on newly added completed param.
99
+ The sizer sits above the textarea (z-index: 1). Normally sizer text is
100
+ transparent and the textarea shows the real text. During the shimmer, we
101
+ make this span visible with a moving gradient clipped to the text shape,
102
+ so the shimmer renders on top of the textarea's static white text. */
103
+
104
+ .AIAutocomplete-module_shimmer_13AnY {
105
+ position: relative;
106
+ z-index: 2;
107
+ display: inline;
108
+ }
109
+
110
+ .AIAutocomplete-module_shimmerRevealed_RR8dp {
111
+ color: transparent;
112
+ background: linear-gradient(
113
+ 120deg,
114
+ var(--ac-color-text-default, #fff) 0%,
115
+ var(--ac-color-text-default, #fff) 44%,
116
+ #b0b0b0 48%,
117
+ #b0b0b0 52%,
118
+ var(--ac-color-text-default, #fff) 56%,
119
+ var(--ac-color-text-default, #fff) 100%
120
+ );
121
+ background-size: 200% 100%;
122
+ -webkit-background-clip: text;
123
+ background-clip: text;
124
+ }
125
+
126
+ .AIAutocomplete-module_shimmerSweep_ARCon {
127
+ animation: AIAutocomplete-module_textShimmer_eCLdq 650ms ease-out forwards;
128
+ }
129
+
130
+ @keyframes AIAutocomplete-module_textShimmer_eCLdq {
131
+ 0% {
132
+ background-position: 100% 0;
133
+ }
134
+ 100% {
135
+ background-position: -50% 0;
136
+ }
137
+ }
138
+
139
+ .AIAutocomplete-module_shimmerHidden_45-Pf {
140
+ color: transparent !important;
141
+ }
142
+ `,document.head.appendChild(e)}var F={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",sizerContent:"AIAutocomplete-module_sizerContent_DQgmV",sizerText:"AIAutocomplete-module_sizerText_iZIMK",sizerTextVisible:"AIAutocomplete-module_sizerTextVisible_HR-5h",textareaHidden:"AIAutocomplete-module_textareaHidden_UayJt",placeholderText:"AIAutocomplete-module_placeholderText_K3ayy",textarea:"AIAutocomplete-module_textarea_eyn6A",submitButton:"AIAutocomplete-module_submitButton_sl1Mi",shimmer:"AIAutocomplete-module_shimmer_13AnY",shimmerRevealed:"AIAutocomplete-module_shimmerRevealed_RR8dp",shimmerSweep:"AIAutocomplete-module_shimmerSweep_ARCon",textShimmer:"AIAutocomplete-module_textShimmer_eCLdq",shimmerHidden:"AIAutocomplete-module_shimmerHidden_45-Pf"};if(typeof document<"u"&&!document.getElementById("ac-style-2eef895d")){let e=document.createElement("style");e.id="ac-style-2eef895d",e.textContent=`.AIAutocompleteDropdown-module_dropdown_yz2KC {
90
143
  position: absolute;
91
144
  left: 0;
92
145
  right: 0;
@@ -105,10 +158,10 @@
105
158
  opacity: 1;
106
159
  pointer-events: auto;
107
160
  }
108
- `,document.head.appendChild(e)}var Ae={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj"};if(typeof document<"u"&&!document.getElementById("ac-style-d91f2b06")){let e=document.createElement("style");e.id="ac-style-d91f2b06",e.textContent=`.SuggestionGrid-module_grid_jvaPb {
161
+ `,document.head.appendChild(e)}var ke={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj"};if(typeof document<"u"&&!document.getElementById("ac-style-d91f2b06")){let e=document.createElement("style");e.id="ac-style-d91f2b06",e.textContent=`.SuggestionGrid-module_grid_jvaPb {
109
162
  display: grid;
110
163
  grid-template-columns: 1fr 1fr;
111
- gap: 12px 18px;
164
+ gap: 0 18px;
112
165
  padding: 18px 24px;
113
166
  max-height: 192px;
114
167
  overflow-y: auto;
@@ -128,7 +181,9 @@
128
181
  background: rgba(255, 255, 255, 0.3);
129
182
  border-radius: 3px;
130
183
  }
131
- `,document.head.appendChild(e)}var Ee={grid:"SuggestionGrid-module_grid_jvaPb"};if(typeof document<"u"&&!document.getElementById("ac-style-f6bdc634")){let e=document.createElement("style");e.id="ac-style-f6bdc634",e.textContent=`.SuggestionItem-module_item_d4vpD {
184
+ `,document.head.appendChild(e)}var Ue={grid:"SuggestionGrid-module_grid_jvaPb"};var fe=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-f6bdc634")){let e=document.createElement("style");e.id="ac-style-f6bdc634",e.textContent=`.SuggestionItem-module_item_d4vpD {
185
+ position: relative;
186
+ overflow: visible;
132
187
  display: flex;
133
188
  align-items: center;
134
189
  font-family: "IBM Plex Sans", sans-serif;
@@ -138,7 +193,9 @@
138
193
  white-space: normal;
139
194
  word-break: break-word;
140
195
  opacity: 0.35;
141
- animation: SuggestionItem-module_fadeIn_I8u35 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
196
+ border-radius: 12px;
197
+ padding: 12px 10px;
198
+ animation: SuggestionItem-module_fadeIn_I8u35 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
142
199
  }
143
200
 
144
201
  @keyframes SuggestionItem-module_fadeIn_I8u35 {
@@ -147,6 +204,11 @@
147
204
  }
148
205
  }
149
206
 
207
+ .SuggestionItem-module_content_T-Qba {
208
+ position: relative;
209
+ z-index: 2;
210
+ }
211
+
150
212
  .SuggestionItem-module_tappable_70KcX {
151
213
  cursor: pointer;
152
214
  }
@@ -170,7 +232,262 @@
170
232
  margin-left: 6px;
171
233
  opacity: 0.5;
172
234
  }
173
- `,document.head.appendChild(e)}var J={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"};var ae=require("react/jsx-runtime");function Te({option:e,isHighlighted:n,onSelect:t,onHighlight:o,id:r}){let i=[J.item,n?J.highlighted:"",e.is_tappable?J.tappable:J.nonTappable].filter(Boolean).join(" ");return(0,ae.jsxs)("div",{id:r,role:"option","aria-selected":n,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&&(0,ae.jsx)("span",{className:J.tag,children:e.tag})]})}var _e=require("react/jsx-runtime");function Le({options:e,activeIndex:n,onSelect:t,onHighlight:o,listboxId:r}){return(0,_e.jsx)("div",{className:Ee.grid,children:e.map((i,s)=>(0,_e.jsx)(Te,{option:i,isHighlighted:s===n,onSelect:t,onHighlight:()=>o(s),id:`${r}-option-${s}`},i.text))})}var ve=require("react/jsx-runtime");function se({suggestions:e,activeIndex:n,onSelect:t,onHighlight:o,isOpen:r,id:i,className:s}){let m=e[0]?.options??[],c=r&&m.length>0;return(0,ve.jsx)("div",{id:i,role:"listbox",className:`${Ae.dropdown} ${c?Ae.visible:""} ${s??""}`,onMouseDown:u=>u.preventDefault(),children:m.length>0&&(0,ve.jsx)(Le,{options:m,activeIndex:n,onSelect:t,onHighlight:o,listboxId:i})})}if(typeof document<"u"&&!document.getElementById("ac-style-b745b4fb")){let e=document.createElement("style");e.id="ac-style-b745b4fb",e.textContent=`.PillList-module_list_qvLqO {
235
+
236
+ .SuggestionItem-module_pressed_98o-r {
237
+ opacity: 0.8;
238
+ color: var(--ac-color-text-default, #fff);
239
+ background: rgba(255, 255, 255, 0.06);
240
+ animation:
241
+ SuggestionItem-module_glassFade_oyiSj 500ms ease forwards,
242
+ SuggestionItem-module_tapDown_G3WGz 500ms ease forwards;
243
+ }
244
+
245
+ @keyframes SuggestionItem-module_tapDown_G3WGz {
246
+ 0% {
247
+ transform: scale(1);
248
+ }
249
+ 30% {
250
+ transform: scale(0.97);
251
+ }
252
+ 100% {
253
+ transform: scale(1);
254
+ }
255
+ }
256
+
257
+ @keyframes SuggestionItem-module_glassFade_oyiSj {
258
+ 0% {
259
+ background: rgba(255, 255, 255, 0.1);
260
+ }
261
+ 100% {
262
+ background: transparent;
263
+ }
264
+ }
265
+
266
+ /* Border streaks \u2014 horizontal segments */
267
+
268
+ .SuggestionItem-module_streaks_d9PEB {
269
+ position: absolute;
270
+ inset: 0;
271
+ z-index: 1;
272
+ pointer-events: none;
273
+ border-radius: inherit;
274
+ overflow: hidden;
275
+ }
276
+
277
+ /* Bottom horizontal: 40% from right \u2192 right corner */
278
+ .SuggestionItem-module_streaks_d9PEB::before {
279
+ content: "";
280
+ position: absolute;
281
+ bottom: -3px;
282
+ left: 60%;
283
+ width: 0;
284
+ height: 6px;
285
+ background: radial-gradient(
286
+ ellipse at center,
287
+ rgba(255, 255, 255, 0.5) 0%,
288
+ rgba(255, 255, 255, 0.2) 40%,
289
+ transparent 70%
290
+ );
291
+ box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.2);
292
+ filter: blur(1px);
293
+ border-radius: 50%;
294
+ }
295
+
296
+ /* Top horizontal: 40% from left \u2192 left corner */
297
+ .SuggestionItem-module_streaks_d9PEB::after {
298
+ content: "";
299
+ position: absolute;
300
+ top: -3px;
301
+ right: 60%;
302
+ width: 0;
303
+ height: 6px;
304
+ background: radial-gradient(
305
+ ellipse at center,
306
+ rgba(255, 255, 255, 0.5) 0%,
307
+ rgba(255, 255, 255, 0.2) 40%,
308
+ transparent 70%
309
+ );
310
+ box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.2);
311
+ filter: blur(1px);
312
+ border-radius: 50%;
313
+ }
314
+
315
+ /* Border streaks \u2014 vertical segments */
316
+
317
+ .SuggestionItem-module_streaksVert_ERlV1 {
318
+ position: absolute;
319
+ inset: 0;
320
+ z-index: 1;
321
+ pointer-events: none;
322
+ border-radius: inherit;
323
+ overflow: hidden;
324
+ }
325
+
326
+ /* Right vertical: bottom-right corner \u2192 up */
327
+ .SuggestionItem-module_streaksVert_ERlV1::before {
328
+ content: "";
329
+ position: absolute;
330
+ bottom: 0;
331
+ right: -3px;
332
+ width: 6px;
333
+ height: 0;
334
+ background: radial-gradient(
335
+ ellipse at center,
336
+ rgba(255, 255, 255, 0.4) 0%,
337
+ rgba(255, 255, 255, 0.15) 40%,
338
+ transparent 70%
339
+ );
340
+ box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.15);
341
+ filter: blur(1px);
342
+ border-radius: 50%;
343
+ }
344
+
345
+ /* Left vertical: top-left corner \u2192 down */
346
+ .SuggestionItem-module_streaksVert_ERlV1::after {
347
+ content: "";
348
+ position: absolute;
349
+ top: 0;
350
+ left: -3px;
351
+ width: 6px;
352
+ height: 0;
353
+ background: radial-gradient(
354
+ ellipse at center,
355
+ rgba(255, 255, 255, 0.4) 0%,
356
+ rgba(255, 255, 255, 0.15) 40%,
357
+ transparent 70%
358
+ );
359
+ box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.15);
360
+ filter: blur(1px);
361
+ border-radius: 50%;
362
+ }
363
+
364
+ .SuggestionItem-module_pressed_98o-r .SuggestionItem-module_streaks_d9PEB::before {
365
+ animation: SuggestionItem-module_streakHorizRight_aboGz 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
366
+ }
367
+
368
+ .SuggestionItem-module_pressed_98o-r .SuggestionItem-module_streaks_d9PEB::after {
369
+ animation: SuggestionItem-module_streakHorizLeft_BreWJ 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
370
+ }
371
+
372
+ .SuggestionItem-module_pressed_98o-r .SuggestionItem-module_streaksVert_ERlV1::before {
373
+ animation: SuggestionItem-module_streakVertUp_to1GD 300ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards;
374
+ }
375
+
376
+ .SuggestionItem-module_pressed_98o-r .SuggestionItem-module_streaksVert_ERlV1::after {
377
+ animation: SuggestionItem-module_streakVertDown_OrcLh 300ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards;
378
+ }
379
+
380
+ /* Horizontal: bottom center-ish \u2192 right edge */
381
+ @keyframes SuggestionItem-module_streakHorizRight_aboGz {
382
+ 0% {
383
+ width: 0;
384
+ height: 4px;
385
+ opacity: 0;
386
+ filter: blur(1px);
387
+ box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
388
+ }
389
+ 15% {
390
+ height: 4px;
391
+ opacity: 1;
392
+ filter: blur(1px);
393
+ box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.3);
394
+ }
395
+ 80% {
396
+ width: 50%;
397
+ height: 10px;
398
+ opacity: 0.8;
399
+ filter: blur(3px);
400
+ box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.1);
401
+ }
402
+ 100% {
403
+ width: 50%;
404
+ height: 12px;
405
+ opacity: 0;
406
+ filter: blur(5px);
407
+ box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.03);
408
+ }
409
+ }
410
+
411
+ /* Horizontal: top center-ish \u2192 left edge */
412
+ @keyframes SuggestionItem-module_streakHorizLeft_BreWJ {
413
+ 0% {
414
+ width: 0;
415
+ height: 4px;
416
+ opacity: 0;
417
+ filter: blur(1px);
418
+ box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
419
+ }
420
+ 15% {
421
+ height: 4px;
422
+ opacity: 1;
423
+ filter: blur(1px);
424
+ box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.3);
425
+ }
426
+ 80% {
427
+ width: 50%;
428
+ height: 10px;
429
+ opacity: 0.8;
430
+ filter: blur(3px);
431
+ box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.1);
432
+ }
433
+ 100% {
434
+ width: 50%;
435
+ height: 12px;
436
+ opacity: 0;
437
+ filter: blur(5px);
438
+ box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.03);
439
+ }
440
+ }
441
+
442
+ /* Vertical segments start matching horizontal state at 200ms handoff */
443
+ @keyframes SuggestionItem-module_streakVertUp_to1GD {
444
+ 0% {
445
+ height: 0;
446
+ width: 6px;
447
+ opacity: 0.9;
448
+ filter: blur(1.8px);
449
+ box-shadow: 0 0 12px 5px rgba(255, 255, 255, 0.25);
450
+ }
451
+ 75% {
452
+ height: 100%;
453
+ width: 10px;
454
+ opacity: 0.4;
455
+ filter: blur(3px);
456
+ box-shadow: 0 0 18px 8px rgba(255, 255, 255, 0.06);
457
+ }
458
+ 100% {
459
+ height: 100%;
460
+ width: 14px;
461
+ opacity: 0;
462
+ filter: blur(5px);
463
+ box-shadow: 0 0 24px 10px rgba(255, 255, 255, 0.02);
464
+ }
465
+ }
466
+
467
+ @keyframes SuggestionItem-module_streakVertDown_OrcLh {
468
+ 0% {
469
+ height: 0;
470
+ width: 6px;
471
+ opacity: 0.9;
472
+ filter: blur(1.8px);
473
+ box-shadow: 0 0 12px 5px rgba(255, 255, 255, 0.25);
474
+ }
475
+ 75% {
476
+ height: 100%;
477
+ width: 10px;
478
+ opacity: 0.4;
479
+ filter: blur(3px);
480
+ box-shadow: 0 0 18px 8px rgba(255, 255, 255, 0.06);
481
+ }
482
+ 100% {
483
+ height: 100%;
484
+ width: 14px;
485
+ opacity: 0;
486
+ filter: blur(5px);
487
+ box-shadow: 0 0 24px 10px rgba(255, 255, 255, 0.02);
488
+ }
489
+ }
490
+ `,document.head.appendChild(e)}var W={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh"};var oe=require("react/jsx-runtime");function $e({option:e,isHighlighted:r,onSelect:t,onHighlight:o,id:n}){let[a,l]=(0,fe.useState)(!1),m=(0,fe.useRef)(void 0),d=()=>{!e.is_tappable||a||(l(!0),t(e),clearTimeout(m.current),m.current=setTimeout(()=>l(!1),400))},c=[W.item,r?W.highlighted:"",e.is_tappable?W.tappable:W.nonTappable,a?W.pressed:""].filter(Boolean).join(" ");return(0,oe.jsxs)("div",{id:n,role:"option","aria-selected":r,className:c,tabIndex:e.is_tappable?0:-1,onClick:d,onKeyDown:u=>{e.is_tappable&&(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),d())},onMouseEnter:o,children:[(0,oe.jsx)("div",{className:W.streaks}),(0,oe.jsx)("div",{className:W.streaksVert}),(0,oe.jsxs)("span",{className:W.content,children:[e.icon?`${e.icon} ${e.text}`:e.text,e.tag&&(0,oe.jsx)("span",{className:W.tag,children:e.tag})]})]})}var Ce=require("react/jsx-runtime");function De({options:e,activeIndex:r,onSelect:t,onHighlight:o,listboxId:n}){return(0,Ce.jsx)("div",{className:Ue.grid,children:e.map((a,l)=>(0,Ce.jsx)($e,{option:a,isHighlighted:l===r,onSelect:t,onHighlight:()=>o(l),id:`${n}-option-${l}`},a.text))})}var Re=require("react/jsx-runtime");function be({suggestions:e,activeIndex:r,onSelect:t,onHighlight:o,isOpen:n,id:a,className:l}){let d=e[0]?.options??[],c=n&&d.length>0;return(0,Re.jsx)("div",{id:a,role:"listbox",className:`${ke.dropdown} ${c?ke.visible:""} ${l??""}`,onMouseDown:u=>u.preventDefault(),children:d.length>0&&(0,Re.jsx)(De,{options:d,activeIndex:r,onSelect:t,onHighlight:o,listboxId:a})})}if(typeof document<"u"&&!document.getElementById("ac-style-b745b4fb")){let e=document.createElement("style");e.id="ac-style-b745b4fb",e.textContent=`.PillList-module_list_qvLqO {
174
491
  position: relative;
175
492
  z-index: 1;
176
493
  pointer-events: auto;
@@ -212,5 +529,5 @@
212
529
  opacity: 0;
213
530
  }
214
531
  }
215
- `,document.head.appendChild(e)}var le={list:"PillList-module_list_qvLqO",pill:"PillList-module_pill_osSyz",fadeIn:"PillList-module_fadeIn_Aezob",active:"PillList-module_active_Oll--"};var Pe=require("react/jsx-runtime");function st(e){return e===0?.4:e===1?.3:.15}function Ue({pills:e,activePillIndex:n,onSelectPill:t}){return(0,Pe.jsx)("span",{className:le.list,children:e.map((o,r)=>(0,Pe.jsx)("button",{type:"button",className:`${le.pill} ${r===n?le.active:""}`,style:{opacity:st(r)},onClick:()=>t(r),children:o.text},`${o.type}-${o.text}`))})}var p=require("react");function Y(e,n,t){let o=e.slice(n);if(t||n===0||e[n-1]===" ")return o;let r=o.indexOf(" ");return r===-1?"":o.slice(r+1)}function ce(e,n){if(!e)return[];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 re(e,n){if(!e)return null;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 De(e,n){let t=[],o=0;for(let i of n){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 r=e.slice(o);return r&&t.push({type:"text",value:r}),t}function Ke(e,n){let t=[],o=[],r=0;for(let i of n){let s=e.indexOf(i.text,r);s===-1?o.push(i):(t.push(i),r=s+i.text.length)}return{valid:t,invalid:o}}var R=require("react");var lt="0.1.14",je=!1;function ct(){return crypto.randomUUID()}function ut(e,n){return{placeholder:e.placeholder,type:e.type,...n&&{text:e.text},kind:e.kind}}async function ze(e,n,t){let o=t?.apiConfig,r=o?.apiKey??"";!r&&!je&&(je=!0,console.warn("[AIAutocomplete] No apiKey in apiConfig. Requests will be sent without an Authorization header."));let i=o?.authScheme??"Bearer",s=!t?.maskCompletedText,h=n.find(g=>g.type==="contact"&&g.metadata?.contact_account_count)?.metadata?.contact_account_count,m=typeof h=="number"?h:void 0,c={data:{raw_query:e,completed_params:n.map(g=>ut(g,s)),...m!=null&&{contact_account_count:m}},meta:{request_id:ct(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:lt}},u={"Content-Type":"application/json",...o?.appIdentifier&&{"X-App-Identifier":o.appIdentifier},...o?.headers};r&&(u.Authorization=i==="Basic"?`Basic ${btoa(r)}`:`Bearer ${r}`);let y=await fetch(o?.endpoint??"/ac/suggest",{method:"POST",headers:u,body:JSON.stringify(c),signal:t?.signal});if(!y.ok)throw new Error(`API error: ${y.status} ${y.statusText}`);return y.json()}function ee(e,n){let t=e,o={},r=[];for(let i of n){let s=(o[i.type]??0)+1;o[i.type]=s;let m=`{{${i.type.toUpperCase().replace(/\s+/g,"_")}_${s}}}`,c=t.indexOf(i.text);c!==-1&&(t=t.slice(0,c)+m+t.slice(c+i.text.length)),r.push({...i,placeholder:m})}return{rawQuery:t,completedParams:r}}function Fe(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 i=new Set(r.map(h=>h.text)),s=(t.options??[]).filter(h=>!i.has(h.text));return{...t,options:[...r,...s]}}):e}var pt=100,dt=300,mt=2;function qe({textRef:e,suggestionsRef:n,filterBaseRef:t,filterInProgressRef:o,maskCompletedTextRef:r,apiConfigRef:i,optionOverridesRef:s,onErrorRef:h,setCompletedParams:m,setSuggestions:c,setActiveDropdownIndex:u}){let[y,g]=(0,R.useState)(!1),[b,_]=(0,R.useState)(null),[x,v]=(0,R.useState)(!1),w=(0,R.useRef)(0),A=(0,R.useRef)(null),I=(0,R.useRef)(""),f=(0,R.useCallback)(async(d,a)=>{A.current?.abort();let l=new AbortController;A.current=l;let T=++w.current,k=e.current.length;n.current.some(L=>L.type!=="placeholder")||g(!0),_(null);try{let L=await ze(d,a,{maskCompletedText:r.current,signal:l.signal,apiConfig:i.current});if(T!==w.current)return;let j=Fe(L.data.suggestions??[],s.current);v(L.data.is_ready??!1),I.current=d;let U=L.data.input??[],M=U[U.length-1],D=e.current;if(M?.state==="in_progress"){o.current=!0;let N=D.toLowerCase().lastIndexOf(M.text.toLowerCase());N!==-1?t.current=N:t.current=k}else o.current=!1,t.current=k;let q=j.filter(N=>N.type!=="placeholder")[0];if(q){let N=Y(D,t.current,o.current),B=re(q.options,N);B&&(m(V=>[...V,{id:crypto.randomUUID(),placeholder:"",type:q.type,text:B.text,kind:B.kind,suggestionType:q.type,suggestionPlaceholder:q.text,options:q.options??[],metadata:B.metadata}]),j=j.filter(V=>V!==q))}c(j),g(!1),u(-1)}catch(L){if(T===w.current){let j=L instanceof Error?L:new Error(String(L));_(j),g(!1),h.current?.(j)}}},[e,n,t,o,r,i,s,h,m,c,u]);return(0,R.useEffect)(()=>(f("",[]),()=>{A.current?.abort()}),[f]),{doFetch:f,isLoading:y,error:b,isReady:x,lastRawQueryRef:I}}function Ne({text:e,completedParams:n,doFetch:t,filterBaseRef:o,filterInProgressRef:r,skipNextFetchRef:i,suggestionsRef:s,lastRawQueryRef:h}){let m=(0,R.useRef)(null),c=(0,R.useRef)(null),u=(0,R.useRef)(!0);(0,R.useEffect)(()=>{m.current&&clearTimeout(m.current),c.current&&clearTimeout(c.current);let y=g=>{if(i.current)return i.current=!1,!1;if(!e&&n.length===0)return u.current?(t("",[]),!0):(u.current=!0,!1);let b=Y(e,o.current,r.current),v=s.current.filter(k=>k.type!=="placeholder")[0],A=(v?ce(v.options,b):[]).filter(k=>k.is_tappable),I=v?re(v.options,b)!==null:!1,f=b.trim().length>0;if(A.length>0&&!I&&f)return!1;let{rawQuery:d,completedParams:a}=ee(e,n),l=d.length<h.current.length,T=Math.abs(d.length-h.current.length);return l||T>=g?(t(d,a),!0):!1};return m.current=setTimeout(()=>{y(mt)&&c.current&&clearTimeout(c.current)},pt),c.current=setTimeout(()=>y(1),dt),()=>{m.current&&clearTimeout(m.current),c.current&&clearTimeout(c.current)}},[e,n,t,o,r,i,s,h])}var Ce=require("react");function Qe({activeDropdownIndex:e,setActiveDropdownIndex:n,filteredOptions:t,selectOption:o,onSubmitRef:r,text:i,completedParams:s,isDropdownOpen:h,hasPlaceholder:m,placeholderText:c,suggestions:u,actionableSuggestions:y,setActivePill:g,filterBaseRef:b,columns:_,setText:x,setCompletedParams:v,setSuggestions:w}){let A=(0,Ce.useCallback)(()=>{let f=t.map((a,l)=>a.is_tappable?l:-1).filter(a=>a!==-1),d=Array.from({length:_},()=>[]);for(let a of f)d[a%_].push(a);return d.flat()},[t,_]);return{handleKeyDown:(0,Ce.useCallback)(f=>{let d=A();switch(f.key){case"ArrowDown":{if(f.preventDefault(),d.length===0)return;let a=d.indexOf(e),l=a<d.length-1?a+1:0;n(d[l]);break}case"ArrowUp":{if(f.preventDefault(),d.length===0)return;let a=d.indexOf(e),l=a>0?a-1:d.length-1;n(d[l]);break}case"ArrowRight":{if(e<0){let l=f.target;l.selectionStart!=null&&l.selectionStart===l.value.length&&y.length>1&&(f.preventDefault(),g(1));break}if(e%_<_-1){let l=e+1;l<t.length&&t[l]?.is_tappable&&(f.preventDefault(),n(l))}break}case"ArrowLeft":{if(e<0)break;if(e%_>0){let a=e-1;a>=0&&t[a]?.is_tappable&&(f.preventDefault(),n(a))}break}case"Enter":{if(f.preventDefault(),e>=0&&t[e]?.is_tappable)o(t[e]);else if(r.current){let{rawQuery:a,completedParams:l}=ee(i,s),T={query:i.trim(),raw_query:a,completed_params:l};r.current(T)}break}case"Tab":{if(e>=0&&t[e]?.is_tappable)f.preventDefault(),o(t[e]);else if(h){let a=t.find(l=>l.is_tappable);a&&(f.preventDefault(),o(a))}else if(!i&&m){f.preventDefault();let a=u.find(l=>l.type==="placeholder");a?(x(c),b.current=c.length,v(l=>[...l,{id:crypto.randomUUID(),placeholder:"",type:a.type,text:c,kind:null,suggestionType:a.type,suggestionPlaceholder:a.text,options:a.options??[]}]),w(l=>l.filter(T=>T!==a))):(x(c),b.current=c.length)}break}case"Escape":n(-1);break}},[y,e,_,s,t,b,A,m,h,r,c,o,n,g,v,w,x,u,i]),getTappableIndices:A}}var ue=require("react");function $e({completedParams:e,suggestions:n,setCompletedParams:t,setSuggestions:o,setActiveDropdownIndex:r,filterBaseRef:i,pillTappedRef:s}){let h=(0,ue.useCallback)(u=>{let y=n.filter(x=>x.type!=="placeholder");if(u<0||u>=y.length)return;let g=y[u],b=y.filter((x,v)=>v!==u),_=n.filter(x=>x.type==="placeholder");o([..._,g,...b]),s.current=!0,r(-1)},[n,o,r,s]),m=(0,ue.useCallback)(()=>{if(e.length===0)return;let u=e[e.length-1],y={type:u.suggestionType,text:u.suggestionPlaceholder,required:!0,options:u.options};t(g=>g.slice(0,-1)),o(g=>[y,...g]),r(-1)},[e,t,o,r]),c=(0,ue.useCallback)(u=>{let y={type:u.suggestionType,text:u.suggestionPlaceholder,required:!0,options:u.options};return{apply:g=>{g(b=>{let _=0;for(let x of e){let v=b.indexOf(x.text,_);if(v!==-1){if(x.id===u.id){let w=b.slice(0,v),A=b.slice(v+u.text.length),I=(w+A).replace(/ {2,}/g," ");return i.current=Math.min(i.current,I.length),I}_=v+x.text.length}}return b}),t(b=>b.filter(_=>_.id!==u.id)),o(b=>[y,...b]),r(-1),s.current=!0}}},[e,t,o,r,i,s]);return{setActivePill:h,removeLastParam:m,reEditParam:c}}var gt=0;function ft(){let e=(0,p.useRef)(null);return e.current===null&&(e.current=`:ac-${++gt}:`),e.current}function pe({onSubmit:e,onError:n,optionOverrides:t,maskCompletedText:o,placeholder:r,apiConfig:i,columns:s=2,eagerSuggestions:h=!0,value:m,completedParams:c,onChange:u,onParamsChange:y}){let g=m!==void 0,b=c!==void 0,[_,x]=(0,p.useState)(""),[v,w]=(0,p.useState)([]),[A,I]=(0,p.useState)([]),[f,d]=(0,p.useState)(-1),a=g?m:_,l=b?c:v,T=(0,p.useRef)(e);T.current=e;let k=(0,p.useRef)(u);k.current=u;let $=(0,p.useRef)(y);$.current=y;let L=(0,p.useRef)(m);L.current=m;let j=(0,p.useRef)(c);j.current=c;let U=(0,p.useCallback)(S=>{if(typeof S=="function")if(g){let C=S(L.current??"");k.current?.(C)}else x(C=>{let H=S(C);return k.current?.(H),H});else g||x(S),k.current?.(S)},[g]),M=(0,p.useCallback)(S=>{if(typeof S=="function")if(b){let C=S(j.current??[]);$.current?.(C)}else w(C=>{let H=S(C);return $.current?.(H),H});else b||w(S),$.current?.(S)},[b]),D=(0,p.useRef)(n);D.current=n;let W=(0,p.useRef)(t);W.current=t;let q=(0,p.useRef)(o);q.current=o;let N=(0,p.useRef)(i);N.current=i;let B=(0,p.useRef)(a);B.current=a;let V=(0,p.useRef)(A);V.current=A;let z=(0,p.useRef)(0),te=(0,p.useRef)(!1),ie=(0,p.useRef)(!1),Ie=(0,p.useRef)(!1),de=ft(),{doFetch:me,isLoading:we,error:He,isReady:We,lastRawQueryRef:ge}=qe({textRef:B,suggestionsRef:V,filterBaseRef:z,filterInProgressRef:te,maskCompletedTextRef:q,apiConfigRef:N,optionOverridesRef:W,onErrorRef:D,setCompletedParams:M,setSuggestions:I,setActiveDropdownIndex:d});Ne({text:a,completedParams:l,doFetch:me,filterBaseRef:z,filterInProgressRef:te,skipNextFetchRef:Ie,suggestionsRef:V,lastRawQueryRef:ge});let Ve=(0,p.useMemo)(()=>De(a,l),[a,l]);z.current=Math.min(z.current,a.length);let fe=Y(a,z.current,te.current),be=(0,p.useMemo)(()=>A.filter(C=>C.type==="placeholder").map(C=>C.text).join(" ")||r||"",[A,r]),oe=(0,p.useMemo)(()=>A.filter(S=>S.type!=="placeholder"),[A]),P=oe[0],Oe=P?t?.[P.type]:void 0,Re=P?Oe?Oe(fe.trim()):P.options??[]:[],he=(0,p.useMemo)(()=>ce(Re,fe),[Re,fe]),ke=be.length>0,ye=!we&&he.length>0&&(!!a||ie.current||!ke),Me=(0,p.useCallback)(S=>{if(!P)return;let C={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},H=z.current,K=B.current.slice(0,H);if(K.length>0&&!K.endsWith(" ")){let O=K.split(/\s+/).pop()??"";O&&S.text.toLowerCase().startsWith(O.toLowerCase())&&(K=K.slice(0,K.length-O.length))}let Se=K.length>0&&K[K.length-1]!==" ",Z=K+(Se?" ":"")+S.text+" ";U(Z),z.current=Z.length,M(O=>[...O,C]),ie.current=!1,d(-1);let G=oe.length-1;h&&G>0?(I(O=>O.filter(X=>X!==P)),Ie.current=!0):I(O=>O.filter(X=>X.type==="placeholder"))},[P,oe,h,U,M]),Ge=(0,p.useCallback)(S=>{let C=S.target.value,K=C.length>0&&!S.nativeEvent?.isComposing&&C[0]!==C[0].toUpperCase()?C[0].toUpperCase()+C.slice(1):C;U(K),ie.current=!1,d(-1);let{valid:Se,invalid:Z}=Ke(K,l);if(Z.length>0){M(()=>Se);for(let G of Z)I(O=>[{type:G.suggestionType,text:G.suggestionPlaceholder,required:!0,options:G.options},...O])}if(P&&Z.length===0){let G=Y(K,z.current,te.current),O=re(P.options,G);O&&(M(X=>[...X,{id:crypto.randomUUID(),placeholder:"",type:P.type,text:O.text,kind:O.kind,suggestionType:P.type,suggestionPlaceholder:P.text,options:P.options??[],metadata:O.metadata}]),I(X=>X.filter(et=>et!==P)))}},[l,P,U,M]),ne=$e({completedParams:l,suggestions:A,setCompletedParams:M,setSuggestions:I,setActiveDropdownIndex:d,filterBaseRef:z,pillTappedRef:ie}),Xe=(0,p.useCallback)(S=>{ne.reEditParam(S).apply(U)},[ne,U]),{handleKeyDown:Ze}=Qe({activeDropdownIndex:f,setActiveDropdownIndex:d,filteredOptions:he,selectOption:Me,onSubmitRef:T,text:a,completedParams:l,isDropdownOpen:ye,hasPlaceholder:ke,placeholderText:be,suggestions:A,actionableSuggestions:oe,setActivePill:ne.setActivePill,filterBaseRef:z,columns:s,setText:U,setCompletedParams:M,setSuggestions:I}),Je=(0,p.useCallback)(()=>{U(""),M(()=>[]),I([]),d(-1),z.current=0,te.current=!1,ge.current="",me("",[])},[me,U,M,ge]),Ye=f>=0?`${de}-option-${f}`:void 0;return{completedParams:l,suggestionPills:oe,setActivePill:ne.setActivePill,removeLastParam:ne.removeLastParam,reEditParam:Xe,segments:Ve,suggestions:A,activeIndex:f,isReady:We,isLoading:we,error:He,inputProps:{value:a,placeholder:be||void 0,onChange:Ge,onKeyDown:Ze,role:"combobox","aria-expanded":ye,"aria-activedescendant":Ye,"aria-autocomplete":"list","aria-controls":de},reset:Je,dropdownProps:{suggestions:P?[{...P,options:he}]:[],activeIndex:f,onSelect:Me,onHighlight:d,isOpen:ye,id:de}}}var E=require("react/jsx-runtime"),Be=(0,F.forwardRef)(function({onSubmit:n,onError:t,optionOverrides:o,maskCompletedText:r,placeholder:i,className:s,apiConfig:h,columns:m,eagerSuggestions:c,value:u,completedParams:y,onChange:g,onParamsChange:b},_){let x=(0,F.useRef)(null),v=(0,F.useRef)(()=>{});(0,F.useEffect)(()=>{x.current?.focus()},[]);let{completedParams:w,suggestionPills:A,setActivePill:I,segments:f,inputProps:d,dropdownProps:a,reset:l}=pe({onSubmit:D=>v.current(D),onError:t,optionOverrides:o,maskCompletedText:r,placeholder:i,apiConfig:h,columns:m,eagerSuggestions:c,value:u,completedParams:y,onChange:g,onParamsChange:b});(0,F.useImperativeHandle)(_,()=>({focus:()=>x.current?.focus(),reset:l}),[l]);let T=()=>{x.current?.focus()},k=!!d.value||w.length>0,$=(0,F.useCallback)(()=>{if(!k)return;let{rawQuery:D,completedParams:W}=ee(d.value,w);n({query:d.value.trim(),raw_query:D,completed_params:W}),l()},[k,d.value,w,n,l]);v.current=$;let{onChange:L,placeholder:j,...U}=d,M=!d.value;return(0,E.jsxs)("div",{className:`${Q.container} ${s??""}`,children:[(0,E.jsx)(se,{...a}),(0,E.jsxs)("div",{className:Q.inputWrapper,onClick:T,children:[(0,E.jsxs)("div",{className:Q.editorArea,children:[(0,E.jsxs)("div",{className:Q.sizerContent,"aria-hidden":"true",children:[M&&j?(0,E.jsxs)("span",{className:Q.placeholderText,children:[j," "]}):(0,E.jsxs)("span",{className:Q.sizerText,children:[f.map((D,W)=>(0,E.jsx)("span",{children:D.value},`${W}-${D.type}`)),f.length===0&&"\xA0"]})," ",(0,E.jsx)(Ue,{pills:A,activePillIndex:0,onSelectPill:I})]}),(0,E.jsx)("textarea",{ref:x,className:Q.textarea,rows:1,onChange:L,...U})]}),(0,E.jsx)("button",{type:"button",className:Q.submitButton,disabled:!k,onClick:D=>{D.stopPropagation(),$()},"aria-label":"Submit",children:(0,E.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,E.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
532
+ `,document.head.appendChild(e)}var he={list:"PillList-module_list_qvLqO",pill:"PillList-module_pill_osSyz",fadeIn:"PillList-module_fadeIn_Aezob",active:"PillList-module_active_Oll--"};var Oe=require("react/jsx-runtime");function dt(e){return e===0?.4:e===1?.3:.15}function He({pills:e,activePillIndex:r,onSelectPill:t}){return(0,Oe.jsx)("span",{className:he.list,children:e.map((o,n)=>(0,Oe.jsx)("button",{type:"button",className:`${he.pill} ${n===r?he.active:""}`,style:{opacity:dt(n)},onClick:()=>t(n),children:o.text},`${o.type}-${o.text}`))})}var p=require("react");function ae(e,r,t){let o=e.slice(r);if(t||r===0||e[r-1]===" ")return o;let n=o.indexOf(" ");return n===-1?"":o.slice(n+1)}function xe(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 me(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 Ne(e,r){let t=[],o=0;for(let a of r){let l=e.indexOf(a.text,o);l!==-1&&(l>o&&t.push({type:"text",value:e.slice(o,l)}),t.push({type:"completed",value:a.text,param:a}),o=l+a.text.length)}let n=e.slice(o);return n&&t.push({type:"text",value:n}),t}function Ve(e,r){let t=[],o=[],n=0;for(let a of r){let l=e.indexOf(a.text,n);l===-1?o.push(a):(t.push(a),n=l+a.text.length)}return{valid:t,invalid:o}}var U=require("react");var mt="0.1.16",je=!1;function gt(){return crypto.randomUUID()}function ft(e,r){return{placeholder:e.placeholder,type:e.type,...r&&{text:e.text},kind:e.kind}}async function Be(e,r,t){let o=t?.apiConfig,n=o?.apiKey??"";!n&&!je&&(je=!0,console.warn("[AIAutocomplete] No apiKey in apiConfig. Requests will be sent without an Authorization header."));let a=o?.authScheme??"Bearer",l=!t?.maskCompletedText,m=r.find(f=>f.type==="contact"&&f.metadata?.contact_account_count)?.metadata?.contact_account_count,d=typeof m=="number"?m:void 0,c={data:{raw_query:e,completed_params:r.map(f=>ft(f,l)),...d!=null&&{contact_account_count:d}},meta:{request_id:gt(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:mt}},u={"Content-Type":"application/json",...o?.appIdentifier&&{"X-App-Identifier":o.appIdentifier},...o?.headers};n&&(u.Authorization=a==="Basic"?`Basic ${btoa(n)}`:`Bearer ${n}`);let g=await fetch(o?.endpoint??"/ac/suggest",{method:"POST",headers:u,body:JSON.stringify(c),signal:t?.signal});if(!g.ok)throw new Error(`API error: ${g.status} ${g.statusText}`);return g.json()}function se(e,r){let t=e,o={},n=[];for(let a of r){let l=(o[a.type]??0)+1;o[a.type]=l;let d=`{{${a.type.toUpperCase().replace(/\s+/g,"_")}_${l}}}`,c=t.indexOf(a.text);c!==-1&&(t=t.slice(0,c)+d+t.slice(c+a.text.length)),n.push({...a,placeholder:d})}return{rawQuery:t,completedParams:n}}function Ke(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 a=new Set(n.map(m=>m.text)),l=(t.options??[]).filter(m=>!a.has(m.text));return{...t,options:[...n,...l]}}):e}var bt=100,ht=300,xt=2;function qe({textRef:e,suggestionsRef:r,filterBaseRef:t,filterInProgressRef:o,maskCompletedTextRef:n,apiConfigRef:a,optionOverridesRef:l,onErrorRef:m,setCompletedParams:d,setSuggestions:c,setActiveDropdownIndex:u}){let[g,f]=(0,U.useState)(!1),[_,z]=(0,U.useState)(null),[w,b]=(0,U.useState)(!1),S=(0,U.useRef)(0),A=(0,U.useRef)(null),x=(0,U.useRef)(""),v=(0,U.useCallback)(async(B,I)=>{A.current?.abort();let P=new AbortController;A.current=P;let i=++S.current,s=e.current.length;r.current.some(L=>L.type!=="placeholder")||f(!0),z(null);try{let L=await Be(B,I,{maskCompletedText:n.current,signal:P.signal,apiConfig:a.current});if(i!==S.current)return;let O=Ke(L.data.suggestions??[],l.current);b(L.data.is_ready??!1),x.current=B;let ee=L.data.input??[],J=ee[ee.length-1],$=e.current;if(J?.state==="in_progress"){o.current=!0;let K=$.toLowerCase().lastIndexOf(J.text.toLowerCase());K!==-1?t.current=K:t.current=s}else o.current=!1,t.current=s;let V=O.filter(K=>K.type!=="placeholder")[0];if(V){let K=ae($,t.current,o.current),X=me(V.options,K);X&&(d(y=>[...y,{id:crypto.randomUUID(),placeholder:"",type:V.type,text:X.text,kind:X.kind,suggestionType:V.type,suggestionPlaceholder:V.text,options:V.options??[],metadata:X.metadata}]),O=O.filter(y=>y!==V))}c(O),f(!1),u(-1)}catch(L){if(i===S.current){let O=L instanceof Error?L:new Error(String(L));z(O),f(!1),m.current?.(O)}}},[e,r,t,o,n,a,l,m,d,c,u]);return(0,U.useEffect)(()=>(v("",[]),()=>{A.current?.abort()}),[v]),{doFetch:v,isLoading:g,error:_,isReady:w,lastRawQueryRef:x}}function Qe({text:e,completedParams:r,doFetch:t,filterBaseRef:o,filterInProgressRef:n,skipNextFetchRef:a,suggestionsRef:l,lastRawQueryRef:m}){let d=(0,U.useRef)(null),c=(0,U.useRef)(null),u=(0,U.useRef)(!0);(0,U.useEffect)(()=>{if(d.current&&clearTimeout(d.current),c.current&&clearTimeout(c.current),a.current){a.current=!1;return}let g=f=>{if(!e&&r.length===0)return u.current?(t("",[]),!0):(u.current=!0,!1);let _=ae(e,o.current,n.current),b=l.current.filter(s=>s.type!=="placeholder")[0],A=(b?xe(b.options,_):[]).filter(s=>s.is_tappable),x=b?me(b.options,_)!==null:!1,v=_.trim().length>0;if(A.length>0&&!x&&v)return!1;let{rawQuery:B,completedParams:I}=se(e,r),P=B.length<m.current.length,i=Math.abs(B.length-m.current.length);return P||i>=f?(t(B,I),!0):!1};return d.current=setTimeout(()=>{g(xt)&&c.current&&clearTimeout(c.current)},bt),c.current=setTimeout(()=>g(1),ht),()=>{d.current&&clearTimeout(d.current),c.current&&clearTimeout(c.current)}},[e,r,t,o,n,a,l,m])}var Te=require("react");function Ge({activeDropdownIndex:e,setActiveDropdownIndex:r,filteredOptions:t,selectOption:o,onSubmitRef:n,text:a,completedParams:l,isDropdownOpen:m,hasPlaceholder:d,placeholderText:c,suggestions:u,actionableSuggestions:g,setActivePill:f,listboxId:_,pillTappedRef:z,filterBaseRef:w,columns:b,setText:S,setCompletedParams:A,setSuggestions:x}){let v=(0,Te.useCallback)(()=>{let I=t.map((i,s)=>i.is_tappable?s:-1).filter(i=>i!==-1),P=Array.from({length:b},()=>[]);for(let i of I)P[i%b].push(i);return P.flat()},[t,b]);return{handleKeyDown:(0,Te.useCallback)(I=>{let P=v();switch(I.key){case"ArrowDown":{let i=I.target;if(!(i.selectionStart!=null&&i.selectionStart===i.value.length)&&e<0)break;if(I.preventDefault(),!m&&g.length>0){z.current=!0;let O=P[0];r(O??0);break}if(P.length===0)return;let C=P.indexOf(e),L=C<P.length-1?C+1:0;r(P[L]);break}case"ArrowUp":{if(P.length===0||e<0)break;if(I.preventDefault(),e<b){r(-1);break}let s=P.indexOf(e),C=s>0?s-1:P.length-1;r(P[C]);break}case"ArrowRight":{if(e<0){let s=I.target;s.selectionStart!=null&&s.selectionStart===s.value.length&&g.length>1&&(I.preventDefault(),f(1));break}if(e%b<b-1){let s=e+1;s<t.length&&t[s]?.is_tappable&&(I.preventDefault(),r(s))}break}case"ArrowLeft":{if(e<0)break;if(e%b>0){let i=e-1;i>=0&&t[i]?.is_tappable&&(I.preventDefault(),r(i))}break}case"Enter":{if(I.preventDefault(),e>=0&&t[e]?.is_tappable){let i=document.getElementById(`${_}-option-${e}`);i?i.click():o(t[e])}else if(n.current){let{rawQuery:i,completedParams:s}=se(a,l),C={query:a.trim(),raw_query:i,completed_params:s};n.current(C)}break}case"Tab":{if(e>=0&&t[e]?.is_tappable){I.preventDefault();let i=document.getElementById(`${_}-option-${e}`);i?i.click():o(t[e])}else if(m){let i=t.findIndex(s=>s.is_tappable);if(i>=0){I.preventDefault();let s=document.getElementById(`${_}-option-${i}`);s?s.click():o(t[i])}}else if(!a&&d){I.preventDefault();let i=u.find(s=>s.type==="placeholder");i?(S(c),w.current=c.length,A(s=>[...s,{id:crypto.randomUUID(),placeholder:"",type:i.type,text:c,kind:null,suggestionType:i.type,suggestionPlaceholder:i.text,options:i.options??[]}]),x(s=>s.filter(C=>C!==i))):(S(c),w.current=c.length)}break}case"Escape":r(-1);break}},[g,e,b,l,t,w,v,d,_,z,m,n,c,o,r,f,A,x,S,u,a]),getTappableIndices:v}}var ye=require("react");function We({completedParams:e,suggestions:r,setCompletedParams:t,setSuggestions:o,setActiveDropdownIndex:n,filterBaseRef:a,pillTappedRef:l}){let m=(0,ye.useCallback)(u=>{let g=r.filter(w=>w.type!=="placeholder");if(u<0||u>=g.length)return;let f=g[u],_=g.filter((w,b)=>b!==u),z=r.filter(w=>w.type==="placeholder");o([...z,f,..._]),l.current=!0,n(-1)},[r,o,n,l]),d=(0,ye.useCallback)(()=>{if(e.length===0)return;let u=e[e.length-1],g={type:u.suggestionType,text:u.suggestionPlaceholder,required:!0,options:u.options};t(f=>f.slice(0,-1)),o(f=>[g,...f]),n(-1)},[e,t,o,n]),c=(0,ye.useCallback)(u=>{let g={type:u.suggestionType,text:u.suggestionPlaceholder,required:!0,options:u.options};return{apply:f=>{f(_=>{let z=0;for(let w of e){let b=_.indexOf(w.text,z);if(b!==-1){if(w.id===u.id){let S=_.slice(0,b),A=_.slice(b+u.text.length),x=(S+A).replace(/ {2,}/g," ");return a.current=Math.min(a.current,x.length),x}z=b+w.text.length}}return _}),t(_=>_.filter(z=>z.id!==u.id)),o(_=>[g,..._]),n(-1),l.current=!0}}},[e,t,o,n,a,l]);return{setActivePill:m,removeLastParam:d,reEditParam:c}}var yt=0;function _t(){let e=(0,p.useRef)(null);return e.current===null&&(e.current=`:ac-${++yt}:`),e.current}function _e({onSubmit:e,onError:r,optionOverrides:t,maskCompletedText:o,placeholder:n,apiConfig:a,columns:l=2,value:m,completedParams:d,onChange:c,onParamsChange:u}){let g=m!==void 0,f=d!==void 0,[_,z]=(0,p.useState)(""),[w,b]=(0,p.useState)([]),[S,A]=(0,p.useState)([]),[x,v]=(0,p.useState)(-1),[B,I]=(0,p.useState)(null),P=(0,p.useCallback)(()=>I(null),[]),i=g?m:_,s=f?d:w,C=(0,p.useRef)(e);C.current=e;let L=(0,p.useRef)(c);L.current=c;let O=(0,p.useRef)(u);O.current=u;let ee=(0,p.useRef)(m);ee.current=m;let J=(0,p.useRef)(d);J.current=d;let $=(0,p.useCallback)(h=>{if(typeof h=="function")if(g){let R=h(ee.current??"");L.current?.(R)}else z(R=>{let T=h(R);return L.current?.(T),T});else g||z(h),L.current?.(h)},[g]),N=(0,p.useCallback)(h=>{if(typeof h=="function")if(f){let R=h(J.current??[]);O.current?.(R)}else b(R=>{let T=h(R);return O.current?.(T),T});else f||b(h),O.current?.(h)},[f]),V=(0,p.useRef)(r);V.current=r;let K=(0,p.useRef)(t);K.current=t;let X=(0,p.useRef)(o);X.current=o;let y=(0,p.useRef)(a);y.current=a;let H=(0,p.useRef)(i);H.current=i;let re=(0,p.useRef)(S);re.current=S;let M=(0,p.useRef)(0),q=(0,p.useRef)(!1),j=(0,p.useRef)(!1),le=(0,p.useRef)(!1),Z=_t(),{doFetch:ue,isLoading:Ee,error:Xe,isReady:Ze,lastRawQueryRef:Se}=qe({textRef:H,suggestionsRef:re,filterBaseRef:M,filterInProgressRef:q,maskCompletedTextRef:X,apiConfigRef:y,optionOverridesRef:K,onErrorRef:V,setCompletedParams:N,setSuggestions:A,setActiveDropdownIndex:v});Qe({text:i,completedParams:s,doFetch:ue,filterBaseRef:M,filterInProgressRef:q,skipNextFetchRef:le,suggestionsRef:re,lastRawQueryRef:Se});let Ye=(0,p.useMemo)(()=>Ne(i,s),[i,s]);M.current=Math.min(M.current,i.length);let Ae=ae(i,M.current,q.current),ne=(0,p.useMemo)(()=>S.filter(R=>R.type==="placeholder").map(R=>R.text).join(" ")||n||"",[S,n]),ce=(0,p.useMemo)(()=>S.filter(h=>h.type!=="placeholder"),[S]),k=ce[0],ze=k?t?.[k.type]:void 0,Le=k?ze?ze(Ae.trim()):k.options??[]:[],ve=(0,p.useMemo)(()=>xe(Le,Ae),[Le,Ae]),Me=ne.length>0,Ie=!Ee&&ve.length>0&&(!!i||j.current||!Me),Fe=(0,p.useCallback)(h=>{if(!k)return;let R=M.current,T=H.current.slice(0,R),ie=T.length===0&&H.current.length===0;if(ie&&ne&&(T=ne+" "),T.length>0&&!T.endsWith(" ")){let te=T.split(/\s+/).pop()??"";te&&h.text.toLowerCase().startsWith(te.toLowerCase())&&(T=T.slice(0,T.length-te.length))}let we=T.length>0&&T[T.length-1]!==" ",Y=T+(we?" ":"")+h.text+" ",Q=ie&&Y.length>0?Y[0].toUpperCase()+Y.slice(1):Y,G=Q.toLowerCase().lastIndexOf(h.text.toLowerCase()),de=G>=0?Q.slice(G,G+h.text.length):h.text,ge={id:crypto.randomUUID(),placeholder:"",type:k.type,text:de,kind:h.kind,suggestionType:k.type,suggestionPlaceholder:k.text,options:k.options??[],metadata:h.metadata};$(Q),M.current=Q.length,N(te=>[...te,ge]),I(ge.id),j.current=!1,v(-1),ce.length-1>0&&(le.current=!0),setTimeout(()=>{A(te=>te.filter(it=>it!==k))},400)},[k,ce,ne,$,N]),et=(0,p.useCallback)(h=>{let R=h.target.value,ie=R.length>0&&!h.nativeEvent?.isComposing&&R[0]!==R[0].toUpperCase()?R[0].toUpperCase()+R.slice(1):R;$(ie),j.current=!1,v(-1);let{valid:we,invalid:Y}=Ve(ie,s);if(Y.length>0){N(()=>we);for(let Q of Y)A(G=>[{type:Q.suggestionType,text:Q.suggestionPlaceholder,required:!0,options:Q.options},...G])}if(k&&Y.length===0){let Q=ae(ie,M.current,q.current),G=me(k.options,Q);G&&(N(de=>[...de,{id:crypto.randomUUID(),placeholder:"",type:k.type,text:G.text,kind:G.kind,suggestionType:k.type,suggestionPlaceholder:k.text,options:k.options??[],metadata:G.metadata}]),A(de=>de.filter(ge=>ge!==k)))}},[s,k,$,N]),pe=We({completedParams:s,suggestions:S,setCompletedParams:N,setSuggestions:A,setActiveDropdownIndex:v,filterBaseRef:M,pillTappedRef:j}),tt=(0,p.useCallback)(h=>{pe.reEditParam(h).apply($)},[pe,$]),{handleKeyDown:ot}=Ge({activeDropdownIndex:x,setActiveDropdownIndex:v,filteredOptions:ve,selectOption:Fe,onSubmitRef:C,text:i,completedParams:s,isDropdownOpen:Ie,hasPlaceholder:Me,placeholderText:ne,suggestions:S,actionableSuggestions:ce,setActivePill:pe.setActivePill,listboxId:Z,pillTappedRef:j,filterBaseRef:M,columns:l,setText:$,setCompletedParams:N,setSuggestions:A}),rt=(0,p.useCallback)(()=>{$(""),N(()=>[]),A([]),v(-1),M.current=0,q.current=!1,Se.current="",ue("",[])},[ue,$,N,Se]),nt=x>=0?`${Z}-option-${x}`:void 0;return{completedParams:s,suggestionPills:ce,setActivePill:pe.setActivePill,removeLastParam:pe.removeLastParam,reEditParam:tt,segments:Ye,newParamId:B,clearNewParamId:P,suggestions:S,activeIndex:x,isReady:Ze,isLoading:Ee,error:Xe,inputProps:{value:i,placeholder:ne||void 0,onChange:et,onKeyDown:ot,role:"combobox","aria-expanded":Ie,"aria-activedescendant":nt,"aria-autocomplete":"list","aria-controls":Z},reset:rt,dropdownProps:{suggestions:k?[{...k,options:ve}]:[],activeIndex:x,onSelect:Fe,onHighlight:v,isOpen:Ie,id:Z}}}var E=require("react/jsx-runtime"),Je=(0,D.forwardRef)(function({onSubmit:r,onError:t,optionOverrides:o,maskCompletedText:n,placeholder:a,className:l,apiConfig:m,columns:d,typewriterEffect:c=!0,value:u,completedParams:g,onChange:f,onParamsChange:_},z){let w=(0,D.useRef)(null),b=(0,D.useRef)(()=>{}),[S,A]=(0,D.useState)(0),x=(0,D.useRef)(void 0);(0,D.useEffect)(()=>(w.current?.focus(),()=>{x.current&&cancelAnimationFrame(x.current)}),[]);let{completedParams:v,suggestionPills:B,setActivePill:I,segments:P,newParamId:i,clearNewParamId:s,inputProps:C,dropdownProps:L,reset:O}=_e({onSubmit:y=>b.current(y),onError:t,optionOverrides:o,maskCompletedText:n,placeholder:a,apiConfig:m,columns:d,value:u,completedParams:g,onChange:f,onParamsChange:_});(0,D.useEffect)(()=>{if(x.current&&cancelAnimationFrame(x.current),!i){A(0);return}let y=v.find(j=>j.id===i);if(!y)return;let H=y.text.length;if(!c){A(H);let j=window.setTimeout(()=>s(),650);return()=>window.clearTimeout(j)}A(0);let re=performance.now(),M=300,q=()=>{let j=performance.now()-re,le=Math.min(j/M,1),Z=Math.ceil(le*H);A(Z),Z<H?x.current=requestAnimationFrame(q):x.current=requestAnimationFrame(()=>{s()})};return x.current=requestAnimationFrame(q),()=>{x.current&&cancelAnimationFrame(x.current)}},[i,v,s,c]),(0,D.useImperativeHandle)(z,()=>({focus:()=>w.current?.focus(),reset:O}),[O]);let ee=()=>{w.current?.focus()},J=!!C.value||v.length>0,$=(0,D.useCallback)(()=>{if(!J)return;let{rawQuery:y,completedParams:H}=se(C.value,v);r({query:C.value.trim(),raw_query:y,completed_params:H}),O()},[J,C.value,v,r,O]);b.current=$;let{onChange:N,placeholder:V,...K}=C,X=!C.value;return(0,E.jsxs)("div",{className:`${F.container} ${l??""}`,children:[(0,E.jsx)(be,{...L}),(0,E.jsxs)("div",{className:F.inputWrapper,onClick:ee,children:[(0,E.jsxs)("div",{className:F.editorArea,children:[(0,E.jsxs)("div",{className:F.sizerContent,"aria-hidden":"true",children:[X&&V?(0,E.jsxs)("span",{className:F.placeholderText,children:[V," "]}):(0,E.jsxs)("span",{className:`${F.sizerText} ${i?F.sizerTextVisible:""}`,children:[P.map((y,H)=>{if(y.type==="completed"&&y.param.id===i){if(!c){let ue=`${F.shimmerRevealed} ${F.shimmerSweep}`;return(0,E.jsx)("span",{className:ue,children:y.value},`${H}-${y.type}`)}let M=y.value.length,q=y.value.slice(0,S),j=y.value.slice(S),Z=`${100-(M>0?S/M:0)*100}% 0`;return(0,E.jsxs)("span",{className:F.shimmer,children:[(0,E.jsx)("span",{className:F.shimmerRevealed,style:{backgroundPosition:Z},children:q}),(0,E.jsx)("span",{className:F.shimmerHidden,children:j})]},`${H}-${y.type}`)}return(0,E.jsx)("span",{children:y.value},`${H}-${y.type}`)}),P.length===0&&"\xA0"]})," ",(0,E.jsx)(He,{pills:B,activePillIndex:0,onSelectPill:I})]}),(0,E.jsx)("textarea",{ref:w,className:`${F.textarea} ${i?F.textareaHidden:""}`,rows:1,onChange:N,...K})]}),(0,E.jsx)("button",{type:"button",className:F.submitButton,disabled:!J,onClick:y=>{y.stopPropagation(),$()},"aria-label":"Submit",children:(0,E.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,E.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
216
533
  //# sourceMappingURL=index.js.map