@dust-tt/sparkle 0.2.183 → 0.2.184

package/src/stories/Page.stories.tsx

@@ -0,0 +1,389 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { ChatBubbleLeftRightIcon } from "@sparkle/icons/solid";
+
+import {
+  Avatar,
+  Button,
+  ChatBubbleBottomCenterTextIcon,
+  CloudArrowLeftRightIcon,
+  ContextItem,
+  FolderIcon,
+  GlobeAltIcon,
+  Icon,
+  Page,
+  RocketIcon,
+} from "../index_with_tw_base";
+
+const meta = {
+  title: "Modules/Page",
+  component: Page,
+} satisfies Meta<typeof Page>;
+
+export default meta;
+
+export const PageSimpleExample = () => {
+  return (
+    <Page>
+      <Page.Header
+        title="Title"
+        description="Description"
+        icon={ChatBubbleBottomCenterTextIcon}
+      />
+      <Page.P>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod
+        a massa quis lacinia. Donec euismod nisl eget nunc Lorem ipsum dolor sit
+        amet, consectetur adipiscing elit. Nullam euismod a massa quis lacinia.
+        Donec euismod nisl eget nunc
+      </Page.P>
+      <Page.SectionHeader
+        title="Section Title"
+        description="Section Description"
+        action={{ label: "Action", size: "sm" }}
+      />
+      <Page.Layout direction="horizontal">
+        <div className="s-h-16 s-w-16 s-bg-brand" />
+      </Page.Layout>
+    </Page>
+  );
+};
+
+export const QIGExample = () => {
+  return (
+    <Page>
+      <Page.Header
+        icon={RocketIcon}
+        title={
+          <>
+            Get Started: <br />
+            Quick Guide for new members
+          </>
+        }
+      />
+
+      <Page.Horizontal>
+        <Page.Vertical sizing="grow">
+          <Page.H>
+            👋 <br />
+            Hello <br /> <span className="text-success-500">@mentions</span>
+          </Page.H>
+          <Page.P>
+            In Dust, you won't find just one AI assistant, but multiple ones.
+          </Page.P>
+          <Page.P>
+            You can call any assistant at any time by typing “@” and the name of
+            the assistant.
+          </Page.P>
+        </Page.Vertical>
+        <Page.Vertical sizing="grow">
+          <img src="/static/quick_start_guide_input_bar.png" />
+        </Page.Vertical>
+      </Page.Horizontal>
+      <Page.Horizontal>
+        <Page.Vertical>
+          <Page.H>
+            👩‍🎨🦸‍♀️🥷🧑‍🚀
+            <br /> Why multiple
+            <br /> Assistants?
+          </Page.H>
+
+          <Page.P>
+            The basic assistant is{" "}
+            <span className="font-bold text-success-500">@gpt4</span>. It is a
+            raw model. “Raw” means it does not have particular instructions or
+            access to knowledge.
+          </Page.P>
+          <Page.P>
+            You also have access to assistants that use a raw model (gpt4 for
+            instance), AND give them specific instructions and access to
+            knowledge.{" "}
+            <span className="font-bold">
+              They can answer specific questions, really well.
+            </span>
+          </Page.P>
+          <Page.P>
+            Assistants can be provided by Dust, by your company (Company
+            assistants), by your coworkers (Shared assistants).
+          </Page.P>
+        </Page.Vertical>
+
+        <Page.Vertical>
+          <Page.H>
+            🛠️
+            <br />
+            How to make
+            <br />
+            an Assistant?
+          </Page.H>
+          <Page.P>You can build Assistants!</Page.P>
+          <Page.P>
+            Assistants starts with an “instruction”. A simple text, explaining
+            what you want them to do.
+          </Page.P>
+          <Page.P>
+            For instance, <span className="italic">“Act as a doctor”</span>,{" "}
+            <span className="italic">“Summarise this document”</span>,{" "}
+            <span className="italic">“What do you know about X”</span>.
+          </Page.P>
+          <Page.P>
+            You can give them access to knowledge.
+            <br />
+            We call them <span className="font-bold">Data sources.</span>
+          </Page.P>
+          <Page.P>
+            With the right Data source, assistants can answer demands like
+            <span className="italic">
+              “Have we been working with company X”
+            </span>
+            , <span className="italic">“How do we manage expenses”</span>,{" "}
+            <span className="italic">
+              “Write an intro email using the company tone of voice”...
+            </span>
+          </Page.P>
+        </Page.Vertical>
+      </Page.Horizontal>
+
+      <Page.Vertical>
+        <Page.H>
+          📚
+          <br />
+          What are
+          <br />
+          Data sources?
+        </Page.H>
+
+        <Page.P>
+          To augment your assistants with knowledge, you give them data.
+          <br /> Data can comes in different ways in Dust.{" "}
+          <span className="font-bold">Here are the three main ways:</span>
+        </Page.P>
+        <Page.Horizontal>
+          <Page.Vertical sizing="grow">
+            <div className="flex items-center gap-2">
+              <Icon visual={CloudArrowLeftRightIcon} />{" "}
+              <Page.H variant="h6">Connections</Page.H>
+            </div>
+            <Page.P>
+              Notion, Slack, Google Drive... Dust can connect to multiple
+              platforms and make syncronise your data.
+            </Page.P>
+          </Page.Vertical>
+          <Page.Vertical sizing="grow">
+            <Page.Horizontal>
+              <div className="flex items-center gap-2">
+                <Icon visual={FolderIcon} />{" "}
+                <Page.H variant="h6">Folders</Page.H>
+              </div>
+            </Page.Horizontal>
+            <Page.P>Upload files (text, pdf, csv) directly in Dust.</Page.P>
+          </Page.Vertical>
+          <Page.Vertical sizing="grow">
+            <Page.Horizontal>
+              <div className="flex items-center gap-2">
+                <Icon visual={GlobeAltIcon} />{" "}
+                <Page.H variant="h6">Websites</Page.H>
+              </div>
+            </Page.Horizontal>
+            <Page.P>
+              Any public website can be synced in Dust. Think FAQ, wikipedia
+              pages, documentation...
+            </Page.P>
+          </Page.Vertical>
+        </Page.Horizontal>
+      </Page.Vertical>
+    </Page>
+  );
+};
+
+export const PageExample = () => {
+  return (
+    <Page>
+      <Page.Header
+        title="Title"
+        description="Description"
+        icon={ChatBubbleBottomCenterTextIcon}
+      />
+      <Page.P>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod
+        a massa quis lacinia. Donec euismod nisl eget nunc Lorem ipsum dolor sit
+        amet, consectetur adipiscing elit. Nullam euismod a massa quis lacinia.
+        Donec euismod nisl eget nunc
+      </Page.P>
+      <Page.SectionHeader
+        title="Section Title"
+        description="Section Description"
+        action={{ label: "Action", size: "sm" }}
+      />
+      <ContextItem.List>
+        <ContextItem
+          title="@Gpt4"
+          visual={
+            <Avatar
+              visual="https://dust.tt/static/systemavatar/gpt4_avatar_full.png"
+              size="sm"
+            />
+          }
+        >
+          <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
+        </ContextItem>
+        <ContextItem
+          title="@SalesFr"
+          action={<Button variant="secondary" label="Manage" size="sm" />}
+          visual={
+            <Avatar
+              visual="https://dust.tt/static/droidavatar/Droid_Indigo_4.jpg"
+              size="sm"
+            />
+          }
+        >
+          <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
+        </ContextItem>
+        <ContextItem
+          title="@SupportFr"
+          action={<Button variant="secondary" label="Manage" size="sm" />}
+          visual={
+            <Avatar
+              visual="https://dust.tt/static/droidavatar/Droid_Pink_4.jpg"
+              size="sm"
+            />
+          }
+        >
+          <ContextItem.Description description="Lats, pricing, history of contacts, contact message" />
+        </ContextItem>
+      </ContextItem.List>
+    </Page>
+  );
+};
+
+export const AssistantBuilder = () => {
+  return (
+    <Page>
+      <Page.Layout direction="horizontal">
+        <Page.Layout direction="vertical" sizing="grow" gap="lg">
+          <Page.H variant="h2">Identity</Page.H>
+          <Page.Layout direction="vertical" gap="xs">
+            <Page.H variant="h4">Name / Handle</Page.H>
+            <Page.P variant="secondary">
+              The handle of your Droid will be used to call your Droïd with an
+              “@” hand (for instance @myAssistant).
+            </Page.P>
+          </Page.Layout>
+          <Page.Layout direction="vertical" gap="xs">
+            <Page.H variant="h4">Description</Page.H>
+            <Page.P variant="secondary">
+              The description helps your collaborators and Dust to understand
+              the purpose of the assistant. It must be descriptive and short.
+            </Page.P>
+          </Page.Layout>
+        </Page.Layout>
+        <Page.Layout direction="vertical" align="center">
+          <Avatar
+            size="xl"
+            visual="https://dust.tt/static/droidavatar/Droid_Black_2.jpg/"
+          />
+          <Button size="sm" variant="tertiary" label="Change" />
+        </Page.Layout>
+      </Page.Layout>
+      <Page.Separator />
+      <Page.Layout direction="vertical" sizing="grow" gap="xs">
+        <Page.H variant="h2">Instructions</Page.H>
+        <Page.P variant="secondary">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+          euismod a massa quis lacinia. Donec euismod nisl eget nunc Lorem ipsum
+          dolor sit amet, consectetur adipiscing elit. Nullam euismod a massa
+          quis lacinia. Donec euismod nisl eget nunc
+        </Page.P>
+      </Page.Layout>
+      <Page.Separator />
+      <Page.Layout direction="vertical" sizing="grow" gap="lg">
+        <Page.Layout direction="vertical" sizing="grow" gap="xs">
+          <Page.H variant="h2">Actions</Page.H>
+          <Page.P variant="secondary">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
+            euismod a massa quis lacinia. Donec euismod nisl eget nunc Lorem
+            ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod a
+            massa quis lacinia. Donec euismod nisl eget nunc
+          </Page.P>
+        </Page.Layout>
+        <Page.Layout direction="horizontal">
+          <Page.Layout direction="vertical" gap="xs" sizing="grow">
+            <Page.H variant="h5">
+              Setting data sources is not an obligation.
+            </Page.H>
+            <Page.P variant="secondary">
+              By default, your assistant will follow your instructions and
+              answer based on commun knowledge.
+            </Page.P>
+          </Page.Layout>
+          <Page.Layout direction="vertical" gap="xs" sizing="grow">
+            <Page.H variant="h5">Choose your data sources with care.</Page.H>
+            <Page.P variant="secondary">
+              Giving a lot of data is does not always give better results.
+              Selecting only the right data is better.
+            </Page.P>
+          </Page.Layout>
+        </Page.Layout>
+      </Page.Layout>
+    </Page>
+  );
+};
+
+export const HelpExample = () => {
+  return (
+    <Page>
+      <Page.Header
+        title="Welcome to Assistant"
+        icon={ChatBubbleBottomCenterTextIcon}
+      />
+      <Page.Layout direction="vertical" gap="xs" align="left">
+        <Page.SectionHeader title="Getting started?" />
+        <Page.P variant="secondary">
+          Using assistant is easy as asking a question to a friend or a
+          coworker.
+          <br />
+          Try it out:
+        </Page.P>
+        <Button
+          variant="primary"
+          label="Hey @helper, how do I use the assistant ?"
+          icon={ChatBubbleLeftRightIcon}
+        />
+      </Page.Layout>
+      <Page.Separator />
+      <Page.Layout direction="vertical" gap="xs">
+        <Page.SectionHeader title="Meet your smart friends" />
+        <Page.P variant="secondary">
+          Dust is not just a single assistant, it’s a full team at your service.{" "}
+          <br />
+          Each member has a set of specific set skills.
+        </Page.P>
+        <Page.P variant="secondary">Meet some your Droid team:</Page.P>
+      </Page.Layout>
+      <Page.Separator />
+      <Page.Layout direction="vertical" gap="xs">
+        <Page.SectionHeader title="Frequently asked questions" />
+        <Page.Layout direction="fluid" gap="sm">
+          <Button
+            variant="secondary"
+            label="Hey @helper, how do I use the assistant?"
+            icon={ChatBubbleLeftRightIcon}
+            hasMagnifying={false}
+          />
+          <Button
+            variant="secondary"
+            label="Hey @helper, What is assistant not good at?"
+            icon={ChatBubbleLeftRightIcon}
+            hasMagnifying={false}
+          />
+          <Button
+            variant="secondary"
+            label="Hey @helper, Anything I should know?"
+            icon={ChatBubbleLeftRightIcon}
+            hasMagnifying={false}
+          />
+        </Page.Layout>
+      </Page.Layout>
+    </Page>
+  );
+};

