Skip to content

Commit

Permalink
New alpha Sparkle
Browse files Browse the repository at this point in the history
  • Loading branch information
édouard wautier authored and édouard wautier committed Oct 25, 2023
1 parent 824529f commit 72ab35c
Show file tree
Hide file tree
Showing 5 changed files with 222 additions and 48 deletions.
8 changes: 4 additions & 4 deletions front/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion front/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"initdb": "env $(cat .env.local) npx tsx admin/db.ts"
},
"dependencies": {
"@dust-tt/sparkle": "0.2.24-epsilon",
"@dust-tt/sparkle": "0.2.24-zeta",
"@emoji-mart/data": "^1.1.2",
"@emoji-mart/react": "^1.1.1",
"@headlessui/react": "^1.7.7",
Expand Down
124 changes: 92 additions & 32 deletions front/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ export default function Home({
<div
className={classNames(
defaultFlexClasses,
"s-dark dark col-span-8 flex flex-col gap-4"
"s-dark dark col-span-12 flex flex-col gap-4"
)}
>
<H2>Pricing</H2>
Expand All @@ -429,22 +429,41 @@ export default function Home({
priceLabel=""
color="emerald"
>
<PriceTable.Item label="One user" variant="dash" />
<PriceTable.Item label="One workspace" variant="dash" />
<PriceTable.Item label="Privacy and Data Security" />
<PriceTable.Item label="Advanced LLM models (GPT-4, Claude, …)" />
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item size="sm" label="One user" variant="dash" />
<PriceTable.Item
size="sm"
label="One workspace"
variant="dash"
/>
<PriceTable.Item
size="sm"
label="Privacy and Data Security"
/>
<PriceTable.Item
size="sm"
label="Advanced LLM models (GPT-4, Claude, …)"
/>
<PriceTable.Item
size="sm"
label="Unlimited custom assistants"
/>
<PriceTable.Item
size="sm"
label="100 messages with Assistants"
variant="dash"
/>
<PriceTable.Item
size="sm"
label="50 documents as data sources"
variant="dash"
/>
<PriceTable.Item label="No connections" variant="xmark" />
<PriceTable.Item
size="sm"
label="No connections"
variant="xmark"
/>
<PriceTable.ActionContainer>
<Button variant="primary" label="Start testing" />
<Button variant="primary" size="md" label="Start testing" />
</PriceTable.ActionContainer>
</PriceTable>

Expand All @@ -454,48 +473,89 @@ export default function Home({
color="sky"
priceLabel="/ month / seat"
>
<PriceTable.Item label="From 1 user" />
<PriceTable.Item label="One workspace" variant="dash" />
<PriceTable.Item label="Privacy and Data Security" />
<PriceTable.Item label="Advanced LLM models (GPT-4, Claude, …)" />
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item label="Unlimited messages" />
<PriceTable.Item label="Up to 1Go/user of data sources" />
<PriceTable.Item size="sm" label="From 1 user" />
<PriceTable.Item
size="sm"
label="One workspace"
variant="dash"
/>
<PriceTable.Item
size="sm"
label="Privacy and Data Security"
/>
<PriceTable.Item
size="sm"
label="Advanced LLM models (GPT-4, Claude, …)"
/>
<PriceTable.Item
size="sm"
label="Unlimited custom assistants"
/>
<PriceTable.Item size="sm" label="Unlimited messages" />
<PriceTable.Item
size="sm"
label="Up to 1Go/user of data sources"
/>
<PriceTable.Item
label="Connections
(GitHub, Google Drive, Notion, Slack)"
/>
<PriceTable.Item label="Single Sign-on (Google, GitHub)" />
<PriceTable.Item label="Dust Slackbot" />
<PriceTable.Item label="Assistants can execute actions" />
<PriceTable.Item
size="sm"
label="Single Sign-on (Google, GitHub)"
/>
<PriceTable.Item size="sm" label="Dust Slackbot" />
<PriceTable.Item
size="sm"
label="Assistants can execute actions"
/>
<PriceTable.Item
size="sm"
label="Workspace role and permissions"
variant="dash"
/>
<PriceTable.ActionContainer>
<Button variant="primary" label="Start now" />
<Button variant="primary" size="md" label="Start now" />
</PriceTable.ActionContainer>
</PriceTable>

<PriceTable title="Enterprise" price="Custom">
<PriceTable.Item label="From 100 users" />
<PriceTable.Item label="Multiple workspaces" />
<PriceTable.Item label="Privacy and Data Security" />
<PriceTable.Item label="Advanced LLM models (GPT-4, Claude, …)" />
<PriceTable.Item label="Unlimited custom assistants" />
<PriceTable.Item label="Unlimited messages" />
<PriceTable.Item label="Unlimited data sources" />
<PriceTable.Item size="sm" label="From 100 users" />
<PriceTable.Item size="sm" label="Multiple workspaces" />
<PriceTable.Item
size="sm"
label="Privacy and Data Security"
/>
<PriceTable.Item
size="sm"
label="Advanced LLM models (GPT-4, Claude, …)"
/>
<PriceTable.Item
size="sm"
label="Unlimited custom assistants"
/>
<PriceTable.Item size="sm" label="Unlimited messages" />
<PriceTable.Item size="sm" label="Unlimited data sources" />
<PriceTable.Item
label="Connections
(GitHub, Google Drive, Notion, Slack)"
/>
<PriceTable.Item label="Single Sign-on" />
<PriceTable.Item label="Dust Slackbot" />
<PriceTable.Item label="Assistants can execute actions" />
<PriceTable.Item label="Advanced workspace role and permissions" />
<PriceTable.Item label="Dedicated account support" />
<PriceTable.Item size="sm" label="Single Sign-on" />
<PriceTable.Item size="sm" label="Dust Slackbot" />
<PriceTable.Item
size="sm"
label="Assistants can execute actions"
/>
<PriceTable.Item
size="sm"
label="Advanced workspace role and permissions"
/>
<PriceTable.Item
size="sm"
label="Dedicated account support"
/>
<PriceTable.ActionContainer>
<Button variant="secondary" label="Contact us" />
<Button variant="secondary" size="md" label="Contact us" />
</PriceTable.ActionContainer>
</PriceTable>
</PriceTable.Container>
Expand Down
74 changes: 64 additions & 10 deletions sparkle/src/components/PriceTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ interface PriceTableProps {
price: string;
priceLabel?: string;
color?: "pink" | "sky" | "emerald" | "amber" | "blue";
size?: "xs" | "sm";
className?: string;
children: ReactNode;
magnified?: boolean;
}

const colorTable = {
Expand All @@ -22,6 +24,14 @@ const colorTable = {
emerald: "s-bg-emerald-400 dark:s-bg-emerald-500",
};

const bigColorTable = {
pink: "s-bg-pink-400/60 dark:s-bg-pink-400/80 backdrop-blur-md",
amber: "s-bg-amber-400/60 dark:s-bg-amber-400/80 backdrop-blur-md",
sky: "s-bg-sky-400/60 dark:s-bg-sky-400/80 backdrop-blur-md",
blue: "s-bg-blue-400/60 dark:s-bg-blue-400/80 backdrop-blur-md",
emerald: "s-bg-emerald-400/60 dark:s-bg-emerald-400/80 backdrop-blur-md",
};

const textColorTable = {
pink: "s-text-pink-900 dark:s-text-pink-950",
amber: "s-text-amber-900 dark:s-text-amber-950",
Expand All @@ -30,28 +40,58 @@ const textColorTable = {
emerald: "s-text-emerald-900 dark:s-text-emerald-950",
};

const sizeTable = {
sm: "s-rounded-2xl s-p-1.5 s-shadow-2xl",
xs: "s-rounded-xl s-p-1 s-shadow-xl",
};

export function PriceTable({
title,
price,
color = "pink",
size = "xs",
priceLabel = "",
className = "",
magnified = true,
children, // Use children instead of tableItems
}: PriceTableProps) {
// Pass size prop to all PriceTable.Item children
const childrenWithProps = React.Children.map(children, (child) => {
// Checking isValidElement is the safe way and avoids a typescript error too
if (React.isValidElement<PriceTableItemProps>(child)) {
if (
child.type === PriceTable.Item ||
child.type === PriceTable.ActionContainer
) {
return React.cloneElement(child, { size: size });
}
}
return child;
});

return (
<div
className={classNames(
"s-w-full",
"s-flex s-cursor-default s-flex-col s-rounded-xl s-p-1 s-shadow-xl",
"s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100",
colorTable[color],
"s-flex s-cursor-default s-flex-col s-border s-border-white/30",
sizeTable[size],
magnified
? "s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100"
: "",
size === "xs" ? colorTable[color] : bigColorTable[color],
className
)}
>
<div className="s-flex s-flex-col s-px-3 s-py-2">
<div
className={classNames(
"s-flex s-flex-col",
size === "xs" ? "s-px-3 s-py-2" : "s-px-4 s-py-3"
)}
>
<div
className={classNames(
"s-w-full s-text-right s-text-2xl s-font-semibold",
size === "xs" ? "s-text-2xl" : "s-text-3xl",
"s-w-full s-text-right s-font-semibold",
"s-text-structure-0"
)}
>
Expand All @@ -60,24 +100,31 @@ export function PriceTable({
<div className="-s-mt-2 s-flex s-flex-row s-items-baseline s-gap-2">
<span
className={classNames(
size === "xs" ? "s-text-3xl" : "s-text-4xl",
textColorTable[color],
"s-text-3xl s-font-bold"
"s-font-bold"
)}
>
{price}
</span>
<span className="s-text-base s-font-bold s-text-white/70">
<span
className={classNames(
"s-font-bold s-text-white/70",
size === "xs" ? "s-text-base" : "s-text-lg"
)}
>
{priceLabel}
</span>
</div>
</div>
<div
className={classNames(
"s-flex s-h-full s-flex-col s-overflow-hidden s-rounded-lg s-shadow-md",
size === "xs" ? "s-rounded-lg" : "s-rounded-xl",
"s-flex s-h-full s-flex-col s-overflow-hidden s-shadow-md",
"s-bg-white dark:s-bg-structure-100-dark"
)}
>
{children}
{childrenWithProps}
</div>
</div>
);
Expand Down Expand Up @@ -143,13 +190,20 @@ PriceTable.Item = function ({

interface PriceTableActionContainerProps {
children: ReactNode;
size?: "xs" | "sm";
}

PriceTable.ActionContainer = function ({
children,
size = "xs",
}: PriceTableActionContainerProps) {
return (
<div className="s-flex s-w-full s-flex-grow s-justify-center s-p-2">
<div
className={classNames(
"s-flex s-w-full s-flex-grow s-justify-center s-px-2",
size === "xs" ? "s-py-2" : "s-py-4"
)}
>
<div className="s-flex s-h-full s-flex-col s-justify-end">{children}</div>
</div>
);
Expand Down
Loading

0 comments on commit 72ab35c

Please sign in to comment.