@altimateai/ui-components 0.0.4-beta.2 → 0.0.5-beta.1

package/dist/storybook/Select.stories.tsx

@@ -157,22 +157,153 @@ export const ComboboxExample: StoryFn = () => {
 
   const [value, setValue] = useState("");
 
+  const handleChange = (newValue: string | string[]) => {
+    setValue(newValue as string);
+  };
+
   return (
     <div className="al-flex al-flex-col al-gap-4 al-justify-start al-items-start">
+      <h3 className="al-text-lg al-font-medium">Single Select</h3>
       <Combobox
         options={options}
         value={value}
-        onChange={setValue}
+        onChange={handleChange}
         placeholder="Select framework..."
       />
 
       <Combobox
         options={options}
         value={value}
-        onChange={setValue}
+        onChange={handleChange}
         placeholder="Custom width..."
         buttonProps={{ className: "al-w-[300px]" }}
       />
+
+      <Combobox
+        options={options}
+        value={value}
+        onChange={handleChange}
+        placeholder="With icon..."
+        icon={<DatabaseIcon className="al-mr-2" />}
+      />
     </div>
   );
 };
+
+export const ComboboxMultiSelectExample: StoryFn = () => {
+  const options = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+    { value: "remix", label: "Remix" },
+    { value: "gatsby", label: "Gatsby" },
+    { value: "ember", label: "Ember.js" },
+  ];
+
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [selectedValuesWithApply, setSelectedValuesWithApply] = useState<string[]>([
+    "react",
+    "vue",
+  ]);
+
+  const handleMultiSelectChange = (newValue: string | string[]) => {
+    setSelectedValues(Array.isArray(newValue) ? newValue : []);
+  };
+
+  const handleMultiSelectWithApplyChange = (newValue: string | string[]) => {
+    setSelectedValuesWithApply(Array.isArray(newValue) ? newValue : []);
+  };
+
+  return (
+    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Multi-Select (Auto-Apply)</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Changes are applied immediately when selecting/deselecting options
+        </p>
+        <Combobox
+          options={options}
+          value={selectedValues}
+          onChange={handleMultiSelectChange}
+          placeholder="Select frameworks..."
+          multiSelect={true}
+          buttonProps={{ className: "al-w-[250px]" }}
+        />
+        <div className="al-text-sm">
+          Selected: {selectedValues.length > 0 ? selectedValues.join(", ") : "None"}
+        </div>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Multi-Select with Apply Button</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Changes are only applied when clicking the Apply button
+        </p>
+        <Combobox
+          options={options}
+          value={selectedValuesWithApply}
+          onChange={handleMultiSelectWithApplyChange}
+          placeholder="Select frameworks..."
+          multiSelect={true}
+          showApplyButton={true}
+          buttonProps={{ className: "al-w-[250px]" }}
+        />
+        <div className="al-text-sm">
+          Selected:{" "}
+          {selectedValuesWithApply.length > 0 ? selectedValuesWithApply.join(", ") : "None"}
+        </div>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Columns Selector Example</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Similar to the UI shown in the screenshot
+        </p>
+        <ComboboxColumnsExample />
+      </div>
+    </div>
+  );
+};
+
+// Example that matches the UI in the screenshot
+const ComboboxColumnsExample = () => {
+  const options = [
+    { value: "est_cost", label: "Est. Cost" },
+    { value: "exec_time", label: "Exec. Time" },
+    { value: "insights", label: "Insights" },
+    { value: "query_hash", label: "Query Hash" },
+    { value: "query_text", label: "Query Text" },
+    { value: "query_type", label: "Query Type" },
+    { value: "timestamp", label: "Timestamp" },
+    { value: "user", label: "User" },
+  ];
+
+  const [selectedColumns, setSelectedColumns] = useState<string[]>([
+    "est_cost",
+    "exec_time",
+    "insights",
+    "query_hash",
+    "query_text",
+    "query_type",
+    "timestamp",
+    "user",
+  ]);
+
+  const handleColumnsChange = (newValue: string | string[]) => {
+    setSelectedColumns(Array.isArray(newValue) ? newValue : []);
+  };
+
+  return (
+    <Combobox
+      options={options}
+      value={selectedColumns}
+      onChange={handleColumnsChange}
+      placeholder="Columns"
+      multiSelect={true}
+      showApplyButton={true}
+      buttonProps={{ className: "al-w-[200px]" }}
+    />
+  );
+};

package/dist/{types-BKWf381e.d.ts → types-ClqBUI2s.d.ts}

@@ -70,7 +70,10 @@ interface ChatbotProviderProps extends ChatbotProps {
     };
     contextOptions?: ContextOption[];
     isMarkdownResponse?: boolean;
-    models?: string[];
+    models?: {
+        label: string;
+        value: string;
+    }[];
 }
 type InteractionType = "text" | "select" | "multiSelect" | "confirm";
 interface InteractionChoice {
@@ -130,7 +133,10 @@ interface ChatState {
     disableContext?: boolean;
     requestParams?: RequestInit;
     isMarkdownResponse?: boolean;
-    models?: string[];
+    models?: {
+        label: string;
+        value: string;
+    }[];
     components?: {
         feedback?: ReactNode;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.4-beta.2",
+  "version": "0.0.5-beta.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"
@@ -52,4 +52,4 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }
-}
+}