setChatState(ChatStates.Init)}
className={`${chatState !== 'minimized' ? 'hidden' : ''} cursor-pointer`}>
-
+
-
+
{
event.stopPropagation();
setChatState(ChatStates.Minimized);
}}
/>
diff --git a/extensions/react-widget/src/components/ui/scroll-area.tsx b/extensions/react-widget/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..0b4a48d8
--- /dev/null
+++ b/extensions/react-widget/src/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/extensions/react-widget/src/index.css b/extensions/react-widget/src/index.css
index 17622344..094fa073 100644
--- a/extensions/react-widget/src/index.css
+++ b/extensions/react-widget/src/index.css
@@ -15,6 +15,8 @@ z-index: 1000; /* to ensure it appears on top of other content, if any */
display: flex;
flex-direction: column;
align-items: center;
+width: 355px;
+height: 405px;
}
@keyframes dotBounce {
diff --git a/extensions/react-widget/src/requests/streamingApi.ts b/extensions/react-widget/src/requests/streamingApi.ts
new file mode 100644
index 00000000..3623e8f2
--- /dev/null
+++ b/extensions/react-widget/src/requests/streamingApi.ts
@@ -0,0 +1,95 @@
+import { Answer } from "@/models/customTypes";
+import { Doc } from "@/models/customTypes";
+interface HistoryItem {
+ prompt: string;
+ response?: string;
+ }
+interface FetchAnswerStreamingProps {
+ question?: string;
+ apiKey?: string;
+ selectedDocs?: string;
+ history?: HistoryItem[];
+ conversationId?: string | null;
+ apiHost?: string;
+ onEvent?: (event: MessageEvent) => void;
+ }
+export function fetchAnswerStreaming({
+ question = '',
+ apiKey = '',
+ selectedDocs = '',
+ history = [],
+ conversationId = null,
+ apiHost = '',
+ onEvent = () => {console.log("Event triggered, but no handler provided.");}
+ }: FetchAnswerStreamingProps): Promise {
+ let docPath = 'default';
+ if (selectedDocs) {
+ docPath = selectedDocs;
+ }
+
+ return new Promise((resolve, reject) => {
+ const body = {
+ question: question,
+ api_key: apiKey,
+ embeddings_key: apiKey,
+ active_docs: docPath,
+ history: JSON.stringify(history),
+ conversation_id: conversationId,
+ model: 'default'
+ };
+
+ fetch(apiHost + '/stream', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(body),
+ })
+ .then((response) => {
+ if (!response.body) throw Error('No response body');
+
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder('utf-8');
+ let counterrr = 0;
+ const processStream = ({
+ done,
+ value,
+ }: ReadableStreamReadResult) => {
+ if (done) {
+ console.log(counterrr);
+ resolve();
+ return;
+ }
+
+ counterrr += 1;
+
+ const chunk = decoder.decode(value);
+
+ const lines = chunk.split('\n');
+
+ for (let line of lines) {
+ if (line.trim() == '') {
+ continue;
+ }
+ if (line.startsWith('data:')) {
+ line = line.substring(5);
+ }
+
+ const messageEvent = new MessageEvent('message', {
+ data: line,
+ });
+
+ onEvent(messageEvent); // handle each message
+ }
+
+ reader.read().then(processStream).catch(reject);
+ };
+
+ reader.read().then(processStream).catch(reject);
+ })
+ .catch((error) => {
+ console.error('Connection failed:', error);
+ reject(error);
+ });
+ });
+ }
\ No newline at end of file
{
event.stopPropagation();
setChatState(ChatStates.Minimized);
}}
/>
-
@@ -230,47 +181,47 @@ export const DocsGPTWidget = ({ apiHost = 'https://gptcloud.arc53.com', selectDo
className={`flex w-full justify-center px-5 py-3 text-sm text-gray-800 font-bold dark:text-white transition duration-300 hover:bg-gray-100 rounded-b dark:hover:bg-gray-800/70 ${chatState !== 'init' ? 'hidden' : ''}`}>
Ask DocsGPT
- {(chatState === 'typing' || chatState === 'answer') && (
-
-
- Need help with documentation?
-DocsGPT AI assistant will help you with docs
-
-
{answer}
+
+ 
+
+
+
Get AI assistance
+DocsGPT's AI Chatbot is here to help
+ +
-
-
+ {(chatState === 'typing' || chatState === 'answer' || chatState === 'processing') && (
+
-
-
- - Hi, How can I help you today ? -
-
-
-
- - Hey, I am having trouble with my account ! -
-
-
-
- - What seems to be the problem ? -
-
-
- - I can't login -
-
+
+ {
+ queries?.map((query, index) => {
+ return (
+
+ {
+ query.prompt && )
+ })
+ }
+
)}
-
+
+ }
+ {
+ query.response && + {query.prompt} +
+
+
+ }
+ + {query.response} +
+- Processing... -
+