package/src/stories/PaginatedCitationsGrid.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { CitationType } from "@sparkle/components/Citation";
+
+import { PaginatedCitationsGrid } from "../index_with_tw_base";
+
+const meta = {
+  title: "Modules/PaginatedCitationsGrid",
+  component: PaginatedCitationsGrid,
+} satisfies Meta<typeof PaginatedCitationsGrid>;
+
+export default meta;
+
+function makeCitationItems(items: number) {
+  return Array.from({ length: items }, (_, idx) => ({
+    title: `test ${idx + 1}`,
+    href: "empty",
+    type: "document" as CitationType,
+  }));
+}
+
+export const PaginatedCitationsGridExample = () => {
+  return (
+    <>
+      <div className="s-flex s-gap-6">
+        <PaginatedCitationsGrid items={makeCitationItems(10)} />
+      </div>
+    </>
+  );
+};
+
+export const WithFewItems = () => {
+  return (
+    <>
+      <div className="s-flex s-gap-6">
+        <PaginatedCitationsGrid items={makeCitationItems(2)} />
+      </div>
+    </>
+  );
+};

package/src/stories/Pagination.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Pagination } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Pagination",
+  component: Pagination,
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+export const PaginationSM = () => {
+  return (
+    <Pagination
+      itemsCount={960}
+      maxItemsPerPage={50}
+      onButtonClick={() => {}}
+    />
+  );
+};
+
+export const PaginationXS = () => {
+  return (
+    <Pagination
+      itemsCount={960}
+      maxItemsPerPage={50}
+      size="xs"
+      showDetails={false}
+      onButtonClick={() => {}}
+    />
+  );
+};
+
+export const PaginationNoPageButtons = () => {
+  return (
+    <Pagination
+      itemsCount={960}
+      maxItemsPerPage={50}
+      size="xs"
+      showDetails={false}
+      showPageButtons={false}
+      onButtonClick={() => {}}
+    />
+  );
+};

