Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Polishing Admin Pages #2215

Merged
merged 4 commits into from
Oct 26, 2023
Merged

Polishing Admin Pages #2215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a34f9fb
Polishing Admin Pages
Oct 20, 2023
85a30b0
Merge
Oct 20, 2023
1b357c9
reset
Oct 26, 2023
8b1598f
merging
Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions front/components/sparkle/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {
DocumentPileIcon,
DocumentTextIcon,
FolderOpenIcon,
KeyIcon,
PaperAirplaneIcon,
PlanetIcon,
RobotIcon,
} from "@dust-tt/sparkle";
import { UsersIcon } from "@heroicons/react/20/solid";
Expand Down Expand Up @@ -158,7 +158,7 @@ export const subNavigationAdmin = ({
{
id: "workspace",
label: "Workspace",
icon: KeyIcon,
icon: PlanetIcon,
href: `/w/${owner.sId}/workspace`,
current: current === "workspace",
subMenuLabel: current === "workspace" ? subMenuLabel : undefined,
Expand Down
26 changes: 13 additions & 13 deletions front/lib/connector_providers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,27 @@ export const CONNECTOR_CONFIGURATIONS: Record<
isBuilt: true,
logoPath: "/static/notion_32x32.png",
description:
"Grant Dust access to authorized sections of your company's Notion workspace, organized by top-level pages. Dust doesn't synchronize external files shared within a Notion page.",
"Authorize granular access to your company's Notion workspace, by top-level pages.",
logoComponent: NotionLogo,
isNested: true,
},
google_drive: {
name: "Google Drive™",
connectorProvider: "google_drive",
isBuilt: true,
logoPath: "/static/google_drive_32x32.png",
description:
"Authorize granular access to your company's Google Drive, by drives and folders. Supported files include GDocs, GSlides, and .txt files.",
logoComponent: DriveLogo,
isNested: true,
},
slack: {
name: "Slack",
connectorProvider: "slack",
isBuilt: true,
logoPath: "/static/slack_32x32.png",
description:
"Grant Dust access to authorized channels in your company's Slack on a channel-by-channel basis. Dust doesn't synchronize external files shared within a Slack channel.",
"Authorize granular access to your Slack on a channel-by-channel basis.",
logoComponent: SlackLogo,
isNested: false,
},
Expand All @@ -40,18 +50,8 @@ export const CONNECTOR_CONFIGURATIONS: Record<
isBuilt: true,
logoPath: "/static/github_black_32x32.png",
description:
"Grant Dust access to authorized sections of your company's GitHub, on a repository-by-repository basis. Dust can access Issues, Discussions, and Pull Request threads. Dust does not access code.",
"Authorize access to your company's GitHub on a repository-by-repository basis. Dust can access Issues, Discussions, and Pull Request threads. Dust does not access code.",
logoComponent: GithubLogo,
isNested: false,
},
google_drive: {
name: "Google Drive™",
connectorProvider: "google_drive",
isBuilt: true,
logoPath: "/static/google_drive_32x32.png",
description:
"Grant Dust access to authorized sections of your company's Google Drive, selected by shared drives and folders. Supported files include GDocs, GSlides, and .txt files, each with a limit of <750KB of extracted text.",
logoComponent: DriveLogo,
isNested: true,
},
};
36 changes: 15 additions & 21 deletions front/pages/w/[wId]/a/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import {
Button,
CommandLineIcon,
PageHeader,
PlusIcon,
SectionHeader,
} from "@dust-tt/sparkle";
import { Button, CommandLineIcon, Page, PlusIcon } from "@dust-tt/sparkle";
import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import Link from "next/link";
Expand Down Expand Up @@ -109,12 +103,12 @@ export function APIKeys({ owner }: { owner: WorkspaceType }) {

return (
<>
<SectionHeader
<Page.SectionHeader
title="Secret API Keys"
description="Secrets used to communicate between your servers and Dust. Do not share them with anyone. Do not use them in client-side or browser code."
action={{
label: "Create Secret API Key",
variant: "tertiary",
variant: "primary",
onClick: async () => {
await handleGenerate();
},
Expand Down Expand Up @@ -287,7 +281,7 @@ export function Providers({ owner }: { owner: WorkspaceType }) {
/>

<>
<SectionHeader
<Page.SectionHeader
title="Model Providers"
description="Model providers available to your apps. These providers are not required to run our assistant apps, only your own custom large language model apps."
/>
Expand Down Expand Up @@ -361,9 +355,9 @@ export function Providers({ owner }: { owner: WorkspaceType }) {
))}
</ul>

<SectionHeader
<Page.SectionHeader
title="Service Providers"
description="Service providers enable your apps to query external data or write to external services."
description="Service providers enable your apps to query external data or write to&nbsp;external&nbsp;services."
/>

<ul role="list" className="pt-4">
Expand Down Expand Up @@ -448,18 +442,18 @@ export default function Developers({
topNavigationCurrent="settings"
subNavigation={subNavigationAdmin({ owner, current: "developers" })}
>
<PageHeader
title="Developers Tools"
icon={CommandLineIcon}
description="Design and deploy custom large language model apps with access to your Data Sources and other Service Providers."
/>
<div className="flex flex-col">
<SectionHeader
<Page.Vertical gap="xl" align="stretch">
<Page.Header
title="Developers Tools"
icon={CommandLineIcon}
description="Design and deploy custom large language model apps with access to&nbsp;your data&nbsp;sources and other&nbsp;service&nbsp;providers."
/>
<Page.SectionHeader
title="Apps"
description="Your Large Language Model apps."
action={{
label: "Create App",
variant: "tertiary",
variant: "primary",
onClick: async () => {
void router.push(`/w/${owner.sId}/a/new`);
},
Expand Down Expand Up @@ -534,7 +528,7 @@ export default function Developers({
</ul>
{!readOnly ? <Providers owner={owner} /> : null}
{!readOnly ? <APIKeys owner={owner} /> : null}
</div>
</Page.Vertical>
</AppLayout>
);
}
185 changes: 90 additions & 95 deletions front/pages/w/[wId]/builder/assistants/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@ import {
Button,
Cog6ToothIcon,
ContextItem,
PageHeader,
Page,
PencilSquareIcon,
PlusIcon,
RobotIcon,
SectionHeader,
SliderToggle,
} from "@dust-tt/sparkle";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
Expand Down Expand Up @@ -113,108 +112,104 @@ export default function AssistantsBuilder({
topNavigationCurrent="settings"
subNavigation={subNavigationAdmin({ owner, current: "assistants" })}
>
<PageHeader
title="Assistants"
icon={RobotIcon}
description="Create, manage and deploy Assistants to your collaborators."
/>
<div className="flex flex-col gap-4 pb-4">
<div>
<SectionHeader
title="Dust Assistants"
description='Assistants built by Dust for multiple use cases. For instance, use "@help" for any question Dust related, use the handle "@notion" to target specifically knowledge on Notion…'
/>
<ContextItem.List className="mt-8 text-element-900">
{dustAgents.map((agent) => (
<ContextItem
key={agent.sId}
title={`@${agent.name}`}
visual={
<Avatar visual={<img src={agent.pictureUrl} />} size={"sm"} />
}
action={
["helper", "gpt-4"].includes(agent.sId) ? null : agent.sId ===
"dust" ? (
<Button
variant="secondary"
icon={Cog6ToothIcon}
label="Manage"
size="sm"
disabled={!isBuilder}
onClick={() => {
void router.push(
`/w/${owner.sId}/builder/assistants/dust`
);
}}
/>
) : (
<SliderToggle
size="sm"
onClick={async () => {
await handleToggleAgentStatus(agent);
}}
selected={agent.status === "active"}
disabled={
agent.status === "disabled_missing_datasource" ||
!isBuilder
}
/>
)
}
>
<ContextItem.Description>
<div className="text-element-700">{agent.description}</div>
</ContextItem.Description>
</ContextItem>
))}
</ContextItem.List>
</div>
<div>
<SectionHeader
title="Custom Assistants"
description="Build your Assistant, tailored to your needs. Write specific instructions, select specific data sources to get better answers."
action={{
label: "Create a new Assistant",
variant: "primary",
icon: PlusIcon,
size: "sm",
disabled: !isBuilder,
onClick: () => {
void router.push(`/w/${owner.sId}/builder/assistants/new`);
},
}}
/>
<ContextItem.List className="mt-8 text-element-900">
{workspaceAgents.map((agent) => (
<ContextItem
key={agent.sId}
title={`@${agent.name}`}
visual={
<Avatar visual={<img src={agent.pictureUrl} />} size={"sm"} />
}
action={
<Page.Vertical gap="xl" align="stretch">
<Page.Header
title="Assistants"
icon={RobotIcon}
description="Create, manage and deploy Assistants to your collaborators."
/>
<Page.SectionHeader
title="Dust Assistants"
description='Assistants built by Dust for multiple use&nbsp;cases. For instance, use "@help" for any&nbsp;question Dust related, use&nbsp;the&nbsp;handle "@notion" to&nbsp;target specifically knowledge on&nbsp;Notion…'
/>
<ContextItem.List className="mt-8 text-element-900">
{dustAgents.map((agent) => (
<ContextItem
key={agent.sId}
title={`@${agent.name}`}
visual={
<Avatar visual={<img src={agent.pictureUrl} />} size={"sm"} />
}
action={
["helper", "gpt-4"].includes(agent.sId) ? null : agent.sId ===
"dust" ? (
<Button
variant="secondary"
icon={PencilSquareIcon}
label="Edit"
icon={Cog6ToothIcon}
label="Manage"
size="sm"
disabled={!isBuilder}
onClick={() => {
void router.push(
`/w/${owner.sId}/builder/assistants/${agent.sId}`
`/w/${owner.sId}/builder/assistants/dust`
);
}}
/>
}
>
<ContextItem.Description>
<div className="text-element-700">{agent.description}</div>
</ContextItem.Description>
</ContextItem>
))}
</ContextItem.List>
</div>
</div>
) : (
<SliderToggle
size="sm"
onClick={async () => {
await handleToggleAgentStatus(agent);
}}
selected={agent.status === "active"}
disabled={
agent.status === "disabled_missing_datasource" ||
!isBuilder
}
/>
)
}
>
<ContextItem.Description>
<div className="text-element-700">{agent.description}</div>
</ContextItem.Description>
</ContextItem>
))}
</ContextItem.List>
<Page.SectionHeader
title="Custom Assistants"
description="Build your Assistant, tailored to your needs. Write specific&nbsp;instructions, select&nbsp;specific data sources to&nbsp;get better&nbsp;answers."
action={{
label: "Create a new Assistant",
variant: "primary",
icon: PlusIcon,
size: "sm",
disabled: !isBuilder,
onClick: () => {
void router.push(`/w/${owner.sId}/builder/assistants/new`);
},
}}
/>
<ContextItem.List className="mt-8 text-element-900">
{workspaceAgents.map((agent) => (
<ContextItem
key={agent.sId}
title={`@${agent.name}`}
visual={
<Avatar visual={<img src={agent.pictureUrl} />} size={"sm"} />
}
action={
<Button
variant="secondary"
icon={PencilSquareIcon}
label="Edit"
size="sm"
disabled={!isBuilder}
onClick={() => {
void router.push(
`/w/${owner.sId}/builder/assistants/${agent.sId}`
);
}}
/>
}
>
<ContextItem.Description>
<div className="text-element-700">{agent.description}</div>
</ContextItem.Description>
</ContextItem>
))}
</ContextItem.List>
</Page.Vertical>
</AppLayout>
);
}
Loading