Skip to content

Commit

Permalink
feat: support for procted bot (beta)
Browse files Browse the repository at this point in the history
  • Loading branch information
n4ze3m committed Jul 13, 2024
1 parent d5eb28e commit 1d6faa9
Show file tree
Hide file tree
Showing 33 changed files with 1,058 additions and 107 deletions.
43 changes: 22 additions & 21 deletions app/ui/src/@types/bot.ts
Original file line number Diff line number Diff line change
@@ -1,39 +1,40 @@
export type BotSettings = {
data: {
id: string;
name: string;
model: string;
public_id: string;
temperature: number;
embedding: string;
noOfDocumentsToRetrieve: number;
qaPrompt: string;
questionGeneratorPrompt: string;
streaming: boolean;
showRef: boolean;
use_hybrid_search: boolean;
bot_protect: boolean;
use_rag: boolean;
bot_model_api_key: string;
noOfChatHistoryInContext: number;
semanticSearchSimilarityScore: string
},
name: string;
model: string;
public_id: string;
temperature: number;
embedding: string;
noOfDocumentsToRetrieve: number;
qaPrompt: string;
questionGeneratorPrompt: string;
streaming: boolean;
showRef: boolean;
use_hybrid_search: boolean;
publicBotPwdProtected: boolean;
publicBotPwd: string;
bot_protect: boolean;
use_rag: boolean;
bot_model_api_key: string;
noOfChatHistoryInContext: number;
semanticSearchSimilarityScore: string;
};
chatModel: {
label: string;
value: string;
stream: boolean;
}[],
}[];
embeddingModel: {
label: string;
value: string;
}[],
}[];
};


export type BotIntegrationAPI = {
is_api_enabled: boolean;
data: {
public_url: string | null;
api_key: string | null;
};
}
};
110 changes: 110 additions & 0 deletions app/ui/src/components/Bot/Settings/SettingPwdP.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { Form, Switch, Input, notification } from "antd";
import { useParams } from "react-router-dom";
import api from "../../../services/api";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";

type Props = {
publicBotPwdProtected: boolean;
publicBotPwd: string;
};

export const SettingsPwdP: React.FC<Props> = ({
publicBotPwd,
publicBotPwdProtected,
}) => {
const params = useParams<{ id: string }>();
const [form] = Form.useForm();
const isEnabled = Form.useWatch("publicBotPwdProtected", form);
const client = useQueryClient();
const onFinish = async (values: any) => {
const response = await api.put(`/bot/${params.id}/password`, values);
return response.data;
};

const { mutate, isLoading } = useMutation(onFinish, {
onSuccess: () => {
client.invalidateQueries(["getBotSettings", params.id]);

notification.success({
message: "Bot settings updated successfully",
});
},
onError: (error: any) => {
if (axios.isAxiosError(error)) {
const message = error.response?.data?.message || "Something went wrong";
notification.error({
message,
});
return;
}
notification.error({
message: "Something went wrong",
});
},
});
return (
<Form
form={form}
initialValues={{
publicBotPwdProtected,
publicBotPwd,
}}
layout="vertical"
onFinish={mutate}
>
<div className="px-4 py-5 bg-white border sm:rounded-lg sm:p-6 dark:bg-[#1e1e1e] dark:border-gray-700">
<div className="md:grid md:grid-cols-3 md:gap-6">
<div className="md:col-span-1">
<h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white">
Password Protection
</h3>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
Proctect bot's public access with a password.
</p>
</div>
<div className="mt-5 space-y-6 md:col-span-2 md:mt-0">
<Form.Item
name="publicBotPwdProtected"
valuePropName="checked"
label="Enable Password Protection"
>
<Switch />
</Form.Item>

<Form.Item
name="publicBotPwd"
label="Password"
rules={[
{
required: isEnabled,
message: "Please input your password!",
},
]}
>
<Input.Password
placeholder="Password"
disabled={!isEnabled}
size="large"
/>
</Form.Item>

<div className="text-sm text-gray-500 dark:text-gray-400">
This feature is in preview and only works with web interface for
now
</div>
</div>
</div>

<div className="mt-3 text-right">
<button
type="submit"
className="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
{isLoading ? "Saving..." : "Save"}
</button>
</div>
</div>
</Form>
);
};
9 changes: 8 additions & 1 deletion app/ui/src/components/Bot/Settings/SettingsBody.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
HELPFUL_ASSISTANT_WITHOUT_CONTEXT_PROMPT,
} from "../../../utils/prompts";
import { BotSettings } from "../../../@types/bot";
import { SettingsPwdP } from "./SettingPwdP";

