@zenify-omni/chat-ui-react-js 0.1.0

package/components/ui/table.js

@@ -0,0 +1,245 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./select.js";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon
+} from "@radix-ui/react-icons";
+import { Button } from "../custom/button.js";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const Table = React.forwardRef(
+  ({ className, containerClassName, scrollContainerRef, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative w-full overflow-auto",
+        className,
+        containerClassName
+      ),
+      ref: scrollContainerRef,
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  )
+);
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors hover:bg-accent data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "w-auto whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+const Pagination = ({
+  className,
+  totalRecords,
+  page,
+  pageSize,
+  setPage,
+  setPageSize,
+  allowPageInput = false,
+  pageSizeOptions = [10, 20, 30, 40, 50, 100]
+}) => {
+  const { t } = useTranslation();
+  const pageCount = Math.ceil(totalRecords / pageSize) || 1;
+  const [inputPage, setInputPage] = React.useState(String(page));
+  React.useEffect(() => {
+    setInputPage(String(page));
+  }, [page]);
+  const handlePageInputCommit = () => {
+    const num = parseInt(inputPage, 10);
+    if (!num || num < 1 || num > pageCount || num === page) {
+      setInputPage(String(page));
+      return;
+    }
+    setPage(num);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mt-4 flex items-center justify-between overflow-auto px-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("common:label.show", { defaultValue: "Hi\u1EC3n th\u1ECB" }) }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: `${pageSize}`,
+              onValueChange: (value) => {
+                setPageSize(Number(value));
+              },
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: pageSize }) }),
+                /* @__PURE__ */ jsx(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("common:table.ofTotalRecords", { totalRecords }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6 p-1", children: [
+          allowPageInput ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1 text-sm font-medium", children: [
+            /* @__PURE__ */ jsx("span", { children: t("common:label.page") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "numeric",
+                value: inputPage,
+                onChange: (e) => {
+                  const val = e.target.value;
+                  if (val === "" || /^[1-9]\d*$/.test(val)) {
+                    setInputPage(val);
+                  }
+                },
+                onBlur: handlePageInputCommit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    handlePageInputCommit();
+                    e.target.blur();
+                  }
+                },
+                className: "h-8 w-12 rounded-md !border bg-background px-2 text-center text-sm focus:outline-none focus:ring-1 focus:ring-ring"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "/ ",
+              pageCount
+            ] })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: t("common:table.pageOfCount", { page, pageCount }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                className: "hidden h-8 w-8 p-0 lg:flex",
+                onClick: () => setPage(1),
+                disabled: page === 1,
+                children: /* @__PURE__ */ jsx(DoubleArrowLeftIcon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                className: "h-8 w-8 p-0",
+                onClick: () => setPage(page - 1),
+                disabled: page === 1,
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                className: "h-8 w-8 p-0",
+                onClick: () => setPage(page + 1),
+                disabled: page === pageCount,
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                className: "hidden h-8 w-8 p-0 lg:flex",
+                onClick: () => setPage(pageCount),
+                disabled: page === pageCount,
+                children: /* @__PURE__ */ jsx(DoubleArrowRightIcon, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Pagination,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/components/ui/tabs.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const Tabs = TabsPrimitive.Root;
+const tabListVariants = cva(
+  "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        zenify: "space-x-2 bg-transparent",
+        underline: "h-auto rounded-none bg-transparent p-0 border-b border-border-subtle space-x-4",
+        pill: "inline-flex flex-wrap items-center gap-2 h-auto rounded-lg bg-surface-subtle p-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const tabTriggerVariants = cva(
+  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
+  {
+    variants: {
+      variant: {
+        default: "data-[state=active]:bg-background data-[state=active]:text-foreground",
+        zenify: "border border-border bg-card px-4 py-2 font-normal data-[state=active]:bg-secondary data-[state=active]:text-secondary-foreground data-[state=active]:border-secondary-foreground",
+        underline: "rounded-none px-0 py-2 border-0 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:shadow-none",
+        pill: "gap-2 rounded-lg border border-transparent px-3 py-0 h-10 font-medium text-muted-foreground shadow-none data-[state=active]:border-primary/20 data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const TabsList = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(tabListVariants({ variant, className })),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(
+  ({ className, variant, badge, badgeClassName, ...props }, ref) => /* @__PURE__ */ jsxs(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(tabTriggerVariants({ variant, className })),
+      ...props,
+      children: [
+        props?.children,
+        badge && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "absolute right-3 top-[50%] flex h-5 w-5 -translate-y-1/2 translate-x-2 transform items-center justify-center rounded-full bg-destructive text-xs font-bold text-white",
+              badgeClassName
+            ),
+            children: badge
+          }
+        )
+      ]
+    }
+  )
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};

package/components/ui/textarea.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const fieldVariants = cva("", {
+  variants: {
+    size: {
+      small: "text-xs",
+      default: "text-sm"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const Textarea = React.forwardRef(({ className, size, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted",
+        className,
+        fieldVariants({ size })
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

package/components/ui/tooltip.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/utils.js";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(
+  ({ className, sideOffset = 4, variant = "default", ...props }, ref) => {
+    const variantStyles = {
+      default: "bg-primary text-primary-foreground",
+      dark: "bg-foreground text-background",
+      light: "bg-surface-subtle text-foreground border border-border-subtle",
+      error: "bg-destructive text-destructive-foreground",
+      success: "bg-success text-success-foreground",
+      warning: "bg-warning text-warning-foreground"
+    };
+    return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      TooltipPrimitive.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "z-[999999] overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+          "max-w-[400px] whitespace-normal break-words",
+          variantStyles[variant],
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/components/workflow-editor/nodes/ticket/picker-field.js

@@ -0,0 +1,233 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, forwardRef } from "react";
+import { MentionsInput, Mention } from "react-mentions";
+import { cn } from "../../../../lib/utils.js";
+import { Skeleton } from "../../../ui/skeleton.js";
+import { ChevronRight, ChevronDown } from "lucide-react";
+function LoadingContainer() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative flex cursor-pointer flex-col gap-2 truncate px-2 py-1.5 text-sm outline-none transition-colors"
+      ),
+      children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-6" }, index))
+    }
+  );
+}
+const PickerField = forwardRef(function PickerField2({
+  value,
+  onChange,
+  placeholder,
+  isLoading,
+  options,
+  singleLineStyleProps = {},
+  suggestionStyle = {},
+  singleLine = true,
+  disabled = false,
+  ...props
+}, ref) {
+  const [expandedGroups, setExpandedGroups] = useState(/* @__PURE__ */ new Set());
+  const toggleGroup = useCallback((key) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const getFilterOptions = (query, callback) => {
+    const filterOptions = options.filter(
+      (option) => option.display.toLowerCase().includes(query.trim().toLowerCase())
+    );
+    callback(filterOptions);
+  };
+  return /* @__PURE__ */ jsx(
+    MentionsInput,
+    {
+      inputRef: ref,
+      value: value ?? "",
+      singleLine,
+      disabled,
+      ignoreAccents: true,
+      className: cn(
+        `text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring`
+      ),
+      style: {
+        width: "100%",
+        minWidth: 0,
+        overflow: "visible",
+        control: {
+          padding: "4px 12px",
+          overflow: "hidden"
+        },
+        highlighter: {
+          padding: "4px 12px"
+        },
+        "&singleLine": {
+          input: {
+            height: "36px",
+            padding: "4px 12px",
+            borderWidth: "1px",
+            "--borderColor": "214.3 31.8% 91.4%",
+            borderColor: "hsl(var(--borderColor))",
+            "--backgroundColor": "0 0% 100%",
+            backgroundColor: "hsl(var(--backgroundColor))",
+            borderRadius: "6px",
+            outline: "none",
+            ...singleLineStyleProps,
+            ...disabled && {
+              backgroundColor: "hsl(var(--muted))",
+              cursor: "not-allowed"
+            }
+          }
+        },
+        "&multiLine": {
+          highlighter: {
+            padding: "4px 12px",
+            minHeight: "120px"
+          },
+          input: {
+            height: "120px",
+            padding: "4px 12px",
+            borderWidth: "1px",
+            "--borderColor": "214.3 31.8% 91.4%",
+            borderColor: "hsl(var(--borderColor))",
+            "--backgroundColor": "0 0% 100%",
+            backgroundColor: "hsl(var(--backgroundColor))",
+            borderRadius: "6px",
+            outline: "none"
+          }
+        },
+        suggestions: {
+          list: {
+            maxHeight: "350px",
+            overflow: "auto",
+            transition: "all 0.2s ease",
+            listStyle: "none",
+            padding: 0,
+            margin: 0
+          },
+          item: {
+            listStyle: "none",
+            "&focused": {
+              background: "#F0F4F4"
+            }
+          },
+          ...suggestionStyle
+        }
+      },
+      onChange: (event, newValue, newPlainTextValue, mentions) => {
+        onChange({
+          event,
+          newValue,
+          newPlainTextValue,
+          mentions
+        });
+      },
+      placeholder,
+      onBlur: props?.onBlur,
+      customSuggestionsContainer: (children) => {
+        const buildTree = (elements) => {
+          const tree2 = {};
+          elements.forEach((element) => {
+            if (element && element.props && element.props.suggestion) {
+              const { groups = [] } = element.props.suggestion;
+              if (!groups || groups.length === 0) {
+                if (!tree2["__root__"]) {
+                  tree2["__root__"] = { items: [], children: {} };
+                }
+                tree2["__root__"].items.push(element);
+                return;
+              }
+              let currentLevel = tree2;
+              groups.forEach((groupName, index) => {
+                if (!currentLevel[groupName]) {
+                  currentLevel[groupName] = { items: [], children: {} };
+                }
+                if (index === groups.length - 1) {
+                  currentLevel[groupName].items.push(element);
+                } else {
+                  currentLevel = currentLevel[groupName].children;
+                }
+              });
+            }
+          });
+          return tree2;
+        };
+        const renderTree = (tree2, level = 0) => {
+          return Object.keys(tree2).map((key) => {
+            if (key === "__root__") {
+              return tree2[key].items;
+            }
+            const { items, children: children2 } = tree2[key];
+            const hasChildren = Object.keys(children2).length > 0;
+            const isCollapsible = level > 0;
+            const isExpanded = !isCollapsible || expandedGroups.has(key);
+            return /* @__PURE__ */ jsxs("div", { style: { marginLeft: level > 0 ? "2px" : "0" }, children: [
+              /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  className: cn(
+                    "border-b px-1 py-1.5 font-semibold",
+                    level === 0 && "text-sm",
+                    level > 0 && "flex cursor-pointer items-center gap-1 text-muted-foreground hover:text-foreground"
+                  ),
+                  style: level > 0 ? { fontSize: "0.85em" } : {},
+                  onClick: isCollapsible ? (e) => {
+                    e.stopPropagation();
+                    toggleGroup(key);
+                  } : void 0,
+                  children: [
+                    isCollapsible && (isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" })),
+                    key
+                  ]
+                }
+              ),
+              isExpanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: items }),
+              isExpanded && hasChildren && /* @__PURE__ */ jsx("div", { children: renderTree(children2, level + 1) })
+            ] }, key);
+          });
+        };
+        const tree = buildTree(children.props.children);
+        return /* @__PURE__ */ jsxs("div", { className: "z-50 min-w-[8rem] max-w-[15rem] overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: [
+          isLoading && /* @__PURE__ */ jsx(LoadingContainer, {}),
+          !isLoading && /* @__PURE__ */ jsx("div", { className: "max-h-72 [&_li]:list-none [&_ul]:m-0 [&_ul]:list-none [&_ul]:p-0", children: renderTree(tree) })
+        ] });
+      },
+      children: /* @__PURE__ */ jsx(
+        Mention,
+        {
+          trigger: new RegExp("(@([^\\s@]*))$"),
+          data: getFilterOptions,
+          markup: props?.markup ?? "{{$target.__id__}}",
+          displayTransform: (id, key) => props.displayTransform?.(id, key) || `{{${key}}}`,
+          allowSpaceInQuery: true,
+          renderSuggestion: (entry, search, highlightedDisplay, index, focused) => {
+            const isDisabled = entry.disabled === true;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-mention-item": true,
+                "data-mention-focused": focused ? "true" : "false",
+                className: cn(
+                  "relative my-0.5 flex select-none items-center gap-2 truncate rounded-sm px-2 py-1.5 text-xs outline-none transition-colors",
+                  isDisabled ? "cursor-not-allowed bg-muted text-muted-foreground" : "cursor-pointer hover:bg-[#F0F4F4]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: highlightedDisplay }),
+                  isDisabled && /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px]", children: "(disabled)" })
+                ]
+              },
+              index
+            );
+          }
+        }
+      )
+    }
+  );
+});
+var picker_field_default = PickerField;
+export {
+  picker_field_default as default
+};