@dust-tt/sparkle 0.2.557 → 0.2.558

package/src/logo/src/platforms/Datadog.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1775_60)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.3022 21.9722H2.00626V18.9888H3.3022C4.23586 18.9888 4.70332 19.4591 4.70332 20.3992C4.70332 21.4473 4.23586 21.9722 3.3022 21.9722ZM2.56041 21.492H3.2185C3.83886 21.492 4.14867 21.1278 4.14867 20.3987C4.14867 19.7781 3.83886 19.4678 3.2185 19.4678H2.56041V21.492ZM5.28396 21.9722H4.71506L5.98402 18.9888H6.57965L7.87634 21.9722H7.28021L6.90395 21.1585H5.94629L6.13667 20.679H6.75779L6.26834 19.5582L5.28396 21.9722ZM7.56303 18.9888H9.83162V19.4685H8.9744V21.9722H8.4205V19.4685H7.56278L7.56303 18.9888ZM10.1164 21.9722H9.54754L10.8168 18.9888H11.4124L12.7088 21.9722H12.1127L11.7364 21.1585H10.7788L10.9687 20.679H11.5898L11.1003 19.5582L10.1164 21.9722ZM14.3723 21.9722H13.0763V18.9888H14.3723C15.3064 18.9888 15.7734 19.4591 15.7734 20.3992C15.7734 21.4473 15.3064 21.9722 14.3723 21.9722ZM13.6302 21.492H14.2888C14.9087 21.492 15.2192 21.1278 15.2192 20.3987C15.2192 19.7781 14.9087 19.4678 14.2888 19.4678H13.6302V21.492ZM16.1484 20.4847C16.1484 19.473 16.6494 18.9674 17.65 18.9674C18.6354 18.9674 19.1278 19.473 19.1278 20.4847C19.1278 21.4903 18.6354 21.9937 17.65 21.9937C16.6936 21.9935 16.1936 21.4903 16.1484 20.4847ZM17.65 21.5128C18.2519 21.5128 18.5529 21.166 18.5529 20.4719C18.5529 19.7886 18.2519 19.4466 17.65 19.4466C17.0324 19.4466 16.7238 19.7886 16.7238 20.4719C16.7241 21.166 17.0326 21.5128 17.65 21.5128ZM21.4396 20.765V21.4633C21.3117 21.4968 21.197 21.513 21.0968 21.513C20.419 21.513 20.0807 21.155 20.0807 20.4387C20.0807 19.7774 20.44 19.4468 21.1573 19.4468C21.4571 19.4468 21.7357 19.5025 21.9935 19.614V19.113C21.7359 19.0158 21.4434 18.9669 21.1156 18.9669C20.0425 18.9669 19.5056 19.4571 19.5056 20.4384C19.5056 21.4743 20.0332 21.9932 21.0883 21.9932C21.4514 21.9932 21.7529 21.9402 21.9938 21.8343V20.2735H21.0991L20.9119 20.7645H21.4396V20.765Z" fill="#632CA6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9999 13.2612L15.6812 12.3912L14.5812 14.2288L13.3017 13.8548L12.1752 15.5742L12.2329 16.1154L18.3583 14.9866L18.0025 11.1592L16.9999 13.2612ZM11.2877 11.6112L12.2706 11.4761C12.4295 11.5475 12.5402 11.5747 12.7308 11.6232C13.0279 11.7004 13.3714 11.7746 13.8803 11.5183C13.9988 11.4596 14.2456 11.234 14.3453 11.1053L18.3718 10.375L18.7825 15.3464L11.8841 16.5896L11.2877 11.6112ZM18.767 9.81984L18.3695 9.89554L17.606 2.00647L4.5954 3.51503L6.1984 16.5224L7.72144 16.3013C7.59977 16.1276 7.41039 15.9175 7.08709 15.6487C6.63862 15.2762 6.79702 14.6431 7.06186 14.2433C7.41189 13.568 9.21551 12.7098 9.11332 11.6305C9.0766 11.2379 9.01439 10.7273 8.64986 10.377C8.63612 10.5224 8.66086 10.6621 8.66086 10.6621C8.66086 10.6621 8.5112 10.4712 8.43675 10.2111C8.36279 10.1112 8.30458 10.0794 8.22588 9.94601C8.16966 10.1002 8.17716 10.279 8.17716 10.279C8.17716 10.279 8.05474 9.98998 8.035 9.74588C7.96254 9.85506 7.9443 10.0624 7.9443 10.0624C7.9443 10.0624 7.7854 9.60672 7.82163 9.36112C7.74918 9.14751 7.53406 8.72352 7.59477 7.76012C7.99177 8.0382 8.86598 7.97224 9.20652 7.47031C9.31945 7.30391 9.39715 6.85019 9.15005 5.95575C8.9914 5.38236 8.59865 4.52839 8.44549 4.20435L8.42725 4.21759C8.50795 4.47867 8.67435 5.02558 8.73831 5.29117C8.93169 6.09566 8.98341 6.37599 8.89271 6.74701C8.81551 7.06956 8.63038 7.28042 8.16117 7.51628C7.69196 7.75288 7.0691 7.17699 7.02988 7.14526C6.57391 6.78199 6.22113 6.18961 6.18191 5.90154C6.14093 5.58648 6.36354 5.39735 6.47572 5.13976C6.31507 5.18548 6.13619 5.26718 6.13619 5.26718C6.13619 5.26718 6.3498 5.04607 6.61314 4.85494C6.72232 4.78273 6.78628 4.73676 6.90121 4.64132C6.73481 4.63857 6.59965 4.64332 6.59965 4.64332C6.59965 4.64332 6.87722 4.49342 7.16479 4.38423C6.95442 4.37499 6.7528 4.38273 6.7528 4.38273C6.7528 4.38273 7.37216 4.10566 7.86111 3.90253C8.1974 3.76462 8.52594 3.80535 8.71058 4.07243C8.95292 4.42221 9.20752 4.61209 9.74693 4.72977C10.0782 4.58286 10.1787 4.50766 10.5949 4.39398C10.9612 3.99098 11.2487 3.93901 11.2487 3.93901C11.2487 3.93901 11.1061 4.06993 11.0679 4.27555C11.2755 4.1119 11.5031 3.97524 11.5031 3.97524C11.5031 3.97524 11.4149 4.08392 11.3327 4.25681L11.3517 4.2853C11.594 4.13989 11.8788 4.02546 11.8788 4.02546C11.8788 4.02546 11.7974 4.12839 11.702 4.26156C11.8848 4.26006 12.2554 4.26931 12.3993 4.28555C13.2485 4.30428 13.4246 3.37886 13.7504 3.26268C14.1584 3.11703 14.3408 3.02883 15.0361 3.7119C15.6325 4.29854 16.0987 5.34788 15.8671 5.58298C15.673 5.77811 15.2902 5.50678 14.866 4.97811C14.6419 4.69804 14.4722 4.36699 14.3928 3.94626C14.3258 3.59123 14.065 3.38536 14.065 3.38536C14.065 3.38536 14.2161 3.72265 14.2161 4.01971C14.2161 4.18211 14.2364 4.78898 14.4967 5.12977C14.471 5.17949 14.459 5.37611 14.4305 5.41384C14.1277 5.04782 13.4773 4.78598 13.3712 4.70878C13.7302 5.00285 14.5552 5.67843 14.872 6.32627C15.1718 6.93864 14.9951 7.50004 15.1468 7.6452C15.19 7.68667 15.7914 8.4362 15.9071 8.81272C16.109 9.46881 15.9191 10.1586 15.655 10.5864L14.9172 10.7013C14.8093 10.6713 14.7366 10.6563 14.6399 10.6003C14.6933 10.5059 14.7993 10.2706 14.8003 10.2218L14.7585 10.1489C14.5289 10.4742 14.1444 10.79 13.8249 10.9714C13.4066 11.2085 12.9247 11.1717 12.6109 11.0748C11.7204 10.8002 10.8782 10.1983 10.6751 10.0402C10.6751 10.0402 10.6689 10.1664 10.7071 10.1949C10.9314 10.4482 11.4459 10.9062 11.9433 11.2257L10.8832 11.3424L11.3844 15.2442C11.1623 15.2759 11.1276 15.2917 10.8845 15.3261C10.6701 14.5689 10.2601 14.0744 9.81189 13.7864C9.41663 13.5323 8.87147 13.4751 8.3498 13.5785L8.31632 13.6175C8.6791 13.5797 9.10733 13.6322 9.5473 13.9108C9.97903 14.1839 10.3271 14.8892 10.4552 15.3137C10.6194 15.8563 10.7328 16.437 10.2911 17.0523C9.97703 17.4898 9.06011 17.7314 8.31907 17.2085C8.51695 17.5268 8.78428 17.7869 9.14455 17.8358C9.67922 17.9085 10.1867 17.8156 10.5359 17.4571C10.834 17.1505 10.9924 16.5094 10.9507 15.8343L11.4226 15.7659L11.593 16.9776L19.4044 16.037L18.767 9.81984ZM14.0145 6.52914C13.9928 6.57886 13.9583 6.61159 14.0098 6.77349L14.0128 6.78273L14.021 6.80372L14.0425 6.85219C14.1352 7.04182 14.2369 7.22046 14.4073 7.3119C14.4512 7.30441 14.497 7.29941 14.5442 7.29716C14.7041 7.29017 14.805 7.3154 14.8687 7.34988C14.8745 7.3179 14.8757 7.27143 14.8722 7.20272C14.8597 6.96262 14.9197 6.55438 14.4582 6.33951C14.2841 6.25881 14.0397 6.28355 13.9583 6.38448C13.973 6.38648 13.9863 6.38948 13.9968 6.39298C14.1202 6.4357 14.0367 6.47818 14.0145 6.52914ZM15.3082 8.76924C15.2477 8.73576 14.9649 8.74901 14.766 8.77274C14.3873 8.81746 13.9783 8.94863 13.8888 9.01859C13.7259 9.14451 13.7999 9.36387 13.9203 9.45407C14.2579 9.70616 14.5537 9.8753 14.8657 9.83408C15.0574 9.80884 15.2265 9.50528 15.3462 9.22996C15.4281 9.04032 15.4281 8.8357 15.3082 8.76924ZM11.955 6.82621C12.0617 6.72477 11.4231 6.5916 10.9274 6.92964C10.5619 7.17899 10.5502 7.71365 10.9002 8.01671C10.9352 8.0467 10.9642 8.06793 10.9909 8.08542C11.0931 8.0372 11.2095 7.98873 11.3437 7.94526C11.57 7.8718 11.7584 7.83383 11.9131 7.81359C11.987 7.73089 12.0732 7.58523 12.0517 7.3214C12.0223 6.96337 11.7514 7.02009 11.955 6.82621Z" fill="#632CA6"/>
+</g>
+<defs>
+<clipPath id="clip0_1775_60">
+<rect width="20" height="20" fill="white" transform="translate(2 2)"/>
+</clipPath>
+</defs>
+</svg>

