diff --git a/front/components/assistant/conversation/AgentMessage.tsx b/front/components/assistant/conversation/AgentMessage.tsx index 6baaa9451b3a..af055f498284 100644 --- a/front/components/assistant/conversation/AgentMessage.tsx +++ b/front/components/assistant/conversation/AgentMessage.tsx @@ -624,11 +624,13 @@ export function AgentMessage({ )} {agentMessage.status === "cancelled" && ( - +
+ +
)} ); diff --git a/sparkle/.storybook/main.ts b/sparkle/.storybook/main.ts index 7476ef24d749..f6405a7cf488 100644 --- a/sparkle/.storybook/main.ts +++ b/sparkle/.storybook/main.ts @@ -7,6 +7,7 @@ const config: StorybookConfig = { "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", + "@storybook/addon-viewport", "@storybook/addon-themes", { name: "@storybook/addon-styling", diff --git a/sparkle/.storybook/preview.ts b/sparkle/.storybook/preview.ts index c11a52a7f9c8..017ef481c6a3 100644 --- a/sparkle/.storybook/preview.ts +++ b/sparkle/.storybook/preview.ts @@ -1,9 +1,15 @@ import { withThemeByClassName } from "@storybook/addon-themes"; import type { Preview } from "@storybook/react"; +import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport"; const preview: Preview = { parameters: { actions: { argTypesRegex: "^on[A-Z].*" }, + viewport: { + viewports: INITIAL_VIEWPORTS, + defaultViewport: "iphone12", + disable: true, + }, controls: { matchers: { color: /(background|color)$/i, diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json index 9574bdc6e2a7..0d5cfa17ed36 100644 --- a/sparkle/package-lock.json +++ b/sparkle/package-lock.json @@ -1,12 +1,12 @@ { "name": "@dust-tt/sparkle", - "version": "0.2.372", + "version": "0.2.373", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@dust-tt/sparkle", - "version": "0.2.372", + "version": "0.2.373", "license": "ISC", "dependencies": { "@emoji-mart/data": "^1.1.2", @@ -60,6 +60,7 @@ "@storybook/addon-mdx-gfm": "^7.4.6", "@storybook/addon-styling": "^1.3.7", "@storybook/addon-themes": "^7.4.6", + "@storybook/addon-viewport": "^7.6.20", "@storybook/blocks": "^7.4.6", "@storybook/react": "^7.4.6", "@storybook/react-webpack5": "^7.4.6", @@ -7648,6 +7649,39 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-viewport": { + "version": "7.4.6", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.4.6.tgz", + "integrity": "sha512-INDtk54j7bi7NgxMfd2ATmbA0J7nAd6X8itMkLIyPuPJtx8bYHPDORyemDOd0AojgmAdTOAyUtDYdI/PFeo4Cw==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "7.4.6", + "@storybook/components": "7.4.6", + "@storybook/core-events": "7.4.6", + "@storybook/global": "^5.0.0", + "@storybook/manager-api": "7.4.6", + "@storybook/preview-api": "7.4.6", + "@storybook/theming": "7.4.6", + "memoizerific": "^1.11.3", + "prop-types": "^15.7.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/@storybook/addon-essentials/node_modules/@storybook/channels": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.4.6.tgz", @@ -8867,163 +8901,13 @@ } }, "node_modules/@storybook/addon-viewport": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.4.6.tgz", - "integrity": "sha512-INDtk54j7bi7NgxMfd2ATmbA0J7nAd6X8itMkLIyPuPJtx8bYHPDORyemDOd0AojgmAdTOAyUtDYdI/PFeo4Cw==", - "dev": true, - "dependencies": { - "@storybook/client-logger": "7.4.6", - "@storybook/components": "7.4.6", - "@storybook/core-events": "7.4.6", - "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.4.6", - "@storybook/preview-api": "7.4.6", - "@storybook/theming": "7.4.6", - "memoizerific": "^1.11.3", - "prop-types": "^15.7.2" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react": { - "optional": true - }, - "react-dom": { - "optional": true - } - } - }, - "node_modules/@storybook/addon-viewport/node_modules/@storybook/channels": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.4.6.tgz", - "integrity": "sha512-yPv/sfo2c18fM3fvG0i1xse63vG8l33Al/OU0k/dtovltPu001/HVa1QgBgsb/QrEfZtvGjGhmtdVeYb39fv3A==", - "dev": true, - "dependencies": { - "@storybook/client-logger": "7.4.6", - "@storybook/core-events": "7.4.6", - "@storybook/global": "^5.0.0", - "qs": "^6.10.0", - "telejson": "^7.2.0", - "tiny-invariant": "^1.3.1" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/addon-viewport/node_modules/@storybook/client-logger": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.4.6.tgz", - "integrity": "sha512-XDw31ZziU//86PKuMRnmc+L/G0VopaGKENQOGEpvAXCU9IZASwGKlKAtcyosjrpi+ZiUXlMgUXCpXM7x3b1Ehw==", - "dev": true, - "dependencies": { - "@storybook/global": "^5.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/addon-viewport/node_modules/@storybook/core-events": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.4.6.tgz", - "integrity": "sha512-r5vrE+32lwrJh1NGFr1a0mWjvxo7q8FXYShylcwRWpacmL5NTtLkrXOoJSeGvJ4yKNYkvxQFtOPId4lzDxa32w==", - "dev": true, - "dependencies": { - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/@storybook/addon-viewport/node_modules/@storybook/manager-api": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.4.6.tgz", - "integrity": "sha512-inrm3DIbCp8wjXSN/wK6e6i2ysQ/IEmtC7IN0OJ7vdrp+USCooPT448SQTUmVctUGCFmOU3fxXByq8g77oIi7w==", - "dev": true, - "dependencies": { - "@storybook/channels": "7.4.6", - "@storybook/client-logger": "7.4.6", - "@storybook/core-events": "7.4.6", - "@storybook/csf": "^0.1.0", - "@storybook/global": "^5.0.0", - "@storybook/router": "7.4.6", - "@storybook/theming": "7.4.6", - "@storybook/types": "7.4.6", - "dequal": "^2.0.2", - "lodash": "^4.17.21", - "memoizerific": "^1.11.3", - "semver": "^7.3.7", - "store2": "^2.14.2", - "telejson": "^7.2.0", - "ts-dedent": "^2.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/addon-viewport/node_modules/@storybook/router": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.4.6.tgz", - "integrity": "sha512-Vl1esrHkcHxDKqc+HY7+6JQpBPW3zYvGk0cQ2rxVMhWdLZTAz1hss9DqzN9tFnPyfn0a1Q77EpMySkUrvWKKNQ==", - "dev": true, - "dependencies": { - "@storybook/client-logger": "7.4.6", - "memoizerific": "^1.11.3", - "qs": "^6.10.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/addon-viewport/node_modules/@storybook/theming": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.4.6.tgz", - "integrity": "sha512-HW77iJ9ptCMqhoBOYFjRQw7VBap+38fkJGHP5KylEJCyYCgIAm2dEcQmtWpMVYFssSGcb6djfbtAMhYU4TL4Iw==", + "version": "7.6.20", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.6.20.tgz", + "integrity": "sha512-i8mIw8BjLWAVHEQsOTE6UPuEGQvJDpsu1XZnOCkpfTfPMz73m+3td/PmLG7mMT2wPnLu9IZncKLCKTAZRbt/YQ==", "dev": true, "dependencies": { - "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", - "@storybook/client-logger": "7.4.6", - "@storybook/global": "^5.0.0", "memoizerific": "^1.11.3" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@storybook/addon-viewport/node_modules/@storybook/types": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.4.6.tgz", - "integrity": "sha512-6QLXtMVsFZFpzPkdGWsu/iuc8na9dnS67AMOBKm5qCLPwtUJOYkwhMdFRSSeJthLRpzV7JLAL8Kwvl7MFP3QSw==", - "dev": true, - "dependencies": { - "@storybook/channels": "7.4.6", - "@types/babel__core": "^7.0.0", - "@types/express": "^4.7.0", - "file-system-cache": "2.3.0" - }, "funding": { "type": "opencollective", "url": "https://opencollective.com/storybook" diff --git a/sparkle/package.json b/sparkle/package.json index 2d9311c16278..d76e71d9de24 100644 --- a/sparkle/package.json +++ b/sparkle/package.json @@ -1,6 +1,6 @@ { "name": "@dust-tt/sparkle", - "version": "0.2.372", + "version": "0.2.373", "scripts": { "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs", "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css", @@ -39,6 +39,7 @@ "@storybook/addon-mdx-gfm": "^7.4.6", "@storybook/addon-styling": "^1.3.7", "@storybook/addon-themes": "^7.4.6", + "@storybook/addon-viewport": "^7.6.20", "@storybook/blocks": "^7.4.6", "@storybook/react": "^7.4.6", "@storybook/react-webpack5": "^7.4.6", diff --git a/sparkle/src/components/Chip.tsx b/sparkle/src/components/Chip.tsx index 51f6e8a73bd6..024da6ff9eff 100644 --- a/sparkle/src/components/Chip.tsx +++ b/sparkle/src/components/Chip.tsx @@ -91,6 +91,7 @@ const Chip = React.forwardRef( aria-label={label} ref={ref} > + {children} {icon && } {label && ( @@ -101,7 +102,6 @@ const Chip = React.forwardRef( )} )} - {children} ) ); diff --git a/sparkle/src/components/DataTable.tsx b/sparkle/src/components/DataTable.tsx index 530da47d36f3..e5216e4bef38 100644 --- a/sparkle/src/components/DataTable.tsx +++ b/sparkle/src/components/DataTable.tsx @@ -257,16 +257,26 @@ export function DataTable({ interface DataTableRootProps extends React.HTMLAttributes { children: ReactNode; + containerClassName?: string; + containerProps?: React.HTMLAttributes; } DataTable.Root = function DataTableRoot({ children, + className, + containerClassName, + containerProps, ...props }: DataTableRootProps) { return ( - - {children} -
+
+ + {children} +
+
); }; diff --git a/sparkle/src/components/Dropdown.tsx b/sparkle/src/components/Dropdown.tsx index ee64ff78472c..784bebc36ef6 100644 --- a/sparkle/src/components/Dropdown.tsx +++ b/sparkle/src/components/Dropdown.tsx @@ -384,6 +384,33 @@ const DropdownMenuSearchbar = React.forwardRef< DropdownMenuSearchbar.displayName = "DropdownMenuSearchbar"; +interface DropdownMenuStaticItemProps { + label: string; + value?: string; + children?: React.ReactNode; + className?: string; +} + +const DropdownMenuStaticItem = React.forwardRef< + HTMLDivElement, + DropdownMenuStaticItemProps +>(({ label, value, children, className }, ref) => ( +
+ {label} + {value && ( + {value} + )} + {children &&
{children}
} +
+)); +DropdownMenuStaticItem.displayName = "DropdownMenuStaticItem"; + export { DropdownMenu, DropdownMenuCheckboxItem, @@ -397,6 +424,7 @@ export { DropdownMenuSearchbar, DropdownMenuSeparator, DropdownMenuShortcut, + DropdownMenuStaticItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, diff --git a/sparkle/src/stories/Chip.stories.tsx b/sparkle/src/stories/Chip.stories.tsx index 6fbbf673a09a..9c4799503f85 100644 --- a/sparkle/src/stories/Chip.stories.tsx +++ b/sparkle/src/stories/Chip.stories.tsx @@ -1,8 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; import { CHIP_COLORS, CHIP_SIZES } from "@sparkle/components/Chip"; -import { Chip, UserGroupIcon } from "../index_with_tw_base"; +import { Chip, cn, Spinner, UserGroupIcon } from "../index_with_tw_base"; const ICONS = { none: null, @@ -59,3 +60,17 @@ export const Basic: Story = { isBusy: true, }, }; + +export const ThinkingChip = () => ( +
+ + {/* */} + +
+); diff --git a/sparkle/src/stories/DataTable.stories.tsx b/sparkle/src/stories/DataTable.stories.tsx index 7209a2961e23..e2b846135989 100644 --- a/sparkle/src/stories/DataTable.stories.tsx +++ b/sparkle/src/stories/DataTable.stories.tsx @@ -165,7 +165,7 @@ const columns: ColumnDef[] = [ { accessorKey: "usedBy", meta: { - className: "s-w-[82px]", + className: "s-w-[82px] s-hidden @xs:s-table-cell", }, header: "Used by", cell: (info) => ( @@ -190,7 +190,7 @@ const columns: ColumnDef[] = [ accessorKey: "lastUpdated", header: "Last updated", meta: { - className: "s-w-[128px]", + className: "s-w-[128px] s-hidden @sm:s-table-cell", }, cell: (info) => ( @@ -201,7 +201,7 @@ const columns: ColumnDef[] = [ accessorKey: "size", header: "Size", meta: { - className: "s-w-[48px]", + className: "s-w-[48px] s-hidden @sm:s-table-cell", }, cell: (info) => ( @@ -253,12 +253,14 @@ export const DataTableExample = () => { value={filter} onChange={(e) => setFilter(e.target.value)} /> - +
+ +
setDialogOpen(open)}> e.preventDefault()} diff --git a/sparkle/src/stories/Dropdown.stories.tsx b/sparkle/src/stories/Dropdown.stories.tsx index 6b346119a4ee..19202bf33be8 100644 --- a/sparkle/src/stories/Dropdown.stories.tsx +++ b/sparkle/src/stories/Dropdown.stories.tsx @@ -14,6 +14,7 @@ import { DropdownMenuRadioItem, DropdownMenuSearchbar, DropdownMenuSeparator, + DropdownMenuStaticItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, @@ -33,6 +34,9 @@ import { ChatBubbleBottomCenterPlusIcon, CloudArrowDownIcon, Cog6ToothIcon, + HandThumbDownIcon, + HandThumbUpIcon, + Icon, LogoutIcon, MagicIcon, ScrollArea, @@ -56,6 +60,7 @@ export const DropdownExamples = () => (
{ModelsDropdownDemo()}
{ModelsDropdownRadioGroupDemo()}
{DropdownMenuSearchbarDemo()}
+
{StaticItemDropdownDemo()}
); @@ -362,3 +367,46 @@ function DropdownMenuSearchbarDemo() { ); } + +function StaticItemDropdownDemo() { + return ( + + +