package/src/stories/PlatformIconSet.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { Icon } from "../index_with_tw_base";
+import * as PlatformIcons from "../logo/platforms";
+
+export default {
+  title: "Assets/PlatformLogos",
+};
+
+const gridStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
+  gap: "48px 16px",
+};
+const itemStyle = {
+  marginTop: "12px",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textAlign: "left",
+  width: "100%",
+};
+
+export const PlatformLogos = () => (
+  <div style={gridStyle}>
+    {Object.entries(PlatformIcons).map(([iconName, IconComponent]) => {
+      const CurrentIcon = (
+        "default" in IconComponent ? IconComponent.default : IconComponent
+      ) as React.ComponentType<{ className?: string | undefined }>;
+      return (
+        <div key={iconName}>
+          <Icon visual={CurrentIcon} size="lg" />
+          <div style={itemStyle as React.CSSProperties} className="s-text-base">
+            {iconName + "Logo"}
+          </div>
+        </div>
+      );
+    })}
+  </div>
+);

package/src/stories/Popup.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Popup } from "../index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Popup",
+  component: Popup,
+} satisfies Meta<typeof Popup>;
+
+export default meta;
+
+export const PopupExample = () => (
+  <div className="s-flex s-flex-col s-gap-4">
+    <Popup
+      show={true}
+      chipLabel={"Basic"}
+      description={"Basic popup"}
+      buttonLabel={"Ok"}
+      buttonClick={function (): void {
+        alert("Onclick fn");
+      }}
+    />
+
+    <Popup
+      show={true}
+      chipLabel={"Closeable"}
+      description={"Using onClose prop"}
+      buttonLabel={"Ok"}
+      buttonClick={function (): void {
+        alert("Onclick fn");
+      }}
+      onClose={function (): void {
+        alert("OnClose fn");
+      }}
+    />
+
+    <Popup
+      show={true}
+      chipLabel={"Positioned"}
+      description={"Positioned right via className"}
+      buttonLabel={"Ok"}
+      buttonClick={function (): void {
+        alert("Onclick fn");
+      }}
+      className="s-fixed s-right-16"
+    />
+  </div>
+);

