@brainfish-ai/components 0.17.0 → 0.17.1

package/dist/esm/index.js

@@ -2,12 +2,13 @@ import './index.css';export { BrainfishColors } from './colors.js';
 export { C as ChatSearch, a as ChatSearchProvider, u as useChatSearch, b as useIsChatSearchDirty } from './chunks/ChatSearch.B4QTqo-0.js';
 export { C as CodeBlock, F as FormattedMessage, M as MemoizedReactMarkdown, a as MermaidDiagram, Z as ZoomableImage, c as addPopupWidgetUtm, b as addUtmParameters } from './chunks/FormattedMessage.BcAkzCZt.js';
 export { z as MarkdownEditorViewer } from './chunks/markdownTranslator-D7_8pMsF.BHDxZbm8.js';
-export { Button, buttonVariants } from './components/ui/button.js';
+import { Button } from './components/ui/button.js';
+export { buttonVariants } from './components/ui/button.js';
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/ui/collapsible.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/ui/dropdown-menu.js';
 export { Switch } from './components/ui/switch.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/ui/tooltip.js';
-export { Textarea } from './components/ui/textarea.js';
+import { Textarea } from './components/ui/textarea.js';
 export { ScrollArea, ScrollBar } from './components/ui/scroll-area.js';
 export { Label } from './components/ui/label.js';
 export { Input } from './components/ui/input.js';
@@ -26,4 +27,111 @@ export { T as TwoLevelCombobox } from './chunks/two-level-combobox.DsWPDcI6.js';
 export { F as Filter, a as Filters, O as Operator } from './chunks/filters.BMbm1LUz.js';
 export { F as FileUpload, a as FileUploadStatus, f as formatFileSize } from './chunks/file-upload-status.Vw0Zxmir.js';
 export { D as DataTable } from './chunks/data-table.CVyV_UqZ.js';