export const SettingsBody: React.FC<BotSettings> = ({
data,
Expand Down Expand Up @@ -147,7 +148,6 @@ export const SettingsBody: React.FC<BotSettings> = ({
</p>
</div>
</div>
{/* centerize the div */}
<div className="mt-6 space-y-4">
<Form
initialValues={{
Expand Down Expand Up @@ -439,6 +439,13 @@ export const SettingsBody: React.FC<BotSettings> = ({
</div>
</Form>

<div className="bg-white border sm:rounded-lg dark:bg-[#1e1e1e] dark:border-gray-700">
<SettingsPwdP
publicBotPwd={data.publicBotPwd}
publicBotPwdProtected={data.publicBotPwdProtected}
/>
</div>

<div className="bg-white border sm:rounded-lg dark:bg-[#1e1e1e] dark:border-gray-700">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-white">
Expand Down
11 changes: 6 additions & 5 deletions app/ui/src/routes/bot/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ export default function BotSettingsRoot() {
["getBotSettings", param.id],
async () => {
const response = await api.get(`/bot/${param.id}/settings`);
return response.data as BotSettings

return response.data as BotSettings;
},
{
refetchInterval: 1000,
Expand All @@ -28,9 +27,11 @@ export default function BotSettingsRoot() {
}
}, [status]);
return (
<div className="mx-auto my-3 w-full max-w-7xl">
{status === "loading" && <SkeletonLoading />}
{status === "success" && <SettingsBody {...data} />}
<div className="flex-1 py-8 md:py-12 px-4 md:px-6">
<div className="max-w-6xl mx-auto grid gap-8">
{status === "loading" && <SkeletonLoading />}
{status === "success" && <SettingsBody {...data} />}
</div>
</div>
);
}
1 change: 1 addition & 0 deletions app/widget/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"antd": "^5.5.2",
"axios": "^1.4.0",
"react": "^18.2.0",
"react-cookie": "^7.1.4",
"react-dom": "^18.2.0",
"react-markdown": "^8.0.7",
"react-syntax-highlighter": "^15.5.0",
Expand Down
70 changes: 44 additions & 26 deletions app/widget/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,14 @@ import BotChatBubble from "./components/BotChatBubble";
import { BotStyle } from "./utils/types";
import { Modal } from "antd";
import { useStoreReference } from "./store";
import { useAuth } from "./hooks/useAuth";
import LoginPage from "./components/BotLogin";
function App() {
const { openReferences, setOpenReferences, referenceData } =
useStoreReference();

const { isAuthenticated } = useAuth();

const divRef = React.useRef<HTMLDivElement>(null);
const { messages, setMessages, setStreaming, setHistory } = useMessage();

Expand Down Expand Up @@ -61,35 +65,49 @@ function App() {
}
}, [botStyle]);

if (status === "loading") {
return <Loader />;
}

if (status === "error") {
return (
<div className="text-red-500 font-bold text-center">
there was an error occured
</div>
);
}

if (botStyle?.data?.is_protected && !isAuthenticated) {
return (
<ModeSwitcher mode={params?.mode}>
<LoginPage params={params} botName={botStyle?.data?.bot_name} />
</ModeSwitcher>
);
}

return (
<div>
<ModeSwitcher mode={params?.mode}>
{status === "loading" && <Loader />}

{status === "success" && (
<>
<div className="sticky top-0 z-10 ">
<BotHeader botStyle={botStyle} params={params} />
</div>
<div className="grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out">
<div className="grow px-4 sm:px-6 md:px-5 py-6">
{messages.map((message, index) => {
return (
<BotChatBubble
key={index}
message={message}
botStyle={botStyle}
/>
);
})}
<div ref={divRef} />
</div>
</div>
<div className="sticky bottom-0 bg-white">
<BotForm botStyle={botStyle} />
</div>
</>
)}
<div className="sticky top-0 z-10 ">
<BotHeader botStyle={botStyle} params={params} />
</div>
<div className="grow flex flex-col md:translate-x-0 transition-transform duration-300 ease-in-out">
<div className="grow px-4 sm:px-6 md:px-5 py-6">
{messages.map((message, index) => {
return (
<BotChatBubble
key={index}
message={message}
botStyle={botStyle}
/>
);
})}
<div ref={divRef} />
</div>
</div>
<div className="sticky bottom-0 bg-white">
<BotForm botStyle={botStyle} />
</div>
</ModeSwitcher>

<Modal
Expand Down
10 changes: 9 additions & 1 deletion app/widget/src/components/BotForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,18 @@ import { useMutation } from "@tanstack/react-query";
import { useMessage } from "../hooks/useMessage";
import { useForm } from "@mantine/form";
import { BotStyle } from "../utils/types";
import { useState } from "react";
import { useEffect, useRef, useState } from "react";

export default function BotForm({}: { botStyle: BotStyle }) {
const { onSubmit } = useMessage();
const [typing, setTyping] = useState<boolean>(false);
const textAreaRef = useRef<HTMLTextAreaElement>(null);

useEffect(() => {
if (textAreaRef.current) {
textAreaRef.current.focus();
}
}, []);

const form = useForm({
initialValues: {
Expand Down Expand Up @@ -36,6 +43,7 @@ export default function BotForm({}: { botStyle: BotStyle }) {
>
<div className="flex items-cente rounded-full border bg-gray-100 w-full dark:bg-[#171717] dark:border-gray-600">
<textarea
ref={textAreaRef}
onCompositionStart={() => setTyping(true)}
onCompositionEnd={() => setTyping(false)}
onKeyDown={(e) => {
Expand Down
Loading

0 comments on commit 1d6faa9

Please sign in to comment.