package/src/stories/PriceTable.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Button, Hoverable, PriceTable } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/PriceTable",
+  component: PriceTable,
+} satisfies Meta<typeof PriceTable>;
+
+export default meta;
+
+export const PricingXS = () => {
+  return (
+    <div className="s-h-full s-w-full">
+      <PriceTable.Container>
+        <PriceTable
+          title="Business"
+          price="0€"
+          color="emerald"
+          priceLabel="/ month / seat"
+        >
+          <PriceTable.ActionContainer position="top">
+            <Button size="sm" variant="primary" label="Start Now" />
+          </PriceTable.ActionContainer>
+          <PriceTable.Item
+            label={
+              <>
+                "Unlimited members / workspace"
+                <br />
+                <Hoverable
+                  onClick={() => {
+                    alert("Clicked!");
+                  }}
+                >
+                  hello
+                </Hoverable>
+              </>
+            }
+          />
+          <PriceTable.Item label="Unlimited custom assistants" />
+          <PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.ActionContainer>
+            <Button size="sm" variant="primary" label="Start Now" />
+          </PriceTable.ActionContainer>
+        </PriceTable>
+        <PriceTable title="Enterprise" price="Custom">
+          <PriceTable.ActionContainer position="top">
+            <Button size="sm" variant="primary" label="Start Now" />
+          </PriceTable.ActionContainer>
+          <PriceTable.Item label="Unlimited members / workspace" />
+          <PriceTable.Item label="Unlimited workspaces" />
+          <PriceTable.Item label="Unlimited custom assistants" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.ActionContainer>
+            <Button size="sm" variant="primary" label="Contact us" />
+          </PriceTable.ActionContainer>
+        </PriceTable>
+      </PriceTable.Container>
+    </div>
+  );
+};
+
+export const PricingSM = () => {
+  return (
+    <div className="s-h-full s-w-full">
+      <PriceTable.Container>
+        <PriceTable
+          title="pro"
+          price="29€"
+          color="sky"
+          priceLabel="/ month / seat"
+          size="sm"
+        >
+          <PriceTable.ActionContainer position="top">
+            <Button size="md" variant="primary" label="Select this plan" />
+          </PriceTable.ActionContainer>
+          <PriceTable.Item label="Unlimited members / workspace" />
+          <PriceTable.Item label="Unlimited custom assistants" />
+          <PriceTable.Item label="Advanced LLM models (gpt4, Claude, ...)" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.ActionContainer>
+            <Button size="md" variant="primary" label="Select this plan" />
+          </PriceTable.ActionContainer>
+        </PriceTable>
+        <PriceTable title="Enterprise" price="Custom" size="sm">
+          <PriceTable.ActionContainer position="top">
+            <Button size="md" variant="primary" label="Contact us" />
+          </PriceTable.ActionContainer>
+          <PriceTable.Item label="Unlimited members / workspace" />
+          <PriceTable.Item label="Unlimited workspaces" />
+          <PriceTable.Item label="Unlimited custom assistants" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.Item label="1 user" />
+          <PriceTable.ActionContainer>
+            <Button size="md" variant="primary" label="Contact us" />
+          </PriceTable.ActionContainer>
+        </PriceTable>
+      </PriceTable.Container>
+    </div>
+  );
+};