Skip to content

Commit

Permalink
Copy to builder
Browse files Browse the repository at this point in the history
  • Loading branch information
édouard wautier authored and édouard wautier committed Sep 22, 2023
1 parent cd05b2a commit 3145ff2
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 36 deletions.
80 changes: 51 additions & 29 deletions front/components/assistant_builder/AssistantBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const DATA_SOURCE_MODES = ["GENERIC", "SELECTED"] as const;
type DataSourceMode = (typeof DATA_SOURCE_MODES)[number];
const DATA_SOURCE_MODE_TO_LABEL: Record<DataSourceMode, string> = {
GENERIC: "Generic model (No data source)",
SELECTED: "Selected data sources",
SELECTED: "Selected Data Sources",
};

export const CONNECTOR_PROVIDER_TO_RESOURCE_NAME: Record<
Expand Down Expand Up @@ -536,14 +536,14 @@ export default function AssistantBuilder({
titleChildren={
!edited ? (
<AppLayoutSimpleCloseTitle
title="Design your custom Assistant"
title="Create an Assistant"
onClose={() => {
void router.push(`/w/${owner.sId}/builder/assistants`);
}}
/>
) : (
<AppLayoutSimpleSaveCancelTitle
title="Design your custom Assistant"
title="Edit an Assistant"
onCancel={() => {
void router.push(`/w/${owner.sId}/builder/assistants`);
}}
Expand Down Expand Up @@ -571,15 +571,19 @@ export default function AssistantBuilder({
<div className="flex flex-row items-start gap-8">
<div className="flex flex-col gap-4">
<div className="text-lg font-bold text-element-900">
Handle / Name
Assistant handle / name
</div>
<div className="flex-grow self-stretch text-sm font-normal text-element-800">
The handle of your assistant will be used to call it with an “@”
handle (for instance @myAssistant).
<div className="flex-grow self-stretch text-sm font-normal text-element-700">
The handle is used to call the assistant in a&nbsp;conversation
using the “@”&nbsp;handle (for&nbsp;instance&nbsp;
<span className="italic">@helper</span>). It&nbsp;should be
descriptive of what it does or the&nbsp;type of knowledge
it&nbsp;has (
<span className="italic">@writter,&nbsp;@translate…</span>).
</div>
<div className="text-sm">
<Input
placeholder="SalesAssistantFrance"
placeholder="SalesAssistant, FrenchTranslator, SupportCenter…"
value={builderState.handle}
onChange={(value) => {
setBuilderState((state) => ({
Expand All @@ -596,13 +600,14 @@ export default function AssistantBuilder({
<div className="text-lg font-bold text-element-900">
Description
</div>
<div className="flex-grow self-stretch text-sm font-normal text-element-800">
The description helps your collaborators and Dust to understand
the purpose of the assistant. It must be descriptive and short.
<div className="flex-grow self-stretch text-sm font-normal text-element-700">
The description helps your collaborators and Dust understand the
purpose of the assistant. It&nbsp;should be&nbsp;descriptive
and&nbsp;short.
</div>
<div className="text-sm">
<Input
placeholder="Assistant designed to answer sales questions"
placeholder="Anwser questions about sales, translate from English to French…"
value={builderState.description}
onChange={(value) => {
setBuilderState((state) => ({
Expand Down Expand Up @@ -638,15 +643,21 @@ export default function AssistantBuilder({
<div className="text-lg font-bold text-element-900">
Instructions
</div>
<div className="flex-grow self-stretch text-sm font-normal text-element-800">
This is the heart and soul of your assistant. Describe, to your
assistant, its mission and purpose. Be specific on the role, the
expected output, the type of formatting.{" "}
<a className="font-bold text-action-500">See examples</a>
<div className="flex-grow self-stretch text-sm font-normal text-element-700">
The heart and soul of your assistant.
<br />
Describe, to your assistant, its mission and purpose. Be
specific on the role (
<span className="italic">I want you to act as …</span>), the
expected output, the type of formatting (
<span className="italic">
Present your answer in a list, a table, a text,…
</span>
).
</div>
<div className="text-sm">
<AssistantBuilderTextArea
placeholder="Achieve a particular task, follow a template, use a certain formating..."
placeholder="I want you to act as…"
value={builderState.instructions}
onChange={(value) => {
setBuilderState((state) => ({
Expand Down Expand Up @@ -689,38 +700,46 @@ export default function AssistantBuilder({
<div className="flex flex-row items-start">
<div className="flex flex-col gap-4">
<div className="text-lg font-bold text-element-900">
Data sources
Data Sources
</div>
<div className="text-sm text-element-700">
Customize your Assistant's knowledge !
Data Sources is the knowledge that your Assistant will have
access to to help it answer questions. Data&nbsp;Sources
availablity is&nbsp;managed by Administrators&nbsp;in{" "}
<span className="italic">Settings / Data&nbsp;Sources</span>.
</div>
<div className="text-sm text-element-700">
Here are two key tips:
</div>
<ul role="list" className="flex flex-row gap-12">
<li className="flex flex-1">
<div className="flex flex-col">
<div className="text-base font-bold text-element-800">
Setting data sources is not an obligation.
<div className="text-sm font-bold text-element-800">
Only set data sources if they are necessary.
</div>
<div className="text-sm text-element-700">
By default, your assistant will follow your instructions
and answer based on commun knowledge.
By default, your assistant will follow
your&nbsp;instructions and answer based on&nbsp;commun
knowledge. It&nbsp;will answer&nbsp;faster.
</div>
</div>
</li>
<li className="flex flex-1">
<div className="flex flex-col">
<div className="text-base font-bold text-element-800">
<div className="text-sm font-bold text-element-800">
Choose your data sources with care.
</div>
<div className="text-sm text-element-700">
The more targeted your data the better the answers will
be.
More is not necessarily better. The quality of answers on
specific topic depend on the&nbsp;quality of
the&nbsp;data.
</div>
</div>
</li>
</ul>
<div className="flex flex-row items-center space-x-2 pt-6">
<div className="text-sm font-semibold text-element-900">
Data source mode:
Data Source mode:
</div>
<DropdownMenu>
<DropdownMenu.Button>
Expand All @@ -731,10 +750,11 @@ export default function AssistantBuilder({
DATA_SOURCE_MODE_TO_LABEL[builderState.dataSourceMode]
}
variant="secondary"
hasMagnifying={false}
size="sm"
/>
</DropdownMenu.Button>
<DropdownMenu.Items origin="topRight" width={260}>
<DropdownMenu.Items origin="bottomRight" width={260}>
{Object.entries(DATA_SOURCE_MODE_TO_LABEL).map(
([key, value]) => (
<DropdownMenu.Item
Expand Down Expand Up @@ -947,6 +967,7 @@ function AdvancedSettings({
.displayName
}
variant="secondary"
hasMagnifying={false}
size="sm"
/>
</DropdownMenu.Button>
Expand Down Expand Up @@ -990,6 +1011,7 @@ function AdvancedSettings({
).label
}
variant="secondary"
hasMagnifying={false}
size="sm"
/>
</DropdownMenu.Button>
Expand Down
4 changes: 2 additions & 2 deletions front/components/assistant_builder/DataSourceSelectionSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default function DataSourceSelectionSection({
>
<div>
<div className="flex flex-row items-start">
<div className="text-base font-semibold">Select the data sources</div>
<div className="text-base font-semibold">Select the Data Sources</div>
<div className="flex-grow" />
{Object.keys(dataSourceConfigurations).length > 0 && (
<Button
Expand Down Expand Up @@ -218,7 +218,7 @@ export default function DataSourceSelectionSection({
}}
>
<div className={"flex flex-row items-center gap-4 pb-4"}>
<div className="font-normal text-element-900">
<div className="text-sm font-semibold text-element-900">
Focus on the last
</div>
<input
Expand Down
10 changes: 5 additions & 5 deletions front/components/assistant_builder/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ export const TIME_FRAME_MODE_TO_LABEL: Record<TimeFrameMode, string> = {
ALL_TIME: "All time",
};
export const TIME_FRAME_UNIT_TO_LABEL: Record<TimeframeUnit, string> = {
hour: "hours",
day: "days",
week: "weeks",
month: "months",
year: "years",
hour: "hour(s)",
day: "day(s)",
week: "week(s)",
month: "month(s)",
year: "year(s)",
};

export const CONNECTOR_PROVIDER_TO_RESOURCE_NAME: Record<
Expand Down

0 comments on commit 3145ff2

Please sign in to comment.