@brainfish-ai/components 0.0.1

package/.vscode /extensions.json

@@ -0,0 +1,3 @@
+{
+
+}

package/.vscode /settings.json

@@ -0,0 +1,4 @@
+{
+  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
+  "typescript.tsdk": "./node_modules/typescript/lib"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Kai Hotz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,121 @@
+# Brainfish Components
+
+Brainfish Components is a React component library starter kit, that helps you to create your own React component library with ease.
+
+## Getting started
+
+```
+yarn install
+```
+
+## Developing
+
+To start the developing run :
+
+```
+yarn start
+```
+
+This will build a version of your library, run the watcher and also run Storybook.
+To open Storybook manually open your Browser and navigate to [http://localhost:6060](http://localhost:6060).
+Start developing your components in `src/components` folder and update the `src/index.js` file accordingly.
+Always provide an `YourComponent.story.tsx` file, so your component will show up in Storybook.
+
+You can refer to example `Button` component, but I think you'll get the idea.
+
+## Linting and Code formating for Typescript
+
+Linting and code formating is done via [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) using [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) and
+[eslint-config-prettier](https://github.com/prettier/eslint-config-prettier).
+You can modify linting rules by overriding them in the `.eslintrc.cjs` file.
+
+```
+yarn lint
+```
+
+or (if automatic fixing is possible)
+
+```
+yarn lint:fix
+```
+
+## Testing
+
+Testing is done with [Vitest](https://vitest.dev/) and [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/)
+You can refer to `Button.test.js` as an example.
+
+```
+yarn test
+```
+
+## Publishing your library to NPM
+
+To release your library to NPM or your private Registry, make sure you have an active account at [NPM](https://www.npmjs.com/), your `.npmrc` file is correctly setup and the registry url at publishConfig in `package.json` file is set to your repository url, then:
+
+```
+yarn release
+```
+
+## Storybook
+
+For custom layouts, styling and more information about Storybook, please refer to [Storybook](https://storybook.js.org/basics/writing-stories/) documentation.
+
+#### Deploy Storybook to GitHub Pages
+
+Make sure the homepage url in `package.json` file is set to your githup pages url, then:
+
+```
+yarn deploy
+```
+
+## Scripts
+
+- `yarn start` : Only serves Storybook.
+- `yarn build` : Builds your library (build can be found in `dist` folder).
+- `yarn storybook:build` : Builds the static Storybook in case you want to deploy it.
+- `yarn test` : Runs the tests.
+- `yarn test:coverage`: Runs the test and shows the coverage.
+- `yarn lint` : Runs the linter, Typescript typecheck and stylelint.
+- `yarn lint:fix` : Runs the linter, Typescript typecheck and stylelint and fixes automatic fixable issues.
+- `yarn eslint`: Runs only the JavaScript linter.
+- `yarn eslint:fix`: Runs only the JavaScript linter and fixes automatic fixable issues.
+- `yarn stylelint`: Runs only the style linter.
+- `yarn stylelint:fix`: Runs only the style linter and fixes automatic fixable issues.
+- `yarn check-types`: Runs typescript type checker.
+- `yarn ci`: Runs Linting, tests and type checker all together.
+- `yarn release` : Publishes your Library on NPM or your private Registry (depending on your config in your `.npmrc` file).
+- `yarn storybook`: Same as yarn start, to serve storybook.
+- `yarn storybook:build`: Generates the build for storybook in `storybook-static` folder, that can be deployed wherever you need.
+- `yarn storybook:deploy`: Builds and deploys Storybook to GitHub Pages.
+
+## Resources
+
+### Bundler
+
+- [Rollup.js](https://rollupjs.org/guide/en)
+
+### Code Formatter
+
+- [Prettier](https://prettier.io/)
+
+### Storybook
+
+- [Storybook](https://storybook.js.org/)
+
+### Testing
+
+- [Vitest](https://vitest.dev/)
+- [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/)
+- [@testing-library/jest-dom](https://github.com/testing-library/jest-dom)
+
+### Linting
+
+- [ESLint](https://eslint.org/)
+- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
+- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)
+- [stylelint-prettier](https://github.com/prettier/stylelint-prettier)
+- [stylelint-scss](https://github.com/kristerkari/stylelint-scss)
+
+### Compiler
+
+- [Typescript](https://www.typescriptlang.org/)

package/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package/dist/cjs/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),t=require("lucide-react"),r=require("framer-motion"),a=require("react-markdown"),n=require("remark-gfm"),o=require("react/jsx-runtime"),l=require("class-variance-authority"),s=require("clsx"),i=require("tailwind-merge"),c=require("@radix-ui/react-dropdown-menu"),d=require("@radix-ui/react-icons");function m(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=m(e),p=m(c);function f(e,t){var r={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(r[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(a=Object.getOwnPropertySymbols(e);n<a.length;n++)t.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(r[a[n]]=e[a[n]])}return r}function h(e,t,r,a){return new(r||(r=Promise))((function(n,o){function l(e){try{i(a.next(e))}catch(e){o(e)}}function s(e){try{i(a.throw(e))}catch(e){o(e)}}function i(e){var t;e.done?n(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(l,s)}i((a=a.apply(e,t||[])).next())}))}function y(e,t){if("function"==typeof e)return e(t);null!=e&&(e.current=t)}function g(...e){return t=>{let r=!1;const a=e.map((e=>{const a=y(e,t);return r||"function"!=typeof a||(r=!0),a}));if(r)return()=>{for(let t=0;t<a.length;t++){const r=a[t];"function"==typeof r?r():y(e[t],null)}}}}"function"==typeof SuppressedError&&SuppressedError;var b=u.forwardRef(((e,t)=>{const{children:r,...a}=e,n=u.Children.toArray(r),l=n.find(w);if(l){const e=l.props.children,r=n.map((t=>t===l?u.Children.count(e)>1?u.Children.only(null):u.isValidElement(e)?e.props.children:null:t));return o.jsx(v,{...a,ref:t,children:u.isValidElement(e)?u.cloneElement(e,void 0,r):null})}return o.jsx(v,{...a,ref:t,children:r})}));b.displayName="Slot";var v=u.forwardRef(((e,t)=>{const{children:r,...a}=e;if(u.isValidElement(r)){const e=function(e){let t=Object.getOwnPropertyDescriptor(e.props,"ref")?.get,r=t&&"isReactWarning"in t&&t.isReactWarning;if(r)return e.ref;if(t=Object.getOwnPropertyDescriptor(e,"ref")?.get,r=t&&"isReactWarning"in t&&t.isReactWarning,r)return e.props.ref;return e.props.ref||e.ref}(r);return u.cloneElement(r,{...E(a,r.props),ref:t?g(t,e):e})}return u.Children.count(r)>1?u.Children.only(null):null}));v.displayName="SlotClone";var x=({children:e})=>o.jsx(o.Fragment,{children:e});function w(e){return u.isValidElement(e)&&e.type===x}function E(e,t){const r={...t};for(const a in t){const n=e[a],o=t[a];/^on[A-Z]/.test(a)?n&&o?r[a]=(...e)=>{o(...e),n(...e)}:n&&(r[a]=n):"style"===a?r[a]={...n,...o}:"className"===a&&(r[a]=[n,o].filter(Boolean).join(" "))}return{...e,...r}}function N(...e){return i.twMerge(s.clsx(e))}const k=l.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),C=u.forwardRef(((e,t)=>{var{className:r,variant:a,size:n,asChild:o=!1}=e,l=f(e,["className","variant","size","asChild"]);const s=o?b:"button";return u.createElement(s,Object.assign({className:N(k({variant:a,size:n,className:r})),ref:t},l))}));function j({answer:r,question:o,theme:l,searchResults:s,followUpQuestions:i,onFollowUpClick:c}){const[d,m]=e.useState(null),[u,p]=e.useState(!1),f=({className:t,children:r,theme:a})=>!/language-(\w+)/.exec(t||"")?e.createElement("code",{className:`${t} rounded px-1`,style:{backgroundColor:`${a.border}20`}},r):e.createElement("pre",{className:"rounded-md p-4",style:{backgroundColor:`${a.border}20`}},e.createElement("code",{className:t},r));return e.createElement("div",{className:"space-y-6"},e.createElement("div",{className:"rounded-xl",style:{borderColor:l.border,borderWidth:"1px",borderStyle:"solid"}},e.createElement("div",{className:"p-6 space-y-4"},e.createElement("div",{className:"flex items-start justify-between"},e.createElement("div",{className:"flex items-center gap-2"},e.createElement(t.Sparkles,{className:"h-5 w-5",style:{color:l.primary}}),e.createElement("h2",{className:"text-xl",style:{color:l.text}},o)),r&&e.createElement(C,{variant:"ghost",size:"icon",className:"hover:opacity-90 transition-colors duration-200",style:{color:l.text},onClick:()=>{navigator.clipboard.writeText(`${o}\n\n${r}`)}},e.createElement(t.Copy,{className:"h-5 w-4"}))),r&&e.createElement("div",{className:"prose prose-sm max-w-none",style:{color:l.text}},e.createElement(a,{remarkPlugins:[n],components:{img:t=>e.createElement("img",Object.assign({},t,{className:"rounded-lg shadow-md my-4",alt:t.alt||""})),code:({className:t,children:r})=>e.createElement(f,{className:t,theme:l},r)}},r)),r&&i&&i.length>0&&e.createElement("div",{className:"mt-6 space-y-3"},e.createElement("div",{className:"text-sm font-medium",style:{color:l.text}},"Follow-up Questions"),e.createElement("div",{className:"flex flex-wrap gap-2"},i.map(((t,r)=>e.createElement("button",{key:r,onClick:()=>null==c?void 0:c(t),className:"px-3 py-1.5 rounded-lg text-sm transition-all duration-200 hover:opacity-90",style:{backgroundColor:`${l.accent}30`,color:l.text,border:`1px solid ${l.border}`}},t))))),r&&e.createElement("div",{className:"mt-6 rounded-lg p-4",style:{backgroundColor:`${l.accent}50`}},e.createElement("div",{className:"flex items-center justify-between"},e.createElement("span",{style:{color:l.text}},"Did this answer your question?"),e.createElement("div",{className:"flex gap-2"},e.createElement(C,{variant:"ghost",size:"icon",className:"hover:opacity-90 transition-colors duration-200",style:{color:!1===d?l.primary:`${l.text}60`},onClick:()=>m(!1)},e.createElement(t.ThumbsDown,{className:"h-5 w-5"})),e.createElement(C,{variant:"ghost",size:"icon",className:"hover:opacity-90 transition-colors duration-200",style:{color:!0===d?l.primary:`${l.text}60`},onClick:()=>m(!0)},e.createElement(t.ThumbsUp,{className:"h-5 w-5"}))))),s&&s.length>0&&e.createElement("div",{className:"space-y-3 mt-6"},e.createElement("button",{onClick:()=>p(!u),className:"w-full flex items-center justify-between p-3 rounded-lg hover:opacity-90 transition-all duration-200",style:{backgroundColor:`${l.accent}30`,color:l.text}},e.createElement("div",{className:"flex items-center gap-2"},e.createElement(t.FileText,{className:"h-4 w-4",style:{color:l.primary}}),e.createElement("span",{className:"font-medium"},"Related Articles (",s.length,")")),e.createElement(t.ChevronDown,{className:"h-4 w-4 transition-transform duration-200 "+(u?"rotate-180":""),style:{color:l.text}})),e.createElement("div",{className:"overflow-hidden transition-all duration-200 ease-in-out",style:{maxHeight:u?48*s.length+"px":"0",opacity:u?1:0,transform:`translateY(${u?"0":"-10px"})`}},e.createElement("div",{className:"space-y-2 pl-2"},s.map((r=>e.createElement("a",{key:r.id,href:r.url,target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-2 p-2 rounded-lg hover:opacity-90 transition-colors duration-200",style:{backgroundColor:`${l.accent}20`,color:l.text}},e.createElement(t.FileText,{className:"h-4 w-4",style:{color:l.primary}}),e.createElement("span",{className:"flex-grow"},r.title),e.createElement(t.ExternalLink,{className:"h-4 w-4",style:{color:`${l.text}60`}}))))))),!r&&e.createElement("div",{className:"animate-pulse space-y-4"},e.createElement("div",{className:"h-4 rounded w-full",style:{backgroundColor:`${l.border}40`}}),e.createElement("div",{className:"h-4 rounded w-3/4",style:{backgroundColor:`${l.border}40`}})))))}function O({theme:t,loadingText:r="Analyzing..."}){return e.createElement("div",{className:"w-full space-y-6 rounded-xl p-6",style:{borderColor:t.border,borderWidth:"1px",borderStyle:"solid"}},e.createElement("div",{className:"flex items-center gap-2"},e.createElement("div",{className:"w-5 h-5 rounded-full animate-pulse",style:{backgroundColor:`${t.primary}30`}}),e.createElement("div",{className:"text-sm",style:{color:t.text}},r)),e.createElement("div",{className:"space-y-4 animate-pulse"},Array.from({length:4}).map(((r,a)=>e.createElement("div",{key:a,className:"h-4 rounded w-full",style:{backgroundColor:`${t.border}40`}}))),e.createElement("div",{className:"h-4 rounded w-3/4",style:{backgroundColor:`${t.border}40`}})),e.createElement("div",{className:"rounded-lg p-4",style:{backgroundColor:`${t.accent}50`}},e.createElement("div",{className:"flex items-center justify-between"},e.createElement("div",{className:"h-4 rounded w-48",style:{backgroundColor:`${t.border}80`}}),e.createElement("div",{className:"flex gap-2"},e.createElement("div",{className:"w-8 h-8 rounded-full",style:{backgroundColor:`${t.border}80`}}),e.createElement("div",{className:"w-8 h-8 rounded-full",style:{backgroundColor:`${t.border}80`}})))))}function S({onClick:r,theme:a}){return e.createElement(C,{className:"fixed bottom-20 right-4 rounded-full p-2 transition-opacity duration-300",style:{backgroundColor:a.background,borderColor:a.border,borderWidth:"1px",borderStyle:"solid",boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.1)"},onClick:r},e.createElement(t.ArrowDown,{className:"h-5 w-5",style:{color:a.text}}))}function R({questions:t,currentIndex:a,activeIndex:n,onNavigate:o,theme:l}){return e.createElement(r.motion.div,{initial:{opacity:0,x:-20},animate:{opacity:1,x:0},transition:{duration:.5},className:"fixed left-4 top-1/2 -translate-y-1/2 z-50 flex flex-col gap-2"},t.map(((t,r)=>e.createElement("div",{key:r,className:"relative group"},e.createElement("button",{onClick:()=>o(r),className:"flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 "+(r<=a?"hover:opacity-90":""),style:{backgroundColor:r===n?l.primary:l.border,color:r===n?l.background:l.text,opacity:r>a?.5:1,cursor:"pointer"}},r+1),e.createElement("div",{className:"absolute left-12 top-0 px-3 py-2 rounded-lg whitespace-normal opacity-0 group-hover:opacity-100 w-48 text-sm transition-opacity duration-200",style:{backgroundColor:l.background,color:l.text,borderColor:l.border,borderWidth:"1px",borderStyle:"solid",boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.1)"}},t,e.createElement("div",{className:"absolute left-0 top-3 -translate-x-1 w-2 h-2 rotate-45",style:{backgroundColor:l.background,borderLeft:`1px solid ${l.border}`,borderBottom:`1px solid ${l.border}`}}))))))}function $({questions:t,onQuestionClick:a,theme:n}){return 0===t.length?null:e.createElement(r.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5},className:"w-full space-y-4"},e.createElement("h2",{className:"text-xl font-semibold",style:{color:n.text}},"Suggested Questions"),e.createElement("div",{className:"flex flex-wrap gap-3"},t.map(((t,o)=>e.createElement(r.motion.div,{key:o,initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},transition:{duration:.3,delay:.1*o}},e.createElement(C,{variant:"outline",size:"sm",className:"text-sm transition-colors duration-200 shadow-sm hover:shadow hover:opacity-90",style:{backgroundColor:n.background,color:n.text,borderColor:n.border},onClick:()=>a(t)},t))))))}C.displayName="Button";const q=p.Root,L=p.Trigger;u.forwardRef(((e,t)=>{var{className:r,inset:a,children:n}=e,o=f(e,["className","inset","children"]);return u.createElement(p.SubTrigger,Object.assign({ref:t,className:N("flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",a&&"pl-8",r)},o),n,u.createElement(d.ChevronRightIcon,{className:"ml-auto"}))})).displayName=p.SubTrigger.displayName;u.forwardRef(((e,t)=>{var{className:r}=e,a=f(e,["className"]);return u.createElement(p.SubContent,Object.assign({ref:t,className:N("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",r)},a))})).displayName=p.SubContent.displayName;const z=u.forwardRef(((e,t)=>{var{className:r,sideOffset:a=4}=e,n=f(e,["className","sideOffset"]);return u.createElement(p.Portal,null,u.createElement(p.Content,Object.assign({ref:t,sideOffset:a,className:N("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md","data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",r)},n)))}));z.displayName=p.Content.displayName;const I=u.forwardRef(((e,t)=>{var{className:r,inset:a}=e,n=f(e,["className","inset"]);return u.createElement(p.Item,Object.assign({ref:t,className:N("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",a&&"pl-8",r)},n))}));I.displayName=p.Item.displayName;u.forwardRef(((e,t)=>{var{className:r,children:a,checked:n}=e,o=f(e,["className","children","checked"]);return u.createElement(p.CheckboxItem,Object.assign({ref:t,className:N("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",r),checked:n},o),u.createElement("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center"},u.createElement(p.ItemIndicator,null,u.createElement(d.CheckIcon,{className:"h-4 w-4"}))),a)})).displayName=p.CheckboxItem.displayName;u.forwardRef(((e,t)=>{var{className:r,children:a}=e,n=f(e,["className","children"]);return u.createElement(p.RadioItem,Object.assign({ref:t,className:N("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",r)},n),u.createElement("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center"},u.createElement(p.ItemIndicator,null,u.createElement(d.DotFilledIcon,{className:"h-2 w-2 fill-current"}))),a)})).displayName=p.RadioItem.displayName;u.forwardRef(((e,t)=>{var{className:r,inset:a}=e,n=f(e,["className","inset"]);return u.createElement(p.Label,Object.assign({ref:t,className:N("px-2 py-1.5 text-sm font-semibold",a&&"pl-8",r)},n))})).displayName=p.Label.displayName;function T(e,t,r=5){var a;return h(this,void 0,void 0,(function*(){try{const n=yield fetch(e,{method:"POST",body:JSON.stringify({query:t,limit:r}),headers:{"Content-Type":"application/json","Api-Key":"bf_search_widget_GxKh4Y8Krftl2u6qioWZS7VUjaXUr01Wdh6GVy"}}),o=yield n.json();return{results:o.data.map((e=>({id:e.id,title:e.title,url:e.url}))),searchQueryId:null===(a=null==o?void 0:o.searchQuery)||void 0===a?void 0:a.id}}catch(e){throw console.error("Error fetching data:",e),e}}))}function U(e,t){return h(this,void 0,void 0,(function*(){try{return yield fetch(e,{method:"POST",body:JSON.stringify({searchQueryId:t}),headers:{"Content-Type":"application/json","Api-Key":"bf_search_widget_GxKh4Y8Krftl2u6qioWZS7VUjaXUr01Wdh6GVy"}})}catch(e){throw console.error("Error streaming answer:",e),e}}))}u.forwardRef(((e,t)=>{var{className:r}=e,a=f(e,["className"]);return u.createElement(p.Separator,Object.assign({ref:t,className:N("-mx-1 my-1 h-px bg-muted",r)},a))})).displayName=p.Separator.displayName;const A={primary:"#32c99c",accent:"#f9fafb",background:"white",text:"#171717",border:"#171717",hover:"#171717"};exports.ChatSearch=function({suggestedQuestions:a,theme:n={},collections:o=[],selectedCollectionId:l,onCollectionChange:s,searchEndpoint:i,answerEndpoint:c,followUpQuestionsEndpoint:d,disableFollowUpQuestions:m=!1}){var u;const p=Object.assign(Object.assign({},A),n),[f,y]=e.useState(""),[g,b]=e.useState(""),[v,x]=e.useState(!1),[w,E]=e.useState(!1),[N,k]=e.useState([]),[Q,P]=e.useState(!1),[D,W]=e.useState(0),[_,V]=e.useState([]),K=e.useRef(null),F=e.useRef(null),B=e.useRef([]),G=e.useRef(null),H=e.useRef(null),J=e=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`},X=()=>{setTimeout((()=>{var e;B.current[B.current.length-1]&&(null===(e=B.current[B.current.length-1])||void 0===e||e.scrollIntoView({behavior:"smooth",block:"start"}),G.current&&G.current.scrollBy(0,-80))}),100)},Y=(e,t,r)=>h(this,void 0,void 0,(function*(){if(!e.body)throw new Error("No response body");const a=e.body.getReader(),n=new TextDecoder;let o="";const l=m?Promise.resolve([]):function(e,t,r){return h(this,void 0,void 0,(function*(){try{const a=new AbortController,n=setTimeout((()=>a.abort()),5e3),o=yield fetch(e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:t,answer:r||"Generating answer..."}),signal:a.signal});if(clearTimeout(n),!o.ok)throw new Error("Failed to fetch follow-up questions");return(yield o.json()).questions.slice(0,3)}catch(e){return e instanceof Error&&console.error("Error fetching follow-up questions:",e.message),[]}}))}(d,t,"");let s=!0;for(;s;){const{done:e,value:i}=yield a.read();if(e){if(s=!1,!m)try{const e=yield l;k((t=>{const r=[...t];return r[r.length-1]=Object.assign(Object.assign({},r[r.length-1]),{followUpQuestions:e}),r}))}catch(e){console.error("Error fetching follow-up questions:",e)}continue}const c=n.decode(i);o+=c,k((e=>{const a=[...e];return a[a.length-1]={question:t,answer:o,isLoading:!1,searchResults:r},a}))}})),Z=()=>h(this,void 0,void 0,(function*(){if(f.trim()){x(!0),E(!0),k((e=>[...e,{question:f,answer:"",isLoading:!0,isSearchLoading:!0}]));try{const e=yield T(i,f),t=e.results,r=e.searchQueryId;k((e=>{const r=[...e];return r[r.length-1]=Object.assign(Object.assign({},r[r.length-1]),{searchResults:t,isSearchLoading:!1}),r}));const a=yield U(c,r);yield Y(a,f,t)}catch(e){console.error("Error generating answer:",e),k((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{answer:"Sorry, there was an error generating the answer.",isLoading:!1,isSearchLoading:!1}),t}))}finally{x(!1),X()}}})),M=()=>h(this,void 0,void 0,(function*(){if(g.trim()){const e=g;y(e),b(""),x(!0),k((t=>[...t,{question:e,answer:"",isLoading:!0,isSearchLoading:!0}]));try{const t=yield T(i,e),r=t.results,a=t.searchQueryId;k((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{searchResults:r,isSearchLoading:!1}),t}));const n=yield U(c,a);yield Y(n,e,r)}catch(e){console.error("Error generating answer:",e),k((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{answer:"Sorry, there was an error generating the answer.",isLoading:!1,isSearchLoading:!1}),t}))}finally{x(!1),X()}}}));return e.useEffect((()=>{const e=G.current;if(!e)return;const t=()=>{const{scrollTop:t,scrollHeight:r,clientHeight:a}=e;P(!(r-t-a<100))};return e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)}),[]),e.useEffect((()=>()=>{_.forEach((e=>URL.revokeObjectURL(e.preview)))}),[_]),e.createElement("div",{className:"relative min-h-screen",style:{backgroundColor:`${p.accent}30`}},e.createElement("div",{ref:G,className:"w-full max-w-3xl mx-auto flex flex-col items-center space-y-8 px-4 py-20 h-screen overflow-y-auto",style:{marginLeft:"80px"}},e.createElement(r.AnimatePresence,null,w?e.createElement(r.motion.div,{key:"results",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.5},className:"w-full space-y-8 pb-24"},N.map(((t,a)=>e.createElement(r.motion.div,{key:a,ref:e=>B.current[a]=e,initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.1*a}},t.isLoading?e.createElement(O,{theme:p,loadingText:t.isSearchLoading?"Looking for relevant content...":"Analyzing..."}):e.createElement(j,{answer:t.answer,question:t.question,theme:p,searchResults:t.searchResults,followUpQuestions:m?void 0:t.followUpQuestions,onFollowUpClick:m?void 0:e=>{b(e),M()}}))))):e.createElement(r.motion.div,{key:"search",initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:-20},transition:{duration:.5},className:"w-full space-y-8"},e.createElement("div",{className:"w-full text-center space-y-4"},e.createElement(r.motion.h1,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.3},className:"text-5xl font-bold",style:{color:p.text}},"How can we help you today?")),e.createElement(r.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.4}},e.createElement("div",{className:"relative w-full rounded-xl shadow-lg overflow-hidden backdrop-blur-sm",style:{backgroundColor:`${p.background}CC`,borderColor:`${p.border}80`,borderWidth:"1px",borderStyle:"solid",boxShadow:"0 4px 16px -2px rgba(0, 0, 0, 0.1)"}},e.createElement("div",{className:"p-3"},e.createElement("textarea",{ref:K,placeholder:"Ask anything...",value:f,onChange:e=>{y(e.target.value),J(e.target)},onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),Z())},className:"w-full resize-none outline-none text-lg font-light min-h-[36px] overflow-hidden placeholder:text-gray-400",style:{backgroundColor:"transparent",color:p.text},rows:1}),_.length>0&&e.createElement("div",{className:"flex gap-2 mt-3 overflow-x-auto pb-1"},_.map(((r,a)=>e.createElement("div",{key:a,className:"relative group rounded-lg overflow-hidden flex-shrink-0",style:{width:"80px",height:"80px"}},e.createElement("img",{src:r.preview,alt:`Attached ${a+1}`,className:"w-full h-full object-cover"}),e.createElement("button",{onClick:()=>(e=>{V((t=>(URL.revokeObjectURL(t[e].preview),t.filter(((t,r)=>r!==e)))))})(a),className:"absolute top-1 right-1 bg-black bg-opacity-50 rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"},e.createElement(t.X,{className:"h-3 w-3 text-white"}))))))),e.createElement("div",{className:"flex items-center justify-between px-3 py-2",style:{backgroundColor:`${p.accent}80`,borderTop:`1px solid ${p.border}40`}},e.createElement("div",{className:"flex gap-2"},o.length>0&&e.createElement(q,null,e.createElement(L,{asChild:!0},e.createElement(C,{variant:"ghost",size:"sm",className:"hover:opacity-90 transition-all duration-200 rounded-lg h-8",style:{color:p.text,backgroundColor:`${p.background}40`}},e.createElement(t.Search,{className:"h-3.5 w-3.5 mr-1.5"}),(null===(u=o.find((e=>e.id===l)))||void 0===u?void 0:u.name)||"All Documents")),e.createElement(z,null,o.map((t=>e.createElement(I,{key:t.id,onClick:()=>null==s?void 0:s(t.id),style:{backgroundColor:t.id===l?`${p.hover}`:void 0,color:p.text}},t.name))))),e.createElement("input",{type:"file",ref:H,accept:"image/*",multiple:!0,className:"hidden",onChange:e=>{const t=e.target.files;if(t){const e=Array.from(t).map((e=>({file:e,preview:URL.createObjectURL(e)})));V((t=>[...t,...e]))}H.current&&(H.current.value="")}}),e.createElement(C,{variant:"ghost",size:"sm",className:"hover:bg-opacity-50 rounded-lg h-8",style:{color:p.text,backgroundColor:`${p.background}40`},onClick:()=>{var e;return null===(e=H.current)||void 0===e?void 0:e.click()}},e.createElement(t.Image,{className:"h-3.5 w-3.5 mr-1.5"}),"Attach")),e.createElement("div",{className:"flex items-center gap-2"},e.createElement(C,{size:"icon",disabled:!f||v,className:"rounded-lg shadow-md hover:opacity-90 transition-all duration-300 disabled:opacity-50 h-8 w-8",style:{backgroundColor:p.primary,color:"white"},onClick:()=>{Z()}},v?e.createElement("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-t-transparent",style:{borderColor:"white"}}):e.createElement(t.ArrowRight,{className:"h-4 w-4"})))))),e.createElement($,{questions:a,onQuestionClick:e=>{E(!0),x(!0),k((t=>[...t,{question:e,answer:"",isLoading:!0,isSearchLoading:!0}])),(()=>{h(this,void 0,void 0,(function*(){try{const t=yield T(i,e),r=t.results;k((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{searchResults:r,isSearchLoading:!1}),t}));const a=yield U(c,t.searchQueryId);yield Y(a,e,r)}catch(e){console.error("Error generating answer:",e),k((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{answer:"Sorry, there was an error generating the answer.",isLoading:!1,isSearchLoading:!1}),t}))}finally{x(!1),X()}}))})()},theme:p}))),w&&N.length>0&&e.createElement(R,{questions:N.map((e=>e.question)),currentIndex:v?N.length-1:D,activeIndex:D,onNavigate:e=>{W(e),(e=>{setTimeout((()=>{var t;B.current[e]&&(null===(t=B.current[e])||void 0===t||t.scrollIntoView({behavior:"smooth",block:"start"}),G.current&&G.current.scrollBy(0,-80))}),100)})(e)},theme:p}),w&&e.createElement(r.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5},className:"fixed bottom-4 left-4 right-4 max-w-3xl mx-auto z-10"},e.createElement("div",{className:"rounded-full px-4 py-2 flex items-center justify-between",style:{backgroundColor:p.background,borderColor:p.border,borderWidth:"1px",borderStyle:"solid",boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.1)"}},e.createElement("div",{className:"flex items-center gap-2 flex-grow overflow-hidden"},e.createElement(t.Plus,{className:"h-4 w-4 flex-shrink-0",style:{color:p.primary}}),e.createElement("textarea",{ref:F,placeholder:"Ask follow-up",value:g,onChange:e=>{b(e.target.value),J(e.target)},onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),M())},disabled:v,className:"w-full bg-transparent outline-none text-sm resize-none overflow-hidden disabled:opacity-50",style:{color:p.text},rows:1})),e.createElement("div",{className:"flex items-center gap-3 ml-2 flex-shrink-0"},e.createElement(C,{size:"icon",variant:"ghost",disabled:v||!g.trim(),className:"rounded-full transition-colors duration-200 disabled:opacity-50",style:{color:p.text,backgroundColor:"transparent"},onClick:()=>{M()}},v?e.createElement("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-t-transparent",style:{borderColor:p.text}}):e.createElement(t.ArrowUp,{className:"h-4 w-4"}))))),Q&&w&&e.createElement(S,{onClick:X,theme:p})))};

package/dist/esm/index.js

@@ -0,0 +1 @@
+import*as e from"react";import t,{useState as r,useRef as a,useEffect as o}from"react";import{Sparkles as n,Copy as l,ThumbsDown as s,ThumbsUp as i,FileText as c,ChevronDown as d,ExternalLink as m,ArrowDown as u,X as p,Search as f,Image as y,ArrowRight as h,Plus as g,ArrowUp as b}from"lucide-react";import{motion as v,AnimatePresence as x}from"framer-motion";import w from"react-markdown";import N from"remark-gfm";import{jsx as E,Fragment as k}from"react/jsx-runtime";import{cva as C}from"class-variance-authority";import{clsx as j}from"clsx";import{twMerge as O}from"tailwind-merge";import*as S from"@radix-ui/react-dropdown-menu";import{ChevronRightIcon as $,CheckIcon as R,DotFilledIcon as L}from"@radix-ui/react-icons";function z(e,t){var r={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(r[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)t.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(r[a[o]]=e[a[o]])}return r}function I(e,t,r,a){return new(r||(r=Promise))((function(o,n){function l(e){try{i(a.next(e))}catch(e){n(e)}}function s(e){try{i(a.throw(e))}catch(e){n(e)}}function i(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(l,s)}i((a=a.apply(e,t||[])).next())}))}function q(e,t){if("function"==typeof e)return e(t);null!=e&&(e.current=t)}function T(...e){return t=>{let r=!1;const a=e.map((e=>{const a=q(e,t);return r||"function"!=typeof a||(r=!0),a}));if(r)return()=>{for(let t=0;t<a.length;t++){const r=a[t];"function"==typeof r?r():q(e[t],null)}}}}"function"==typeof SuppressedError&&SuppressedError;var U=e.forwardRef(((t,r)=>{const{children:a,...o}=t,n=e.Children.toArray(a),l=n.find(W);if(l){const t=l.props.children,a=n.map((r=>r===l?e.Children.count(t)>1?e.Children.only(null):e.isValidElement(t)?t.props.children:null:r));return E(Q,{...o,ref:r,children:e.isValidElement(t)?e.cloneElement(t,void 0,a):null})}return E(Q,{...o,ref:r,children:a})}));U.displayName="Slot";var Q=e.forwardRef(((t,r)=>{const{children:a,...o}=t;if(e.isValidElement(a)){const t=function(e){let t=Object.getOwnPropertyDescriptor(e.props,"ref")?.get,r=t&&"isReactWarning"in t&&t.isReactWarning;if(r)return e.ref;if(t=Object.getOwnPropertyDescriptor(e,"ref")?.get,r=t&&"isReactWarning"in t&&t.isReactWarning,r)return e.props.ref;return e.props.ref||e.ref}(a);return e.cloneElement(a,{..._(o,a.props),ref:r?T(r,t):t})}return e.Children.count(a)>1?e.Children.only(null):null}));Q.displayName="SlotClone";var A=({children:e})=>E(k,{children:e});function W(t){return e.isValidElement(t)&&t.type===A}function _(e,t){const r={...t};for(const a in t){const o=e[a],n=t[a];/^on[A-Z]/.test(a)?o&&n?r[a]=(...e)=>{n(...e),o(...e)}:o&&(r[a]=o):"style"===a?r[a]={...o,...n}:"className"===a&&(r[a]=[o,n].filter(Boolean).join(" "))}return{...e,...r}}function P(...e){return O(j(e))}const V=C("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),K=e.forwardRef(((t,r)=>{var{className:a,variant:o,size:n,asChild:l=!1}=t,s=z(t,["className","variant","size","asChild"]);const i=l?U:"button";return e.createElement(i,Object.assign({className:P(V({variant:o,size:n,className:a})),ref:r},s))}));function D({answer:e,question:a,theme:o,searchResults:u,followUpQuestions:p,onFollowUpClick:f}){const[y,h]=r(null),[g,b]=r(!1),v=({className:e,children:r,theme:a})=>!/language-(\w+)/.exec(e||"")?t.createElement("code",{className:`${e} rounded px-1`,style:{backgroundColor:`${a.border}20`}},r):t.createElement("pre",{className:"rounded-md p-4",style:{backgroundColor:`${a.border}20`}},t.createElement("code",{className:e},r));return t.createElement("div",{className:"space-y-6"},t.createElement("div",{className:"rounded-xl",style:{borderColor:o.border,borderWidth:"1px",borderStyle:"solid"}},t.createElement("div",{className:"p-6 space-y-4"},t.createElement("div",{className:"flex items-start justify-between"},t.createElement("div",{className:"flex items-center gap-2"},t.createElement(n,{className:"h-5 w-5",style:{color:o.primary}}),t.createElement("h2",{className:"text-xl",style:{color:o.text}},a)),e&&t.createElement(K,{variant:"ghost",size:"icon",className:"hover:opacity-90 transition-colors duration-200",style:{color:o.text},onClick:()=>{navigator.clipboard.writeText(`${a}\n\n${e}`)}},t.createElement(l,{className:"h-5 w-4"}))),e&&t.createElement("div",{className:"prose prose-sm max-w-none",style:{color:o.text}},t.createElement(w,{remarkPlugins:[N],components:{img:e=>t.createElement("img",Object.assign({},e,{className:"rounded-lg shadow-md my-4",alt:e.alt||""})),code:({className:e,children:r})=>t.createElement(v,{className:e,theme:o},r)}},e)),e&&p&&p.length>0&&t.createElement("div",{className:"mt-6 space-y-3"},t.createElement("div",{className:"text-sm font-medium",style:{color:o.text}},"Follow-up Questions"),t.createElement("div",{className:"flex flex-wrap gap-2"},p.map(((e,r)=>t.createElement("button",{key:r,onClick:()=>null==f?void 0:f(e),className:"px-3 py-1.5 rounded-lg text-sm transition-all duration-200 hover:opacity-90",style:{backgroundColor:`${o.accent}30`,color:o.text,border:`1px solid ${o.border}`}},e))))),e&&t.createElement("div",{className:"mt-6 rounded-lg p-4",style:{backgroundColor:`${o.accent}50`}},t.createElement("div",{className:"flex items-center justify-between"},t.createElement("span",{style:{color:o.text}},"Did this answer your question?"),t.createElement("div",{className:"flex gap-2"},t.createElement(K,{variant:"ghost",size:"icon",className:"hover:opacity-90 transition-colors duration-200",style:{color:!1===y?o.primary:`${o.text}60`},onClick:()=>h(!1)},t.createElement(s,{className:"h-5 w-5"})),t.createElement(K,{variant:"ghost",size:"icon",className:"hover:opacity-90 transition-colors duration-200",style:{color:!0===y?o.primary:`${o.text}60`},onClick:()=>h(!0)},t.createElement(i,{className:"h-5 w-5"}))))),u&&u.length>0&&t.createElement("div",{className:"space-y-3 mt-6"},t.createElement("button",{onClick:()=>b(!g),className:"w-full flex items-center justify-between p-3 rounded-lg hover:opacity-90 transition-all duration-200",style:{backgroundColor:`${o.accent}30`,color:o.text}},t.createElement("div",{className:"flex items-center gap-2"},t.createElement(c,{className:"h-4 w-4",style:{color:o.primary}}),t.createElement("span",{className:"font-medium"},"Related Articles (",u.length,")")),t.createElement(d,{className:"h-4 w-4 transition-transform duration-200 "+(g?"rotate-180":""),style:{color:o.text}})),t.createElement("div",{className:"overflow-hidden transition-all duration-200 ease-in-out",style:{maxHeight:g?48*u.length+"px":"0",opacity:g?1:0,transform:`translateY(${g?"0":"-10px"})`}},t.createElement("div",{className:"space-y-2 pl-2"},u.map((e=>t.createElement("a",{key:e.id,href:e.url,target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-2 p-2 rounded-lg hover:opacity-90 transition-colors duration-200",style:{backgroundColor:`${o.accent}20`,color:o.text}},t.createElement(c,{className:"h-4 w-4",style:{color:o.primary}}),t.createElement("span",{className:"flex-grow"},e.title),t.createElement(m,{className:"h-4 w-4",style:{color:`${o.text}60`}}))))))),!e&&t.createElement("div",{className:"animate-pulse space-y-4"},t.createElement("div",{className:"h-4 rounded w-full",style:{backgroundColor:`${o.border}40`}}),t.createElement("div",{className:"h-4 rounded w-3/4",style:{backgroundColor:`${o.border}40`}})))))}function B({theme:e,loadingText:r="Analyzing..."}){return t.createElement("div",{className:"w-full space-y-6 rounded-xl p-6",style:{borderColor:e.border,borderWidth:"1px",borderStyle:"solid"}},t.createElement("div",{className:"flex items-center gap-2"},t.createElement("div",{className:"w-5 h-5 rounded-full animate-pulse",style:{backgroundColor:`${e.primary}30`}}),t.createElement("div",{className:"text-sm",style:{color:e.text}},r)),t.createElement("div",{className:"space-y-4 animate-pulse"},Array.from({length:4}).map(((r,a)=>t.createElement("div",{key:a,className:"h-4 rounded w-full",style:{backgroundColor:`${e.border}40`}}))),t.createElement("div",{className:"h-4 rounded w-3/4",style:{backgroundColor:`${e.border}40`}})),t.createElement("div",{className:"rounded-lg p-4",style:{backgroundColor:`${e.accent}50`}},t.createElement("div",{className:"flex items-center justify-between"},t.createElement("div",{className:"h-4 rounded w-48",style:{backgroundColor:`${e.border}80`}}),t.createElement("div",{className:"flex gap-2"},t.createElement("div",{className:"w-8 h-8 rounded-full",style:{backgroundColor:`${e.border}80`}}),t.createElement("div",{className:"w-8 h-8 rounded-full",style:{backgroundColor:`${e.border}80`}})))))}function F({onClick:e,theme:r}){return t.createElement(K,{className:"fixed bottom-20 right-4 rounded-full p-2 transition-opacity duration-300",style:{backgroundColor:r.background,borderColor:r.border,borderWidth:"1px",borderStyle:"solid",boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.1)"},onClick:e},t.createElement(u,{className:"h-5 w-5",style:{color:r.text}}))}function G({questions:e,currentIndex:r,activeIndex:a,onNavigate:o,theme:n}){return t.createElement(v.div,{initial:{opacity:0,x:-20},animate:{opacity:1,x:0},transition:{duration:.5},className:"fixed left-4 top-1/2 -translate-y-1/2 z-50 flex flex-col gap-2"},e.map(((e,l)=>t.createElement("div",{key:l,className:"relative group"},t.createElement("button",{onClick:()=>o(l),className:"flex items-center justify-center w-8 h-8 rounded-full transition-all duration-200 "+(l<=r?"hover:opacity-90":""),style:{backgroundColor:l===a?n.primary:n.border,color:l===a?n.background:n.text,opacity:l>r?.5:1,cursor:"pointer"}},l+1),t.createElement("div",{className:"absolute left-12 top-0 px-3 py-2 rounded-lg whitespace-normal opacity-0 group-hover:opacity-100 w-48 text-sm transition-opacity duration-200",style:{backgroundColor:n.background,color:n.text,borderColor:n.border,borderWidth:"1px",borderStyle:"solid",boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.1)"}},e,t.createElement("div",{className:"absolute left-0 top-3 -translate-x-1 w-2 h-2 rotate-45",style:{backgroundColor:n.background,borderLeft:`1px solid ${n.border}`,borderBottom:`1px solid ${n.border}`}}))))))}function H({questions:e,onQuestionClick:r,theme:a}){return 0===e.length?null:t.createElement(v.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5},className:"w-full space-y-4"},t.createElement("h2",{className:"text-xl font-semibold",style:{color:a.text}},"Suggested Questions"),t.createElement("div",{className:"flex flex-wrap gap-3"},e.map(((e,o)=>t.createElement(v.div,{key:o,initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},transition:{duration:.3,delay:.1*o}},t.createElement(K,{variant:"outline",size:"sm",className:"text-sm transition-colors duration-200 shadow-sm hover:shadow hover:opacity-90",style:{backgroundColor:a.background,color:a.text,borderColor:a.border},onClick:()=>r(e)},e))))))}K.displayName="Button";const J=S.Root,Y=S.Trigger;e.forwardRef(((t,r)=>{var{className:a,inset:o,children:n}=t,l=z(t,["className","inset","children"]);return e.createElement(S.SubTrigger,Object.assign({ref:r,className:P("flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",o&&"pl-8",a)},l),n,e.createElement($,{className:"ml-auto"}))})).displayName=S.SubTrigger.displayName;e.forwardRef(((t,r)=>{var{className:a}=t,o=z(t,["className"]);return e.createElement(S.SubContent,Object.assign({ref:r,className:P("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",a)},o))})).displayName=S.SubContent.displayName;const Z=e.forwardRef(((t,r)=>{var{className:a,sideOffset:o=4}=t,n=z(t,["className","sideOffset"]);return e.createElement(S.Portal,null,e.createElement(S.Content,Object.assign({ref:r,sideOffset:o,className:P("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md","data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",a)},n)))}));Z.displayName=S.Content.displayName;const X=e.forwardRef(((t,r)=>{var{className:a,inset:o}=t,n=z(t,["className","inset"]);return e.createElement(S.Item,Object.assign({ref:r,className:P("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",o&&"pl-8",a)},n))}));X.displayName=S.Item.displayName;e.forwardRef(((t,r)=>{var{className:a,children:o,checked:n}=t,l=z(t,["className","children","checked"]);return e.createElement(S.CheckboxItem,Object.assign({ref:r,className:P("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",a),checked:n},l),e.createElement("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center"},e.createElement(S.ItemIndicator,null,e.createElement(R,{className:"h-4 w-4"}))),o)})).displayName=S.CheckboxItem.displayName;e.forwardRef(((t,r)=>{var{className:a,children:o}=t,n=z(t,["className","children"]);return e.createElement(S.RadioItem,Object.assign({ref:r,className:P("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",a)},n),e.createElement("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center"},e.createElement(S.ItemIndicator,null,e.createElement(L,{className:"h-2 w-2 fill-current"}))),o)})).displayName=S.RadioItem.displayName;e.forwardRef(((t,r)=>{var{className:a,inset:o}=t,n=z(t,["className","inset"]);return e.createElement(S.Label,Object.assign({ref:r,className:P("px-2 py-1.5 text-sm font-semibold",o&&"pl-8",a)},n))})).displayName=S.Label.displayName;function M(e,t,r=5){var a;return I(this,void 0,void 0,(function*(){try{const o=yield fetch(e,{method:"POST",body:JSON.stringify({query:t,limit:r}),headers:{"Content-Type":"application/json","Api-Key":"bf_search_widget_GxKh4Y8Krftl2u6qioWZS7VUjaXUr01Wdh6GVy"}}),n=yield o.json();return{results:n.data.map((e=>({id:e.id,title:e.title,url:e.url}))),searchQueryId:null===(a=null==n?void 0:n.searchQuery)||void 0===a?void 0:a.id}}catch(e){throw console.error("Error fetching data:",e),e}}))}function ee(e,t){return I(this,void 0,void 0,(function*(){try{return yield fetch(e,{method:"POST",body:JSON.stringify({searchQueryId:t}),headers:{"Content-Type":"application/json","Api-Key":"bf_search_widget_GxKh4Y8Krftl2u6qioWZS7VUjaXUr01Wdh6GVy"}})}catch(e){throw console.error("Error streaming answer:",e),e}}))}e.forwardRef(((t,r)=>{var{className:a}=t,o=z(t,["className"]);return e.createElement(S.Separator,Object.assign({ref:r,className:P("-mx-1 my-1 h-px bg-muted",a)},o))})).displayName=S.Separator.displayName;const te={primary:"#32c99c",accent:"#f9fafb",background:"white",text:"#171717",border:"#171717",hover:"#171717"};function re({suggestedQuestions:e,theme:n={},collections:l=[],selectedCollectionId:s,onCollectionChange:i,searchEndpoint:c,answerEndpoint:d,followUpQuestionsEndpoint:m,disableFollowUpQuestions:u=!1}){var w;const N=Object.assign(Object.assign({},te),n),[E,k]=r(""),[C,j]=r(""),[O,S]=r(!1),[$,R]=r(!1),[L,z]=r([]),[q,T]=r(!1),[U,Q]=r(0),[A,W]=r([]),_=a(null),P=a(null),V=a([]),re=a(null),ae=a(null),oe=e=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`},ne=()=>{setTimeout((()=>{var e;V.current[V.current.length-1]&&(null===(e=V.current[V.current.length-1])||void 0===e||e.scrollIntoView({behavior:"smooth",block:"start"}),re.current&&re.current.scrollBy(0,-80))}),100)},le=(e,t,r)=>I(this,void 0,void 0,(function*(){if(!e.body)throw new Error("No response body");const a=e.body.getReader(),o=new TextDecoder;let n="";const l=u?Promise.resolve([]):function(e,t,r){return I(this,void 0,void 0,(function*(){try{const a=new AbortController,o=setTimeout((()=>a.abort()),5e3),n=yield fetch(e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:t,answer:r||"Generating answer..."}),signal:a.signal});if(clearTimeout(o),!n.ok)throw new Error("Failed to fetch follow-up questions");return(yield n.json()).questions.slice(0,3)}catch(e){return e instanceof Error&&console.error("Error fetching follow-up questions:",e.message),[]}}))}(m,t,"");let s=!0;for(;s;){const{done:e,value:i}=yield a.read();if(e){if(s=!1,!u)try{const e=yield l;z((t=>{const r=[...t];return r[r.length-1]=Object.assign(Object.assign({},r[r.length-1]),{followUpQuestions:e}),r}))}catch(e){console.error("Error fetching follow-up questions:",e)}continue}const c=o.decode(i);n+=c,z((e=>{const a=[...e];return a[a.length-1]={question:t,answer:n,isLoading:!1,searchResults:r},a}))}})),se=()=>I(this,void 0,void 0,(function*(){if(E.trim()){S(!0),R(!0),z((e=>[...e,{question:E,answer:"",isLoading:!0,isSearchLoading:!0}]));try{const e=yield M(c,E),t=e.results,r=e.searchQueryId;z((e=>{const r=[...e];return r[r.length-1]=Object.assign(Object.assign({},r[r.length-1]),{searchResults:t,isSearchLoading:!1}),r}));const a=yield ee(d,r);yield le(a,E,t)}catch(e){console.error("Error generating answer:",e),z((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{answer:"Sorry, there was an error generating the answer.",isLoading:!1,isSearchLoading:!1}),t}))}finally{S(!1),ne()}}})),ie=()=>I(this,void 0,void 0,(function*(){if(C.trim()){const e=C;k(e),j(""),S(!0),z((t=>[...t,{question:e,answer:"",isLoading:!0,isSearchLoading:!0}]));try{const t=yield M(c,e),r=t.results,a=t.searchQueryId;z((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{searchResults:r,isSearchLoading:!1}),t}));const o=yield ee(d,a);yield le(o,e,r)}catch(e){console.error("Error generating answer:",e),z((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{answer:"Sorry, there was an error generating the answer.",isLoading:!1,isSearchLoading:!1}),t}))}finally{S(!1),ne()}}}));o((()=>{const e=re.current;if(!e)return;const t=()=>{const{scrollTop:t,scrollHeight:r,clientHeight:a}=e;T(!(r-t-a<100))};return e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)}),[]),o((()=>()=>{A.forEach((e=>URL.revokeObjectURL(e.preview)))}),[A]);return t.createElement("div",{className:"relative min-h-screen",style:{backgroundColor:`${N.accent}30`}},t.createElement("div",{ref:re,className:"w-full max-w-3xl mx-auto flex flex-col items-center space-y-8 px-4 py-20 h-screen overflow-y-auto",style:{marginLeft:"80px"}},t.createElement(x,null,$?t.createElement(v.div,{key:"results",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.5},className:"w-full space-y-8 pb-24"},L.map(((e,r)=>t.createElement(v.div,{key:r,ref:e=>V.current[r]=e,initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.1*r}},e.isLoading?t.createElement(B,{theme:N,loadingText:e.isSearchLoading?"Looking for relevant content...":"Analyzing..."}):t.createElement(D,{answer:e.answer,question:e.question,theme:N,searchResults:e.searchResults,followUpQuestions:u?void 0:e.followUpQuestions,onFollowUpClick:u?void 0:e=>{j(e),ie()}}))))):t.createElement(v.div,{key:"search",initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:-20},transition:{duration:.5},className:"w-full space-y-8"},t.createElement("div",{className:"w-full text-center space-y-4"},t.createElement(v.h1,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.3},className:"text-5xl font-bold",style:{color:N.text}},"How can we help you today?")),t.createElement(v.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5,delay:.4}},t.createElement("div",{className:"relative w-full rounded-xl shadow-lg overflow-hidden backdrop-blur-sm",style:{backgroundColor:`${N.background}CC`,borderColor:`${N.border}80`,borderWidth:"1px",borderStyle:"solid",boxShadow:"0 4px 16px -2px rgba(0, 0, 0, 0.1)"}},t.createElement("div",{className:"p-3"},t.createElement("textarea",{ref:_,placeholder:"Ask anything...",value:E,onChange:e=>{k(e.target.value),oe(e.target)},onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),se())},className:"w-full resize-none outline-none text-lg font-light min-h-[36px] overflow-hidden placeholder:text-gray-400",style:{backgroundColor:"transparent",color:N.text},rows:1}),A.length>0&&t.createElement("div",{className:"flex gap-2 mt-3 overflow-x-auto pb-1"},A.map(((e,r)=>t.createElement("div",{key:r,className:"relative group rounded-lg overflow-hidden flex-shrink-0",style:{width:"80px",height:"80px"}},t.createElement("img",{src:e.preview,alt:`Attached ${r+1}`,className:"w-full h-full object-cover"}),t.createElement("button",{onClick:()=>(e=>{W((t=>(URL.revokeObjectURL(t[e].preview),t.filter(((t,r)=>r!==e)))))})(r),className:"absolute top-1 right-1 bg-black bg-opacity-50 rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"},t.createElement(p,{className:"h-3 w-3 text-white"}))))))),t.createElement("div",{className:"flex items-center justify-between px-3 py-2",style:{backgroundColor:`${N.accent}80`,borderTop:`1px solid ${N.border}40`}},t.createElement("div",{className:"flex gap-2"},l.length>0&&t.createElement(J,null,t.createElement(Y,{asChild:!0},t.createElement(K,{variant:"ghost",size:"sm",className:"hover:opacity-90 transition-all duration-200 rounded-lg h-8",style:{color:N.text,backgroundColor:`${N.background}40`}},t.createElement(f,{className:"h-3.5 w-3.5 mr-1.5"}),(null===(w=l.find((e=>e.id===s)))||void 0===w?void 0:w.name)||"All Documents")),t.createElement(Z,null,l.map((e=>t.createElement(X,{key:e.id,onClick:()=>null==i?void 0:i(e.id),style:{backgroundColor:e.id===s?`${N.hover}`:void 0,color:N.text}},e.name))))),t.createElement("input",{type:"file",ref:ae,accept:"image/*",multiple:!0,className:"hidden",onChange:e=>{const t=e.target.files;if(t){const e=Array.from(t).map((e=>({file:e,preview:URL.createObjectURL(e)})));W((t=>[...t,...e]))}ae.current&&(ae.current.value="")}}),t.createElement(K,{variant:"ghost",size:"sm",className:"hover:bg-opacity-50 rounded-lg h-8",style:{color:N.text,backgroundColor:`${N.background}40`},onClick:()=>{var e;return null===(e=ae.current)||void 0===e?void 0:e.click()}},t.createElement(y,{className:"h-3.5 w-3.5 mr-1.5"}),"Attach")),t.createElement("div",{className:"flex items-center gap-2"},t.createElement(K,{size:"icon",disabled:!E||O,className:"rounded-lg shadow-md hover:opacity-90 transition-all duration-300 disabled:opacity-50 h-8 w-8",style:{backgroundColor:N.primary,color:"white"},onClick:()=>{se()}},O?t.createElement("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-t-transparent",style:{borderColor:"white"}}):t.createElement(h,{className:"h-4 w-4"})))))),t.createElement(H,{questions:e,onQuestionClick:e=>{R(!0),S(!0),z((t=>[...t,{question:e,answer:"",isLoading:!0,isSearchLoading:!0}])),(()=>{I(this,void 0,void 0,(function*(){try{const t=yield M(c,e),r=t.results;z((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{searchResults:r,isSearchLoading:!1}),t}));const a=yield ee(d,t.searchQueryId);yield le(a,e,r)}catch(e){console.error("Error generating answer:",e),z((e=>{const t=[...e];return t[t.length-1]=Object.assign(Object.assign({},t[t.length-1]),{answer:"Sorry, there was an error generating the answer.",isLoading:!1,isSearchLoading:!1}),t}))}finally{S(!1),ne()}}))})()},theme:N}))),$&&L.length>0&&t.createElement(G,{questions:L.map((e=>e.question)),currentIndex:O?L.length-1:U,activeIndex:U,onNavigate:e=>{Q(e),(e=>{setTimeout((()=>{var t;V.current[e]&&(null===(t=V.current[e])||void 0===t||t.scrollIntoView({behavior:"smooth",block:"start"}),re.current&&re.current.scrollBy(0,-80))}),100)})(e)},theme:N}),$&&t.createElement(v.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.5},className:"fixed bottom-4 left-4 right-4 max-w-3xl mx-auto z-10"},t.createElement("div",{className:"rounded-full px-4 py-2 flex items-center justify-between",style:{backgroundColor:N.background,borderColor:N.border,borderWidth:"1px",borderStyle:"solid",boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.1)"}},t.createElement("div",{className:"flex items-center gap-2 flex-grow overflow-hidden"},t.createElement(g,{className:"h-4 w-4 flex-shrink-0",style:{color:N.primary}}),t.createElement("textarea",{ref:P,placeholder:"Ask follow-up",value:C,onChange:e=>{j(e.target.value),oe(e.target)},onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),ie())},disabled:O,className:"w-full bg-transparent outline-none text-sm resize-none overflow-hidden disabled:opacity-50",style:{color:N.text},rows:1})),t.createElement("div",{className:"flex items-center gap-3 ml-2 flex-shrink-0"},t.createElement(K,{size:"icon",variant:"ghost",disabled:O||!C.trim(),className:"rounded-full transition-colors duration-200 disabled:opacity-50",style:{color:N.text,backgroundColor:"transparent"},onClick:()=>{ie()}},O?t.createElement("div",{className:"animate-spin rounded-full h-4 w-4 border-2 border-t-transparent",style:{borderColor:N.text}}):t.createElement(b,{className:"h-4 w-4"}))))),q&&$&&t.createElement(F,{onClick:ne,theme:N})))}export{re as ChatSearch};

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface Answer {
+    question: string;
+    answer: string;
+    isLoading: boolean;
+    searchResults?: SearchResult[];
+    isSearchLoading?: boolean;
+    followUpQuestions?: string[];
+}
+interface SearchResult {
+    id: string;
+    title: string;
+    url: string;
+}
+interface Theme {
+    primary: string;
+    accent: string;
+    background: string;
+    text: string;
+    border: string;
+    hover: string;
+}
+interface Collection {
+    id: string;
+    name: string;
+}
+interface ChatSearchProps {
+    suggestedQuestions: string[];
+    onNewThread?: () => void;
+    searchEndpoint: string;
+    answerEndpoint: string;
+    followUpQuestionsEndpoint: string;
+    disableFollowUpQuestions?: boolean;
+    theme?: Partial<Theme>;
+    collections?: Collection[];
+    selectedCollectionId?: string;
+    onCollectionChange?: (collectionId: string) => void;
+}
+
+declare function ChatSearch({ suggestedQuestions, theme, collections, selectedCollectionId, onCollectionChange, searchEndpoint, answerEndpoint, followUpQuestionsEndpoint, disableFollowUpQuestions, }: ChatSearchProps): React.JSX.Element;
+
+export { type Answer, ChatSearch, type ChatSearchProps };

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@brainfish-ai/components",
+  "version": "0.0.1",
+  "description": "Brainfish Components",
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "start": "NODE_ENV=development BABEL_ENV=development yarn storybook",
+    "build": "rimraf dist && NODE_ENV=production BABEL_ENV=production rollup -c",
+    "lint": "yarn check-types && yarn eslint && yarn stylelint",
+    "lint:fix": "yarn eslint:fix && yarn stylelint:fix",
+    "eslint": "eslint . --ext .js,.jsx,.tsx,.ts",
+    "eslint:fix": "eslint . --ext .js,.jsx,.tsx,.ts --fix",
+    "check-types": "tsc --noEmit true",
+    "ci": "yarn lint && yarn test --watch=false",
+    "test": "vitest --config ./vitest.config.ts",
+    "release": "yarn ci && yarn build && npm publish",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:deploy": "yarn storybook:build && touch ./storybook-static/.nojekyll && gh-pages -d ./storybook-static -t true"
+  },
+  "peerDependencies": {
+    "class-variance-authority": "0.7.0",
+    "clsx": "2.x",
+    "lucide-react": "^0.292.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss-animate": "1.0.7"
+  },
+  "devDependencies": {
+    "@radix-ui/react-slot": "^1.1.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-docs": "^7.5.2",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-themes": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-vite": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
+    "@svgr/rollup": "^8.1.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "autoprefixer": "^10.4.16",
+    "class-variance-authority": "0.7.0",
+    "clsx": "^2.0.0",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "eslint-plugin-storybook": "^0.6.15",
+    "gh-pages": "^6.0.0",
+    "jsdom": "^22.1.0",
+    "lucide-react": "^0.292.0",
+    "postcss": "^8.4.31",
+    "postcss-scss": "^4.0.9",
+    "prettier": "3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "regenerator-runtime": "^0.14.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.3.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^7.5.2",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7",
+    "tslib": "^2.6.2",
+    "typescript": "5.2.2",
+    "vite": "^4.5.0",
+    "vite-plugin-svgr": "^4.1.0",
+    "vitest": "^0.34.6"
+  },
+  "packageManager": "yarn@3.6.3",
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-switch": "^1.1.2",
+    "framer-motion": "^11.15.0",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "remark-gfm": "^4.0.0"
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,74 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class", '[data-mode="dark"]'],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}