{"version":3,"sources":["../src/components/ai-textarea/ai-textarea.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"https://cdn.vn.ai/docs/vn-sdk/images/AiTextarea.gif\" width=\"500\" />\n *\n * `<AiTextarea>` is a React component that acts as a drop-in replacement for the standard `<textarea>`,\n *  offering enhanced autocomplete features powered by AI. It is context-aware, integrating seamlessly with the\n * [`useAiReadable`](/reference/hooks/useAiReadable) hook to provide intelligent suggestions based on the application context.\n *\n * In addition, it provides a hovering editor window (available by default via `Cmd + K` on Mac and `Ctrl + K` on Windows) that allows the user to\n * suggest changes to the text, for example providing a summary or rephrasing the text.\n *\n * ## Example\n *\n * ```tsx\n * import { AiTextarea } from '@vn-sdk/react-textarea';\n * import \"@vn-sdk/react-textarea/styles.css\";\n *\n * <AiTextarea\n *   autosuggestionsConfig={{\n *     textareaPurpose:\n *      \"the body of an email message\",\n *     chatApiConfigs: {},\n *   }}\n * />\n * ```\n *\n * ## Usage\n *\n * ### Install Dependencies\n *\n * This component is part of the [@vn-sdk/react-textarea](https://npmjs.com/package/@vn-sdk/react-textarea) package.\n *\n * ```shell npm2yarn \\\"@vn-sdk/react-textarea\"\\\n * npm install @vn-sdk/react-core @vn-sdk/react-textarea\n * ```\n *\n * ### Usage\n *\n * Use the AiTextarea component in your React application similarly to a standard `<textarea />`,\n * with additional configurations for AI-powered features.\n *\n * For example:\n *\n * ```tsx\n * import { useState } from \"react\";\n * import { AiTextarea } from \"@vn-sdk/react-textarea\";\n * import \"@vn-sdk/react-textarea/styles.css\";\n *\n * export function ExampleComponent() {\n *   const [text, setText] = useState(\"\");\n *\n *   return (\n *     <AiTextarea\n *       className=\"custom-textarea-class\"\n *       value={text}\n *       onValueChange={(value: string) => setText(value)}\n *       placeholder=\"Enter your text here...\"\n *       autosuggestionsConfig={{\n *         textareaPurpose: \"Provide context or purpose of the textarea.\",\n *         chatApiConfigs: {\n *           suggestionsApiConfig: {\n *             maxTokens: 20,\n *             stop: [\".\", \"?\", \"!\"],\n *           },\n *         },\n *       }}\n *     />\n *   );\n * }\n * ```\n *\n * ### Look & Feel\n *\n * By default, VN SDK components do not have any styles. You can import VN SDK's stylesheet at the root of your project:\n * ```tsx title=\"YourRootComponent.tsx\"\n * ...\n * import \"@vn-sdk/react-textarea/styles.css\"; // [!code highlight]\n *\n * export function YourRootComponent() {\n *   return (\n *     <AiProvider>\n *       ...\n *     </AiProvider>\n *   );\n * }\n * ```\n * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.\n * */\nimport React from \"react\";\nimport { useMakeStandardAutosuggestionFunction } from \"../../hooks/make-autosuggestions-function/use-make-standard-autosuggestions-function\";\nimport { HTMLAiTextAreaElement } from \"../../types\";\nimport { BaseAiTextareaProps } from \"../../types/base/base-ai-textarea-props\";\nimport {\n  AutosuggestionsConfig,\n  defaultAutosuggestionsConfig,\n} from \"../../types/autosuggestions-config\";\nimport { BaseAiTextarea } from \"../base-ai-textarea/base-ai-textarea\";\nimport { useMakeStandardInsertionOrEditingFunction } from \"../../hooks/make-autosuggestions-function/use-make-standard-insertion-function\";\nimport merge from \"lodash.merge\";\nimport { AutosuggestionsConfigUserSpecified } from \"../../types/autosuggestions-config/autosuggestions-config-user-specified\";\n\n// Like the base copilot textarea props,\n// but with baseAutosuggestionsConfig replaced with autosuggestionsConfig.\nexport interface AiTextareaProps\n  extends Omit<BaseAiTextareaProps, \"baseAutosuggestionsConfig\"> {\n  /**\n   * Configuration settings for the autosuggestions feature.\n   * For full reference, [check the interface on GitHub](https://github.com/VN SDK/VN SDK/blob/main/VN SDK/packages/react-textarea/src/types/base/base-ai-textarea-props.tsx#L8).\n   *\n   * <PropertyReference name=\"textareaPurpose\" type=\"string\" required={true} >\n   *   The purpose of the text area in plain text.\n   *\n   *   Example: *\"The body of the email response\"*\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"chatApiConfigs\" type=\"ChatApiConfigs\" >\n   *   The chat API configurations.\n   *\n   *   <strong>NOTE:</strong> You must provide specify at least one of `suggestionsApiConfig` or `insertionApiConfig`.\n   *\n   *   <PropertyReference name=\"suggestionsApiConfig\" type=\"SuggestionsApiConfig\">\n   *       For full reference, please [click here](https://github.com/VN SDK/VN SDK/blob/main/VN SDK/packages/react-textarea/src/types/autosuggestions-config/suggestions-api-config.tsx#L4).\n   *   </PropertyReference>\n   *   <PropertyReference name=\"insertionApiConfig\" type=\"InsertionApiConfig\">\n   *       For full reference, please [click here](https://github.com/VN SDK/VN SDK/blob/main/VN SDK/packages/react-textarea/src/types/autosuggestions-config/insertions-api-config.tsx#L4).\n   *   </PropertyReference>\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"disabled\" type=\"boolean\" >\n   *   Whether the textarea is disabled.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"disableBranding\" type=\"boolean\" >\n   *   Whether to disable the VN SDK branding.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"placeholderStyle\" type=\"React.CSSProperties\" >\n   *   Specifies the CSS styles to apply to the placeholder text.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"suggestionsStyle\" type=\"React.CSSProperties\" >\n   *   Specifies the CSS styles to apply to the suggestions list.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"hoverMenuClassname\" type=\"string\" >\n   *   A class name to apply to the editor popover window.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"value\" type=\"string\" >\n   *   The initial value of the textarea. Can be controlled via `onValueChange`.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"onValueChange\" type=\"(value: string) => void\" >\n   *   Callback invoked when the value of the textarea changes.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"onChange\" type=\"(event: React.ChangeEvent<HTMLTextAreaElement>) => void\" >\n   *   Callback invoked when a `change` event is triggered on the textarea element.\n   * </PropertyReference>\n   *\n   * <PropertyReference name=\"shortcut\" type=\"string\" >\n   *   The shortcut to use to open the editor popover window. Default is `\"Cmd-k\"`.\n   * </PropertyReference>\n   */\n  autosuggestionsConfig: AutosuggestionsConfigUserSpecified;\n}\n\n/**\n * A copilot textarea that uses the standard autosuggestions function.\n */\nexport const AiTextarea = React.forwardRef(\n  (props: AiTextareaProps, ref: React.Ref<HTMLAiTextAreaElement>) => {\n    // separate the AutosuggestionsConfigUserSpecified from the rest of the props\n    const { autosuggestionsConfig: autosuggestionsConfigUserSpecified, ...forwardedProps } = props;\n\n    const autosuggestionsConfig: AutosuggestionsConfig = merge(\n      defaultAutosuggestionsConfig,\n      autosuggestionsConfigUserSpecified,\n    );\n\n    const autosuggestionsFunction = useMakeStandardAutosuggestionFunction(\n      autosuggestionsConfig.textareaPurpose,\n      autosuggestionsConfig.contextCategories,\n      autosuggestionsConfig.chatApiConfigs.suggestionsApiConfig,\n    );\n\n    const insertionOrEditingFunction = useMakeStandardInsertionOrEditingFunction(\n      autosuggestionsConfig.textareaPurpose,\n      autosuggestionsConfig.contextCategories,\n      autosuggestionsConfig.chatApiConfigs.insertionApiConfig,\n      autosuggestionsConfig.chatApiConfigs.editingApiConfig,\n    );\n\n    return (\n      <>\n        <BaseAiTextarea\n          ref={ref}\n          {...forwardedProps}\n          baseAutosuggestionsConfig={{\n            ...autosuggestionsConfig,\n            apiConfig: {\n              insertionOrEditingFunction: insertionOrEditingFunction,\n              autosuggestionsFunction: autosuggestionsFunction,\n            },\n          }}\n        />\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwFA,OAAO,WAAW;AAUlB,OAAO,WAAW;AAgGZ,mBACE,WADF;AAxBC,IAAM,aAAa,MAAM;AAAA,EAC9B,CAAC,OAAwB,QAA0C;AAEjE,UAAyF,YAAjF,yBAAuB,mCA7KnC,IA6K6F,IAAnB,2BAAmB,IAAnB,CAA9D;AAER,UAAM,wBAA+C;AAAA,MACnD;AAAA,MACA;AAAA,IACF;AAEA,UAAM,0BAA0B;AAAA,MAC9B,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,sBAAsB,eAAe;AAAA,IACvC;AAEA,UAAM,6BAA6B;AAAA,MACjC,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,sBAAsB,eAAe;AAAA,MACrC,sBAAsB,eAAe;AAAA,IACvC;AAEA,WACE,gCACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,SACI,iBAFL;AAAA,QAGC,2BAA2B,iCACtB,wBADsB;AAAA,UAEzB,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;","names":[]}