package/src/stories/MultiPageDialog.stories.tsx

@@ -117,13 +117,19 @@ const samplePages: MultiPageDialogPage[] = [
 
 const MultiPageDialogDemo = () => {
   const [currentPageId, setCurrentPageId] = useState("profile");
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleSave = () => {
     alert("Changes saved!");
+    setIsOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsOpen(false);
   };
 
   return (
-    <MultiPageDialog>
+    <MultiPageDialog open={isOpen} onOpenChange={setIsOpen}>
       <MultiPageDialogTrigger asChild>
         <Button label="Open Multi-Page Dialog" />
       </MultiPageDialogTrigger>
@@ -132,7 +138,16 @@ const MultiPageDialogDemo = () => {
         currentPageId={currentPageId}
         onPageChange={setCurrentPageId}
         size="xl"
-        onSave={handleSave}
+        leftButton={{
+          label: "Cancel",
+          variant: "outline",
+          onClick: handleCancel,
+        }}
+        rightButton={{
+          label: "Save Changes",
+          variant: "primary",
+          onClick: handleSave,
+        }}
       />
     </MultiPageDialog>
   );
@@ -142,9 +157,150 @@ export const Default: Story = {
   render: () => <MultiPageDialogDemo />,
 };
 
+// Simple two-button example (like your screenshot)
+export const SimpleToolDialog: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedTools, setSelectedTools] = useState<string[]>([]);
+
+    const handleAddTools = () => {
+      alert(
+        `Adding ${selectedTools.length} tools: ${selectedTools.join(", ")}`
+      );
+      setIsOpen(false);
+    };
+
+    const handleCancel = () => {
+      setSelectedTools([]);
+      setIsOpen(false);
+    };
+
+    const toggleTool = (tool: string) => {
+      setSelectedTools((prev) =>
+        prev.includes(tool) ? prev.filter((t) => t !== tool) : [...prev, tool]
+      );
+    };
+
+    const toolPages: MultiPageDialogPage[] = [
+      {
+        id: "tool-selection",
+        title: "Add tools",
+        content: (
+          <div className="s-space-y-6">
+            <div className="s-space-y-4">
+              <h3 className="s-text-lg s-font-semibold">Capabilities</h3>
+              <div className="s-grid s-grid-cols-2 s-gap-3">
+                {[
+                  {
+                    name: "Image generation",
+                    desc: "Generate images using natural language",
+                  },
+                  {
+                    name: "Run agent",
+                    desc: "Run a child agent (agent as tool)",
+                  },
+                  {
+                    name: "Interactive content",
+                    desc: "Generate interactive content",
+                  },
+                  {
+                    name: "Agent memory",
+                    desc: "Store and recall information",
+                  },
+                ].map((tool) => (
+                  <div
+                    key={tool.name}
+                    className={`s-cursor-pointer s-rounded-lg s-border s-p-4 s-transition-colors hover:s-bg-gray-50 ${
+                      selectedTools.includes(tool.name)
+                        ? "s-border-blue-300 s-bg-blue-50"
+                        : "s-border-gray-200"
+                    }`}
+                    onClick={() => toggleTool(tool.name)}
+                  >
+                    <div className="s-flex s-items-start s-justify-between">
+                      <div>
+                        <h4 className="s-font-medium">{tool.name}</h4>
+                        <p className="s-text-sm s-text-gray-600">{tool.desc}</p>
+                      </div>
+                      {selectedTools.includes(tool.name) && (
+                        <span className="s-rounded s-bg-green-100 s-px-2 s-py-1 s-text-xs s-text-green-700">
+                          ADDED
+                        </span>
+                      )}
+                    </div>
+                    {!selectedTools.includes(tool.name) && (
+                      <button className="s-mt-2 s-text-sm s-text-blue-600 hover:s-text-blue-700">
+                        + Add
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {selectedTools.length > 0 && (
+              <div className="s-space-y-3">
+                <h4 className="s-font-medium">Added tools</h4>
+                <div className="s-flex s-flex-wrap s-gap-2">
+                  {selectedTools.map((tool) => (
+                    <span
+                      key={tool}
+                      className="s-flex s-items-center s-gap-1 s-rounded s-bg-gray-100 s-px-3 s-py-1 s-text-sm"
+                    >
+                      {tool}
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleTool(tool);
+                        }}
+                        className="s-ml-1 s-text-gray-500 hover:s-text-gray-700"
+                      >
+                        ×
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ),
+      },
+    ];
+
+    return (
+      <MultiPageDialog open={isOpen} onOpenChange={setIsOpen}>
+        <MultiPageDialogTrigger asChild>
+          <Button label="Add tools" />
+        </MultiPageDialogTrigger>
+        <MultiPageDialogContent
+          pages={toolPages}
+          currentPageId="tool-selection"
+          onPageChange={() => {}}
+          size="xl"
+          leftButton={{
+            label: "Cancel",
+            variant: "outline",
+            onClick: handleCancel,
+          }}
+          rightButton={{
+            label:
+              selectedTools.length > 0
+                ? `Add ${selectedTools.length} tool${selectedTools.length > 1 ? "s" : ""}`
+                : "Add tools",
+            variant: "primary",
+            disabled: selectedTools.length === 0,
+            onClick: handleAddTools,
+          }}
+        />
+      </MultiPageDialog>
+    );
+  },
+};
+
 export const InteractiveContent: Story = {
   render: () => {
     const [currentPageId, setCurrentPageId] = useState("step1");
+    const [isOpen, setIsOpen] = useState(false);
     const [formData, setFormData] = useState({
       name: "",
       email: "",
@@ -154,8 +310,42 @@ export const InteractiveContent: Story = {
 
     const handleSave = () => {
       alert(`Setup completed! Data: ${JSON.stringify(formData, null, 2)}`);
+      setIsOpen(false);
+    };
+
+    const handleCancel = () => {
+      setIsOpen(false);
+    };
+
+    const handleNext = () => {
+      if (currentPageId === "step1") {
+        setCurrentPageId("step2");
+      } else if (currentPageId === "step2") {
+        setCurrentPageId("step3");
+      }
+    };
+
+    const handlePrevious = () => {
+      if (currentPageId === "step3") {
+        setCurrentPageId("step2");
+      } else if (currentPageId === "step2") {
+        setCurrentPageId("step1");
+      }
     };
 
+    const canProceed = () => {
+      if (currentPageId === "step1") {
+        return formData.name && formData.email;
+      }
+      if (currentPageId === "step2") {
+        return formData.selectedFile;
+      }
+      return true;
+    };
+
+    const isFirstPage = currentPageId === "step1";
+    const isLastPage = currentPageId === "step3";
+
     const interactivePages: MultiPageDialogPage[] = [
       {
         id: "step1",
@@ -197,15 +387,6 @@ export const InteractiveContent: Story = {
                   }
                 />
               </div>
-              <div className="s-pt-2">
-                <Button
-                  label="Continue to File Selection"
-                  variant="primary"
-                  size="md"
-                  disabled={!formData.name || !formData.email}
-                  onClick={() => setCurrentPageId("step2")}
-                />
-              </div>
             </div>
           </div>
         ),
@@ -254,16 +435,6 @@ export const InteractiveContent: Story = {
                 </div>
               ))}
             </div>
-            {formData.selectedFile && (
-              <div className="s-pt-2">
-                <Button
-                  label="Continue to Settings"
-                  variant="primary"
-                  size="md"
-                  onClick={() => setCurrentPageId("step3")}
-                />
-              </div>
-            )}
           </div>
         ),
       },
@@ -314,7 +485,7 @@ export const InteractiveContent: Story = {
     ];
 
     return (
-      <MultiPageDialog>
+      <MultiPageDialog open={isOpen} onOpenChange={setIsOpen}>
         <MultiPageDialogTrigger asChild>
           <Button label="Open Interactive Setup" />
         </MultiPageDialogTrigger>
@@ -323,7 +494,26 @@ export const InteractiveContent: Story = {
           currentPageId={currentPageId}
           onPageChange={setCurrentPageId}
           size="lg"
-          onSave={handleSave}
+          leftButton={{
+            label: "Cancel",
+            variant: "outline",
+            onClick: handleCancel,
+          }}
+          centerButton={
+            !isFirstPage
+              ? {
+                  label: "Previous",
+                  variant: "outline",
+                  onClick: handlePrevious,
+                }
+              : undefined
+          }
+          rightButton={{
+            label: isLastPage ? "Complete Setup" : "Next",
+            variant: "primary",
+            disabled: !canProceed(),
+            onClick: isLastPage ? handleSave : handleNext,
+          }}
         />
       </MultiPageDialog>
     );
@@ -333,6 +523,7 @@ export const InteractiveContent: Story = {
 export const WithConditionalNavigation: Story = {
   render: () => {
     const [currentPageId, setCurrentPageId] = useState("data-selection");
+    const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState<string[]>([]);
     const [description, setDescription] = useState("");
 
@@ -340,8 +531,30 @@ export const WithConditionalNavigation: Story = {
       alert(
         `Configuration saved! Selected: ${selectedItems.join(", ")}, Description: ${description}`
       );
+      setIsOpen(false);
     };
 
+    const handleCancel = () => {
+      setIsOpen(false);
+    };
+
+    const handleNext = () => {
+      if (currentPageId === "data-selection") {
+        setCurrentPageId("description");
+      }
+    };
+
+    const handlePrevious = () => {
+      if (currentPageId === "description") {
+        setCurrentPageId("data-selection");
+      }
+    };
+
+    const isFirstPage = currentPageId === "data-selection";
+    const isLastPage = currentPageId === "description";
+    const canProceedFromFirst = selectedItems.length > 0;
+    const canSave = description.trim().length > 0;
+
     const conditionalPages: MultiPageDialogPage[] = [
       {
         id: "data-selection",
@@ -441,7 +654,7 @@ export const WithConditionalNavigation: Story = {
     ];
 
     return (
-      <MultiPageDialog>
+      <MultiPageDialog open={isOpen} onOpenChange={setIsOpen}>
         <MultiPageDialogTrigger asChild>
           <Button label="Open Configuration Wizard" />
         </MultiPageDialogTrigger>
@@ -450,15 +663,37 @@ export const WithConditionalNavigation: Story = {
           currentPageId={currentPageId}
           onPageChange={setCurrentPageId}
           size="lg"
-          onSave={handleSave}
-          showNavigation={true}
-          disableNext={
-            currentPageId === "data-selection" && selectedItems.length === 0
+          leftButton={{
+            label: "Cancel",
+            variant: "outline",
+            onClick: handleCancel,
+          }}
+          centerButton={
+            !isFirstPage
+              ? {
+                  label: "Previous",
+                  variant: "outline",
+                  onClick: handlePrevious,
+                }
+              : undefined
           }
-          disableSave={!description.trim()}
+          rightButton={{
+            label: isLastPage ? "Save Configuration" : "Next",
+            variant: "primary",
+            disabled: isFirstPage ? !canProceedFromFirst : !canSave,
+            onClick: isLastPage ? handleSave : handleNext,
+          }}
           footerContent={
-            <div className="s-w-full s-border s-border-border-dark">
-              This is a footer content
+            <div className="s-rounded s-bg-blue-50 s-px-3 s-py-2">
+              <p className="s-text-xs s-text-blue-700">
+                {selectedItems.length > 0 && (
+                  <>
+                    {selectedItems.length} data source
+                    {selectedItems.length !== 1 ? "s" : ""} selected •{" "}
+                  </>
+                )}
+                Step {isFirstPage ? "1" : "2"} of 2
+              </p>
             </div>
           }
         />
@@ -470,11 +705,32 @@ export const WithConditionalNavigation: Story = {
 export const ScrollableContent: Story = {
   render: () => {
     const [currentPageId, setCurrentPageId] = useState("long-form");
+    const [isOpen, setIsOpen] = useState(false);
 
     const handleSave = () => {
       alert("Long form submitted!");
+      setIsOpen(false);
     };
 
+    const handleCancel = () => {
+      setIsOpen(false);
+    };
+
+    const handleNext = () => {
+      if (currentPageId === "long-form") {
+        setCurrentPageId("summary");
+      }
+    };
+
+    const handlePrevious = () => {
+      if (currentPageId === "summary") {
+        setCurrentPageId("long-form");
+      }
+    };
+
+    const isFirstPage = currentPageId === "long-form";
+    const isLastPage = currentPageId === "summary";
+
     const scrollablePages: MultiPageDialogPage[] = [
       {
         id: "long-form",
@@ -575,7 +831,7 @@ export const ScrollableContent: Story = {
     ];
 
     return (
-      <MultiPageDialog>
+      <MultiPageDialog open={isOpen} onOpenChange={setIsOpen}>
         <MultiPageDialogTrigger asChild>
           <Button label="Open Scrollable Content Dialog" />
         </MultiPageDialogTrigger>
@@ -584,7 +840,25 @@ export const ScrollableContent: Story = {
           currentPageId={currentPageId}
           onPageChange={setCurrentPageId}
           size="lg"
-          onSave={handleSave}
+          leftButton={{
+            label: "Cancel",
+            variant: "outline",
+            onClick: handleCancel,
+          }}
+          centerButton={
+            !isFirstPage
+              ? {
+                  label: "Previous",
+                  variant: "outline",
+                  onClick: handlePrevious,
+                }
+              : undefined
+          }
+          rightButton={{
+            label: isLastPage ? "Submit Form" : "Next",
+            variant: "primary",
+            onClick: isLastPage ? handleSave : handleNext,
+          }}
         />
       </MultiPageDialog>
     );