+import * as React from 'react';
+import { Plus } from '@phosphor-icons/react';
+import { c as cn } from './chunks/utils.Cwtlq8dh.js';
+
+function InputWithTags({
+  title,
+  placeholder,
+  tags,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onTagClick,
+  singleValue = false,
+  className,
+  inputClassName,
+  tagsClassName,
+  disabled,
+  name,
+  id,
+  required,
+  maxLength,
+  minLength,
+  rows
+}) {
+  const findTagsInValue = React.useCallback(
+    (val) => {
+      if (!val) return /* @__PURE__ */ new Set();
+      const trimmedVal = val.trim();
+      const foundTags = /* @__PURE__ */ new Set();
+      for (const tag of tags) {
+        const tagValue = tag.value.trim();
+        if (singleValue) {
+          if (trimmedVal === tagValue) {
+            foundTags.add(tag.value);
+          }
+        } else {
+          if (trimmedVal === tagValue || trimmedVal.startsWith(tagValue + " ") || trimmedVal.includes(" " + tagValue + " ") || trimmedVal.endsWith(" " + tagValue)) {
+            foundTags.add(tag.value);
+          }
+        }
+      }
+      return foundTags;
+    },
+    [tags, singleValue]
+  );
+  const initialValue = controlledValue !== void 0 ? controlledValue : defaultValue || "";
+  const [internalValue, setInternalValue] = React.useState(defaultValue || "");
+  const [clickedTags, setClickedTags] = React.useState(() => findTagsInValue(initialValue));
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  React.useEffect(() => {
+    const currentValue = controlledValue !== void 0 ? controlledValue : internalValue;
+    setClickedTags(findTagsInValue(currentValue));
+  }, [controlledValue, internalValue, tags, singleValue, findTagsInValue]);
+  const availableTags = tags.filter((tag) => !clickedTags.has(tag.value));
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    if (controlledValue === void 0) {
+      setInternalValue(newValue);
+      setClickedTags(findTagsInValue(newValue));
+    }
+    onChange?.(newValue);
+  };
+  const handleTagClick = (tag) => {
+    const newValue = singleValue ? tag.value : value ? `${value} ${tag.value}` : tag.value;
+    if (controlledValue === void 0) {
+      setInternalValue(newValue);
+      if (singleValue) {
+        setClickedTags(/* @__PURE__ */ new Set([tag.value]));
+      } else {
+        setClickedTags(findTagsInValue(newValue));
+      }
+    }
+    onChange?.(newValue);
+    onTagClick?.(tag);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: cn("w-full flex flex-col gap-3", className) }, title && /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: "text-sm font-semibold" }, title), /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React.createElement(
+    Textarea,
+    {
+      id,
+      name,
+      placeholder,
+      value,
+      onChange: handleInputChange,
+      disabled,
+      required,
+      maxLength,
+      minLength,
+      rows,
+      className: inputClassName
+    }
+  )), availableTags.length > 0 && /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-wrap gap-2", tagsClassName) }, availableTags.map((tag, index) => /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      key: `${tag.value}-${index}`,
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      onClick: () => handleTagClick(tag),
+      disabled,
+      className: "rounded-full"
+    },
+    /* @__PURE__ */ React.createElement(Plus, { size: 16, className: "text-muted-foreground" }),
+    /* @__PURE__ */ React.createElement("span", null, tag.label)
+  ))));
+}
+
+export { Button, InputWithTags, Textarea };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/components/input-with-tags/input-with-tags.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Plus } from '@phosphor-icons/react';\n\nimport { cn } from '@/lib/utils';\nimport { Textarea } from '@/components/ui/textarea';\nimport { Button } from '@/components/ui/button';\n\nexport interface Tag {\n  label: string;\n  value: string;\n}\n\nexport interface InputWithTagsProps {\n  title: string;\n  placeholder?: string;\n  tags: Tag[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  onTagClick?: (tag: Tag) => void;\n  singleValue?: boolean; // If true, clicking a tag replaces the value instead of appending\n  className?: string;\n  inputClassName?: string;\n  tagsClassName?: string;\n  disabled?: boolean;\n  // Standard textarea props\n  name?: string;\n  id?: string;\n  required?: boolean;\n  maxLength?: number;\n  minLength?: number;\n  rows?: number;\n}\n\nexport function InputWithTags({\n  title,\n  placeholder,\n  tags,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  onTagClick,\n  singleValue = false,\n  className,\n  inputClassName,\n  tagsClassName,\n  disabled,\n  name,\n  id,\n  required,\n  maxLength,\n  minLength,\n  rows,\n}: InputWithTagsProps) {\n  // Helper to find tags present in value (tags are appended as: `${value} ${tag.value}`)\n  const findTagsInValue = React.useCallback(\n    (val: string): Set<string> => {\n      if (!val) return new Set();\n      const trimmedVal = val.trim();\n      const foundTags = new Set<string>();\n\n      for (const tag of tags) {\n        const tagValue = tag.value.trim();\n        if (singleValue) {\n          if (trimmedVal === tagValue) {\n            foundTags.add(tag.value);\n          }\n        } else {\n          // Check if tag appears as complete segment (tags are appended as: `${value} ${tag.value}`)\n          // Need to check: exact match, at start, in middle, or at end\n          if (\n            trimmedVal === tagValue ||\n            trimmedVal.startsWith(tagValue + ' ') ||\n            trimmedVal.includes(' ' + tagValue + ' ') ||\n            trimmedVal.endsWith(' ' + tagValue)\n          ) {\n            foundTags.add(tag.value);\n          }\n        }\n      }\n\n      return foundTags;\n    },\n    [tags, singleValue],\n  );\n\n  // Initialize clickedTags based on initial value\n  const initialValue = controlledValue !== undefined ? controlledValue : defaultValue || '';\n  const [internalValue, setInternalValue] = React.useState(defaultValue || '');\n  const [clickedTags, setClickedTags] = React.useState<Set<string>>(() => findTagsInValue(initialValue));\n\n  // Use controlled value if provided, otherwise use internal state\n  const value = controlledValue !== undefined ? controlledValue : internalValue;\n\n  // Update clickedTags when value or tags change\n  React.useEffect(() => {\n    const currentValue = controlledValue !== undefined ? controlledValue : internalValue;\n    setClickedTags(findTagsInValue(currentValue));\n  }, [controlledValue, internalValue, tags, singleValue, findTagsInValue]);\n\n  // Filter out clicked tags\n  const availableTags = tags.filter((tag) => !clickedTags.has(tag.value));\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const newValue = e.target.value;\n    if (controlledValue === undefined) {\n      setInternalValue(newValue);\n      // Sync clickedTags with the new value in uncontrolled mode\n      setClickedTags(findTagsInValue(newValue));\n    }\n    onChange?.(newValue);\n  };\n\n  const handleTagClick = (tag: Tag) => {\n    const newValue = singleValue ? tag.value : value ? `${value} ${tag.value}` : tag.value;\n    if (controlledValue === undefined) {\n      // In uncontrolled mode, update state and sync clickedTags immediately\n      setInternalValue(newValue);\n      // Sync clickedTags with the new value\n      if (singleValue) {\n        setClickedTags(new Set([tag.value]));\n      } else {\n        setClickedTags(findTagsInValue(newValue));\n      }\n    }\n    // In controlled mode, only call onChange - let useEffect sync clickedTags when controlledValue updates\n    onChange?.(newValue);\n    onTagClick?.(tag);\n  };\n\n  return (\n    <div className={cn('w-full flex flex-col gap-3', className)}>\n      {title && (\n        <label htmlFor={id} className=\"text-sm font-semibold\">\n          {title}\n        </label>\n      )}\n      <div className=\"relative w-full\">\n        <Textarea\n          id={id}\n          name={name}\n          placeholder={placeholder}\n          value={value}\n          onChange={handleInputChange}\n          disabled={disabled}\n          required={required}\n          maxLength={maxLength}\n          minLength={minLength}\n          rows={rows}\n          className={inputClassName}\n        />\n      </div>\n      {availableTags.length > 0 && (\n        <div className={cn('flex flex-wrap gap-2', tagsClassName)}>\n          {availableTags.map((tag, index) => (\n            <Button\n              key={`${tag.value}-${index}`}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => handleTagClick(tag)}\n              disabled={disabled}\n              className=\"rounded-full\"\n            >\n              <Plus size={16} className=\"text-muted-foreground\" />\n              <span>{tag.label}</span>\n            </Button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA,EAAO,eAAA;AAAA,EACP,YAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,SAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAuB;AAErB,EAAA,MAAM,kBAAkB,KAAA,CAAM,WAAA;AAAA,IAC5B,CAAC,GAAA,KAA6B;AAC5B,MAAA,IAAI,CAAC,GAAA,EAAK,uBAAO,IAAI,GAAA,EAAI;AACzB,MAAA,MAAM,UAAA,GAAa,IAAI,IAAA,EAAK;AAC5B,MAAA,MAAM,SAAA,uBAAgB,GAAA,EAAY;AAElC,MAAA,KAAA,MAAW,OAAO,IAAA,EAAM;AACtB,QAAA,MAAM,QAAA,GAAW,GAAA,CAAI,KAAA,CAAM,IAAA,EAAK;AAChC,QAAA,IAAI,WAAA,EAAa;AACf,UAAA,IAAI,eAAe,QAAA,EAAU;AAC3B,YAAA,SAAA,CAAU,GAAA,CAAI,IAAI,KAAK,CAAA;AAAA,UACzB;AAAA,QACF,CAAA,MAAO;AAGL,UAAA,IACE,eAAe,QAAA,IACf,UAAA,CAAW,UAAA,CAAW,QAAA,GAAW,GAAG,CAAA,IACpC,UAAA,CAAW,QAAA,CAAS,GAAA,GAAM,WAAW,GAAG,CAAA,IACxC,WAAW,QAAA,CAAS,GAAA,GAAM,QAAQ,CAAA,EAClC;AACA,YAAA,SAAA,CAAU,GAAA,CAAI,IAAI,KAAK,CAAA;AAAA,UACzB;AAAA,QACF;AAAA,MACF;AAEA,MAAA,OAAO,SAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,MAAM,WAAW;AAAA,GACpB;AAGA,EAAA,MAAM,YAAA,GAAe,eAAA,KAAoB,MAAA,GAAY,eAAA,GAAkB,YAAA,IAAgB,EAAA;AACvF,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,IAAI,KAAA,CAAM,QAAA,CAAS,gBAAgB,EAAE,CAAA;AAC3E,EAAA,MAAM,CAAC,aAAa,cAAc,CAAA,GAAI,MAAM,QAAA,CAAsB,MAAM,eAAA,CAAgB,YAAY,CAAC,CAAA;AAGrG,EAAA,MAAM,KAAA,GAAQ,eAAA,KAAoB,MAAA,GAAY,eAAA,GAAkB,aAAA;AAGhE,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,MAAM,YAAA,GAAe,eAAA,KAAoB,MAAA,GAAY,eAAA,GAAkB,aAAA;AACvE,IAAA,cAAA,CAAe,eAAA,CAAgB,YAAY,CAAC,CAAA;AAAA,EAC9C,GAAG,CAAC,eAAA,EAAiB,eAAe,IAAA,EAAM,WAAA,EAAa,eAAe,CAAC,CAAA;AAGvE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,CAAC,GAAA,KAAQ,CAAC,WAAA,CAAY,GAAA,CAAI,GAAA,CAAI,KAAK,CAAC,CAAA;AAEtE,EAAA,MAAM,iBAAA,GAAoB,CAAC,CAAA,KAA8C;AACvE,IAAA,MAAM,QAAA,GAAW,EAAE,MAAA,CAAO,KAAA;AAC1B,IAAA,IAAI,oBAAoB,MAAA,EAAW;AACjC,MAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,MAAA,cAAA,CAAe,eAAA,CAAgB,QAAQ,CAAC,CAAA;AAAA,IAC1C;AACA,IAAA,QAAA,GAAW,QAAQ,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,CAAC,GAAA,KAAa;AACnC,IAAA,MAAM,QAAA,GAAW,WAAA,GAAc,GAAA,CAAI,KAAA,GAAQ,KAAA,GAAQ,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,GAAA,CAAI,KAAK,CAAA,CAAA,GAAK,GAAA,CAAI,KAAA;AACjF,IAAA,IAAI,oBAAoB,MAAA,EAAW;AAEjC,MAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,MAAA,IAAI,WAAA,EAAa;AACf,QAAA,cAAA,qBAAmB,GAAA,CAAI,CAAC,GAAA,CAAI,KAAK,CAAC,CAAC,CAAA;AAAA,MACrC,CAAA,MAAO;AACL,QAAA,cAAA,CAAe,eAAA,CAAgB,QAAQ,CAAC,CAAA;AAAA,MAC1C;AAAA,IACF;AAEA,IAAA,QAAA,GAAW,QAAQ,CAAA;AACnB,IAAA,UAAA,GAAa,GAAG,CAAA;AAAA,EAClB,CAAA;AAEA,EAAA,2CACG,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,4BAAA,EAA8B,SAAS,KACvD,KAAA,oBACC,KAAA,CAAA,aAAA,CAAC,WAAM,OAAA,EAAS,EAAA,EAAI,WAAU,uBAAA,EAAA,EAC3B,KACH,mBAEF,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iBAAA,EAAA,kBACb,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA,EAAU,iBAAA;AAAA,MACV,QAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,SAAA,EAAW;AAAA;AAAA,GAEf,CAAA,EACC,aAAA,CAAc,MAAA,GAAS,CAAA,wCACrB,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,sBAAA,EAAwB,aAAa,CAAA,EAAA,EACrD,aAAA,CAAc,GAAA,CAAI,CAAC,KAAK,KAAA,qBACvB,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,CAAA,EAAG,GAAA,CAAI,KAAK,IAAI,KAAK,CAAA,CAAA;AAAA,MAC1B,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,MAAM,cAAA,CAAe,GAAG,CAAA;AAAA,MACjC,QAAA;AAAA,MACA,SAAA,EAAU;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,EAAA,EAAI,WAAU,uBAAA,EAAwB,CAAA;AAAA,oBAClD,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,IAAA,EAAM,GAAA,CAAI,KAAM;AAAA,GAEpB,CACH,CAEJ,CAAA;AAEJ;;;;"}

package/dist/index.d.ts

@@ -883,6 +883,29 @@ export declare interface InputProps extends default_2.InputHTMLAttributes<HTMLIn
     endIcon?: Icon;
 }
 
+export declare function InputWithTags({ title, placeholder, tags, value: controlledValue, defaultValue, onChange, onTagClick, singleValue, className, inputClassName, tagsClassName, disabled, name, id, required, maxLength, minLength, rows, }: InputWithTagsProps): React_2.JSX.Element;
+
+export declare interface InputWithTagsProps {
+    title: string;
+    placeholder?: string;
+    tags: Tag[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onTagClick?: (tag: Tag) => void;
+    singleValue?: boolean;
+    className?: string;
+    inputClassName?: string;
+    tagsClassName?: string;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    required?: boolean;
+    maxLength?: number;
+    minLength?: number;
+    rows?: number;
+}
+
 declare type InvokeAction = {
     type: typeof AnswersActions.INVOKE_ACTION;
     payload: {
@@ -1143,6 +1166,11 @@ export declare const TableHeader: React_2.ForwardRefExoticComponent<React_2.HTML
 
 export declare const TableRow: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableRowElement> & React_2.RefAttributes<HTMLTableRowElement>>;
 
+export declare interface Tag {
+    label: string;
+    value: string;
+}
+
 export declare const Textarea: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React_2.RefAttributes<HTMLTextAreaElement>>;
 
 declare interface TextConfig {