Replace 'respond_sender_only' with 'respond_tag_only' + prettify UI

This commit is contained in:
Weves
2023-10-03 15:57:38 -07:00
committed by Chris Weaver
parent 59bac1ca8f
commit 29a0a45518
10 changed files with 154 additions and 133 deletions

View File

@@ -26,11 +26,11 @@ export const SlackBotCreationForm = ({
return (
<div>
<div
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-10 overflow-y-auto overscroll-contain"
onClick={onClose}
>
<div
className="bg-gray-800 p-6 rounded border border-gray-700 shadow-lg relative w-1/2 text-sm"
className="bg-gray-800 rounded-lg border border-gray-700 shadow-lg relative w-1/2 text-sm"
onClick={(event) => event.stopPropagation()}
>
<Formik
@@ -44,8 +44,8 @@ export const SlackBotCreationForm = ({
questionmark_prefilter_enabled: (
existingSlackBotConfig?.channel_config?.answer_filters || []
).includes("questionmark_prefilter"),
respond_sender_only:
existingSlackBotConfig?.channel_config?.respond_sender_only ||
respond_tag_only:
existingSlackBotConfig?.channel_config?.respond_tag_only ||
false,
respond_team_member_list:
existingSlackBotConfig?.channel_config
@@ -60,7 +60,7 @@ export const SlackBotCreationForm = ({
channel_names: Yup.array().of(Yup.string()),
answer_validity_check_enabled: Yup.boolean().required(),
questionmark_prefilter_enabled: Yup.boolean().required(),
respond_sender_only: Yup.boolean().required(),
respond_tag_only: Yup.boolean().required(),
respond_team_member_list: Yup.array().of(Yup.string()).required(),
document_sets: Yup.array().of(Yup.number()),
})}
@@ -98,7 +98,8 @@ export const SlackBotCreationForm = ({
});
onClose();
} else {
const errorMsg = (await response.json()).detail;
const responseJson = await response.json();
const errorMsg = responseJson.detail || responseJson.message;
setPopup({
message: isUpdate
? `Error updating DanswerBot config - ${errorMsg}`
@@ -110,83 +111,83 @@ export const SlackBotCreationForm = ({
>
{({ isSubmitting, values }) => (
<Form>
<h2 className="text-lg font-bold mb-3">
<h2 className="text-xl font-bold mb-3 border-b border-gray-600 pt-4 pb-3 bg-gray-700 px-6">
{isUpdate
? "Update a DanswerBot Config"
: "Create a new DanswerBot Config"}
</h2>
<TextArrayField
name="channel_names"
label="Channel Names:"
values={values}
subtext={
<div>
The names of the Slack channels you want this
configuration to apply to. For example,
&apos;#ask-danswer&apos;.
<br />
<br />
<i>NOTE</i>: you still need to add DanswerBot to the
channel(s) in Slack itself. Setting this config will not
auto-add the bot to the channel.
</div>
}
/>
<div className="border-t border-gray-700 py-2" />
<BooleanFormField
name="answer_validity_check_enabled"
label="Hide Non-Answers"
subtext="If set, will only answer questions that the model determines it can answer"
/>
<div className="border-t border-gray-700 py-2" />
<BooleanFormField
name="questionmark_prefilter_enabled"
label="Only respond to questions"
subtext="If set, will only respond to messages that contain a question mark"
/>
<div className="border-t border-gray-700 py-2" />
<BooleanFormField
name="respond_sender_only"
label="Respond to Sender Only"
subtext="If set, will respond with a message that is only visible to the sender"
/>
<div className="border-t border-gray-700 py-2" />
<TextArrayField
name="respond_team_member_list"
label="Team Members Emails:"
subtext={`If specified, DanswerBot responses will only be
<div className="px-6 pb-6">
<TextArrayField
name="channel_names"
label="Channel Names:"
values={values}
subtext={
<div>
The names of the Slack channels you want this
configuration to apply to. For example,
&apos;#ask-danswer&apos;.
<br />
<br />
<i>NOTE</i>: you still need to add DanswerBot to the
channel(s) in Slack itself. Setting this config will not
auto-add the bot to the channel.
</div>
}
/>
<div className="border-t border-gray-600 py-2" />
<BooleanFormField
name="answer_validity_check_enabled"
label="Hide Non-Answers"
subtext="If set, will only answer questions that the model determines it can answer"
/>
<div className="border-t border-gray-600 py-2" />
<BooleanFormField
name="questionmark_prefilter_enabled"
label="Only respond to questions"
subtext="If set, will only respond to messages that contain a question mark"
/>
<div className="border-t border-gray-600 py-2" />
<BooleanFormField
name="respond_tag_only"
label="Respond to @DanswerBot Only"
subtext="If set, DanswerBot will only respond when directly tagged"
/>
<div className="border-t border-gray-600 py-2" />
<TextArrayField
name="respond_team_member_list"
label="Team Members Emails:"
subtext={`If specified, DanswerBot responses will only be
visible to members in this list. This is
useful if you want DanswerBot to operate in an
"assistant" mode, where it helps the team members find
answers, but let's them build on top of DanswerBot's response / throw
out the occasional incorrect answer.`}
values={values}
/>
<div className="border-t border-gray-700 py-2" />
<FieldArray
name="document_sets"
render={(arrayHelpers: ArrayHelpers) => (
<div>
values={values}
/>
<div className="border-t border-gray-600 py-2" />
<FieldArray
name="document_sets"
render={(arrayHelpers: ArrayHelpers) => (
<div>
Document Sets:
<br />
<div className="text-xs">
The document sets that DanswerBot should search
through. If left blank, DanswerBot will search through
all documents.
<div>
<p className="font-medium">Document Sets:</p>
<div className="text-xs">
The document sets that DanswerBot should search
through. If left blank, DanswerBot will search
through all documents.
</div>
</div>
</div>
<div className="mb-3 mt-2 flex gap-2 flex-wrap">
{documentSets.map((documentSet) => {
const ind = values.document_sets.indexOf(
documentSet.id
);
let isSelected = ind !== -1;
return (
<div
key={documentSet.id}
className={
`
<div className="mb-3 mt-2 flex gap-2 flex-wrap">
{documentSets.map((documentSet) => {
const ind = values.document_sets.indexOf(
documentSet.id
);
let isSelected = ind !== -1;
return (
<div
key={documentSet.id}
className={
`
px-3
py-1
rounded-lg
@@ -195,38 +196,42 @@ export const SlackBotCreationForm = ({
w-fit
flex
cursor-pointer ` +
(isSelected
? " bg-gray-600"
: " bg-gray-900 hover:bg-gray-700")
}
onClick={() => {
if (isSelected) {
arrayHelpers.remove(ind);
} else {
arrayHelpers.push(documentSet.id);
(isSelected
? " bg-gray-600"
: " bg-gray-900 hover:bg-gray-700")
}
}}
>
<div className="my-auto">{documentSet.name}</div>
</div>
);
})}
onClick={() => {
if (isSelected) {
arrayHelpers.remove(ind);
} else {
arrayHelpers.push(documentSet.id);
}
}}
>
<div className="my-auto">
{documentSet.name}
</div>
</div>
);
})}
</div>
</div>
</div>
)}
/>
<div className="flex">
<button
type="submit"
disabled={isSubmitting}
className={
"bg-slate-500 hover:bg-slate-700 text-white " +
"font-bold py-2 px-4 rounded focus:outline-none " +
"focus:shadow-outline w-full max-w-sm mx-auto"
}
>
{isUpdate ? "Update!" : "Create!"}
</button>
)}
/>
<div className="border-t border-gray-600 py-2" />
<div className="flex">
<button
type="submit"
disabled={isSubmitting}
className={
"bg-slate-500 hover:bg-slate-700 text-white " +
"font-bold py-2 px-4 rounded focus:outline-none " +
"focus:shadow-outline w-full max-w-sm mx-auto"
}
>
{isUpdate ? "Update!" : "Create!"}
</button>
</div>
</div>
</Form>
)}

View File

@@ -5,7 +5,7 @@ interface SlackBotConfigCreationRequest {
channel_names: string[];
answer_validity_check_enabled: boolean;
questionmark_prefilter_enabled: boolean;
respond_sender_only: boolean;
respond_tag_only: boolean;
respond_team_member_list: string[];
}
@@ -27,7 +27,7 @@ const buildRequestBodyFromCreationRequest = (
) => {
return JSON.stringify({
channel_names: creationRequest.channel_names,
respond_sender_only: creationRequest.respond_sender_only,
respond_tag_only: creationRequest.respond_tag_only,
respond_team_member_list: creationRequest.respond_team_member_list,
document_sets: creationRequest.document_sets,
answer_filters: buildFiltersFromCreationRequest(creationRequest),

View File

@@ -101,6 +101,10 @@ const SlackBotConfigsTable = ({
header: "Questions Only",
key: "question_mark_only",
},
{
header: "Tags Only",
key: "respond_tag_only",
},
{
header: "Delete",
key: "delete",
@@ -154,6 +158,12 @@ const SlackBotConfigsTable = ({
) : (
<div className="text-gray-300">No</div>
),
respond_tag_only:
slackBotConfig.channel_config.respond_tag_only || false ? (
<div className="text-gray-300">Yes</div>
) : (
<div className="text-gray-300">No</div>
),
delete: (
<div
className="cursor-pointer"

View File

@@ -33,7 +33,7 @@ export const TextFormField = ({
}: TextFormFieldProps) => {
return (
<div className="mb-4">
<label htmlFor={name} className="block">
<label htmlFor={name} className="block font-medium">
{label}
</label>
{subtext && <p className="text-xs mb-1">{subtext}</p>}
@@ -82,7 +82,7 @@ export const BooleanFormField = ({
<label className="flex text-sm">
<Field name={name} type="checkbox" className="mx-3 px-5" />
<div>
{label}
<p className="font-medium">{label}</p>
{subtext && <p className="text-xs">{subtext}</p>}
</div>
</label>
@@ -113,7 +113,7 @@ export function TextArrayField<T extends Yup.AnyObject>({
}: TextArrayFieldProps<T>) {
return (
<div className="mb-4">
<label htmlFor={name} className="block">
<label htmlFor={name} className="block font-medium">
{label}
</label>
{subtext && <p className="text-xs">{subtext}</p>}

View File

@@ -7,7 +7,7 @@ export interface PopupSpec {
export const Popup: React.FC<PopupSpec> = ({ message, type }) => (
<div
className={`fixed bottom-4 left-4 p-4 rounded-md shadow-lg text-white ${
className={`fixed bottom-4 left-4 p-4 rounded-md shadow-lg text-white z-30 ${
type === "success" ? "bg-green-500" : "bg-red-500"
}`}
>

View File

@@ -245,7 +245,7 @@ export type AnswerFilterOption =
export interface ChannelConfig {
channel_names: string[];
respond_sender_only?: boolean;
respond_tag_only?: boolean;
respond_team_member_list?: string[];
answer_filters?: AnswerFilterOption[];
}