-
-
+
+
)
}
-export default App
+export default App
\ No newline at end of file
diff --git a/extensions/react-widget/src/assets/cancel.svg b/extensions/react-widget/src/assets/cancel.svg
deleted file mode 100644
index 5bce4dca..00000000
--- a/extensions/react-widget/src/assets/cancel.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/extensions/react-widget/src/assets/cute-docsgpt.svg b/extensions/react-widget/src/assets/cute-docsgpt.svg
deleted file mode 100644
index 6c2492cd..00000000
--- a/extensions/react-widget/src/assets/cute-docsgpt.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/extensions/react-widget/src/assets/message.svg b/extensions/react-widget/src/assets/message.svg
index c2aa8eef..2a70dcee 100644
--- a/extensions/react-widget/src/assets/message.svg
+++ b/extensions/react-widget/src/assets/message.svg
@@ -1,7 +1,7 @@
-
\ No newline at end of file
diff --git a/extensions/react-widget/src/assets/react.svg b/extensions/react-widget/src/assets/react.svg
deleted file mode 100644
index 6c87de9b..00000000
--- a/extensions/react-widget/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/extensions/react-widget/src/components/DocsGPTWidget.tsx b/extensions/react-widget/src/components/DocsGPTWidget.tsx
index f1673d18..adbae962 100644
--- a/extensions/react-widget/src/components/DocsGPTWidget.tsx
+++ b/extensions/react-widget/src/components/DocsGPTWidget.tsx
@@ -1,17 +1,250 @@
"use client";
import { Fragment, useEffect, useRef, useState } from 'react'
-import { PaperPlaneIcon, RocketIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { Input } from './ui/input';
-import { Button } from './ui/button';
-import { ScrollArea } from './ui/scroll-area'
-import { Alert, AlertTitle, AlertDescription } from './ui/alert';
-import Dragon from '../assets/cute-docsgpt.svg'
+import { PaperPlaneIcon, RocketIcon, ExclamationTriangleIcon, Cross1Icon, WidthIcon } from '@radix-ui/react-icons';
+import { MESSAGE_TYPE } from '../models/types';
+import { Query, Status } from '../models/types';
import MessageIcon from '../assets/message.svg'
-import Cancel from '../assets/cancel.svg'
-import { Query, Status } from '@/models/customTypes';
-import { fetchAnswerStreaming } from '@/requests/streamingApi';
-import Response from './Response';
+import { fetchAnswerStreaming } from '../requests/streamingApi';
+import styled, { keyframes } from 'styled-components';
+const WidgetContainer = styled.div`
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ z-index: 1000;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: left;
+ width: 356px;
+ height: 405px;
+`;
+const StyledContainer = styled.div`
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ border-radius: 0.375rem;
+ background-color: rgb(34, 35, 39);
+ border: 1px solid gray;
+ font-family: sans-serif;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.1);
+ transition: visibility 0.3s, opacity 0.3s;
+`;
+const FloatingButton = styled.div`
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ bottom: 1rem;
+ right: 1rem;
+ width: 5rem;
+ height: 5rem;
+ border-radius: 9999px;
+ overflow: hidden;
+ background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D);
+ background-color: #5AF0EC;
+ background-color: rgba(0, 0, 0, 0.8);
+ font-family: sans-serif;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ &:hover {
+ transform: scale(1.1);
+ transition: transform 0.2s ease-in-out;
+ }
+`;
+const CancelButton = styled.button`
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 0.5rem;
+ padding: 0;
+ background-color: transparent;
+ border: none;
+ outline: none;
+ color: inherit;
+ transition: opacity 0.3s ease;
+ &:hover {
+ opacity: 0.5;
+ }
+ .white-filter {
+ filter: invert(100%);
+ }
+`;
+const Header = styled.div`
+ display: flex;
+ align-items: center;
+ padding: 0.75rem;
+`;
+
+const IconWrapper = styled.div`
+ padding: 0.5rem;
+`;
+
+const ContentWrapper = styled.div`
+ flex: 1;
+ margin-left: 0.5rem;
+`;
+
+const Title = styled.h3`
+ font-size: 0.875rem;
+ font-weight: normal;
+ color: #FAFAFA;
+ margin-top: 0;
+ margin-bottom: 0.25rem;
+`;
+
+const Description = styled.p`
+ font-size: 0.75rem;
+ color: #A1A1AA;
+ margin-top: 0;
+`;
+const Conversation = styled.div`
+ height: 18rem;
+ padding: 0.5rem;
+ border-radius: 0.375rem;
+ text-align: left;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #4a4a4a transparent; /* thumb color track color */
+`;
+
+const MessageBubble = styled.div<{ type: MESSAGE_TYPE }>`
+ display: flex;
+ justify-content: ${props => props.type === 'QUESTION' ? 'flex-end' : 'flex-start'};
+ margin: 0.5rem;
+`;
+const Message = styled.p<{ type: MESSAGE_TYPE }>`
+ background: ${props => props.type === 'QUESTION' ?
+ 'linear-gradient(to bottom right, #8860DB, #6D42C5)' :
+ props => props.type === 'ANSWER' ?
+ '#38383b' :
+ ''};
+
+ color: ${props => props.type != 'ERROR' ? '#ffff' : '#b91c1c'};
+ border:${props => props.type !== 'ERROR' ? 'none' : '1px solid #b91c1c'};
+ max-width: 80%;
+ display: block;
+ padding: 0.75rem;
+ border-radius: 0.375rem;
+`;
+const ErrorAlert = styled.div`
+ color: #b91c1c;
+ border:0.1px solid #b91c1c;
+ display: flex;
+ padding:4px;
+ opacity: 90%;
+ max-width: 70%;
+ font-weight: 400;
+ border-radius: 0.375rem;
+ justify-content: space-evenly;
+`
+//dot loading animation
+const dotBounce = keyframes`
+ 0%, 80%, 100% {
+ transform: translateY(0);
+ }
+ 40% {
+ transform: translateY(-5px);
+ }
+`;
+
+const DotAnimation = styled.div`
+ display: inline-block;
+ animation: ${dotBounce} 1s infinite ease-in-out;
+`;
+
+// delay classes as styled components
+const Delay = styled(DotAnimation) <{ delay: number }>`
+ animation-delay: ${props => props.delay + 'ms'};
+`;
+const PromptContainer = styled.form`
+ background-color: transparent;
+ padding: 12px 8px;
+ opacity: 1;
+ width: 340px;
+ display: flex;
+ justify-content: space-between;
+`;
+const StyledInput = styled.input`
+ width: 80%;
+ border: 1px solid #686877;
+ height: 36px;
+ background-color: transparent;
+ font-size: 14px;
+ border-radius: 6px;
+ color: #ffff;
+ outline: none;
+ padding: 6px;
+`;
+const StyledButton = styled.button`
+ color: #ccc;
+ background-image: linear-gradient(to bottom right, #5AF0EC, #E80D9D);
+ font-size: 14px;
+ padding: 0 8px;
+ border-radius: 6px;
+ margin: 2px;
+ width: 36px;
+ border: none;
+ cursor: pointer;
+ outline: none;
+ &:hover{
+ opacity: 80%;
+ }
+ &:disabled {
+ opacity: 60%;
+ }`
+const HeroContainer = styled.div`
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 80%;
+ background-image: linear-gradient(to bottom right, #5AF0EC, #ff1bf4);
+ border-radius: 10px;
+ margin: 0 auto;
+ padding: 1px;
+`;
+const HeroWrapper = styled.div`
+ background-color: #222327;
+ border-radius: 10px;
+ font-weight: normal;
+ padding: 2px;
+ display: flex;
+ justify-content: space-between;
+`
+const HeroTitle = styled.h3`
+ color: #fff;
+ font-size: 15px;
+ margin-bottom: 5px;
+ padding: 3px;
+`;
+
+const HeroDescription = styled.p`
+ color: #fff;
+ font-size: 13px;
+`;
+const Hero = () => {
+ return (
+ <>
+
+ Welcome to DocsGPT !
+
+ This is a chatbot that uses GPT-3, Faiss, and LangChain to answer questions.
+
+
+
-
- {String(children).replace(/\n$/, '')}
-
- ) : (
-
- {children}
-
- );
- },
- td({ children }) {
- return {children} ;
- },
- th({ children }) {
- return {children} ;
- },
- }}
- >
- {props.message}
-
-
- )
-}
-export default Response
\ No newline at end of file
diff --git a/extensions/react-widget/src/components/ui/alert.tsx b/extensions/react-widget/src/components/ui/alert.tsx
deleted file mode 100644
index 5afd41d1..00000000
--- a/extensions/react-widget/src/components/ui/alert.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
- "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
- {
- variants: {
- variant: {
- default: "bg-background text-foreground",
- destructive:
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-)
-
-const Alert = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & VariantProps
->(({ className, variant, ...props }, ref) => (
-
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }
diff --git a/extensions/react-widget/src/components/ui/button.tsx b/extensions/react-widget/src/components/ui/button.tsx
deleted file mode 100644
index 0270f644..00000000
--- a/extensions/react-widget/src/components/ui/button.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
- "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
- {
- variants: {
- variant: {
- default:
- "bg-primary text-primary-foreground shadow hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
- outline:
- "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-9 px-4 py-2",
- sm: "h-8 rounded-md px-3 text-xs",
- lg: "h-10 rounded-md px-8",
- icon: "h-9 w-9",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
-
-export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean
-}
-
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
- return (
- {}
-
-const Input = React.forwardRef(
- ({ className, type, ...props }, ref) => {
- return (
-
- )
- }
-)
-Input.displayName = "Input"
-
-export { Input }
diff --git a/extensions/react-widget/src/components/ui/scroll-area.tsx b/extensions/react-widget/src/components/ui/scroll-area.tsx
deleted file mode 100644
index 0b4a48d8..00000000
--- a/extensions/react-widget/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"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/components/ui/textarea.tsx b/extensions/react-widget/src/components/ui/textarea.tsx
deleted file mode 100644
index d1258e47..00000000
--- a/extensions/react-widget/src/components/ui/textarea.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export interface TextareaProps
- extends React.TextareaHTMLAttributes {}
-
-const Textarea = React.forwardRef(
- ({ className, ...props }, ref) => {
- return (
-
- )
- }
-)
-Textarea.displayName = "Textarea"
-
-export { Textarea }
diff --git a/extensions/react-widget/src/index.css b/extensions/react-widget/src/index.css
deleted file mode 100644
index 094fa073..00000000
--- a/extensions/react-widget/src/index.css
+++ /dev/null
@@ -1,119 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-#docsgpt-answer {
- max-height: 50vh; /* 50% of the viewport height */
- overflow-y: auto; /* Adds a vertical scrollbar if the content exceeds the container height */
-}
-
-.widget-container {
-position: fixed; /* fixed positioning */
-right: 10px; /* from the right edge */
-bottom: 10px; /* from the bottom edge */
-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 {
- 0%, 80%, 100% {
- transform: translateY(0);
- }
- 40% {
- transform: translateY(-5px);
- }
-}
-
-.dot-animation {
- display: inline-block;
- animation: dotBounce 1s infinite ease-in-out;
-}
-
-.delay-200 {
- animation-delay: 200ms;
-}
-
-.delay-400 {
- animation-delay: 400ms;
-}
-
-.white-filter {
- filter: invert(1) brightness(2);
-}
-
-@layer base {
- :root {
- --background: 0 0% 100%;
- --foreground: 0 0% 3.9%;
-
- --card: 0 0% 100%;
- --card-foreground: 0 0% 3.9%;
-
- --popover: 0 0% 100%;
- --popover-foreground: 0 0% 3.9%;
-
- --primary: 0 0% 9%;
- --primary-foreground: 0 0% 98%;
-
- --secondary: 0 0% 96.1%;
- --secondary-foreground: 0 0% 9%;
-
- --muted: 0 0% 96.1%;
- --muted-foreground: 0 0% 45.1%;
-
- --accent: 0 0% 96.1%;
- --accent-foreground: 0 0% 9%;
-
- --destructive: 0 84.2% 60.2%;
- --destructive-foreground: 0 0% 98%;
-
- --border: 0 0% 89.8%;
- --input: 0 0% 89.8%;
- --ring: 0 0% 3.9%;
-
- --radius: 0.5rem;
- }
-
- .dark {
- --background: 0 0% 3.9%;
- --foreground: 0 0% 98%;
-
- --card: 0 0% 3.9%;
- --card-foreground: 0 0% 98%;
-
- --popover: 0 0% 3.9%;
- --popover-foreground: 0 0% 98%;
-
- --primary: 0 0% 98%;
- --primary-foreground: 0 0% 9%;
-
- --secondary: 0 0% 14.9%;
- --secondary-foreground: 0 0% 98%;
-
- --muted: 0 0% 14.9%;
- --muted-foreground: 0 0% 63.9%;
-
- --accent: 0 0% 14.9%;
- --accent-foreground: 0 0% 98%;
-
- --destructive: 0 62.8% 30.6%;
- --destructive-foreground: 0 0% 98%;
-
- --border: 0 0% 14.9%;
- --input: 0 0% 14.9%;
- --ring: 0 0% 83.1%;
- }
-}
-
-@layer base {
- * {
- @apply border-border;
- }
- body {
- @apply bg-background text-foreground;
- }
-}
\ No newline at end of file
diff --git a/extensions/react-widget/src/index.html b/extensions/react-widget/src/index.html
new file mode 100644
index 00000000..9928934f
--- /dev/null
+++ b/extensions/react-widget/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ React (Parcel + TypeScript)
+
+
+
+
+
+
diff --git a/extensions/react-widget/src/index.ts b/extensions/react-widget/src/index.ts
index 69e041f8..1efa89a6 100644
--- a/extensions/react-widget/src/index.ts
+++ b/extensions/react-widget/src/index.ts
@@ -1 +1 @@
-export { DocsGPTWidget } from "./components/DocsGPTWidget";
+export { DocsGPTWidget } from "./components/DocsGPTWidget";
\ No newline at end of file
diff --git a/extensions/react-widget/src/main.tsx b/extensions/react-widget/src/main.tsx
index 3d7150da..19fb0ab9 100644
--- a/extensions/react-widget/src/main.tsx
+++ b/extensions/react-widget/src/main.tsx
@@ -1,10 +1,6 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import React from 'react';
+const root = createRoot(document.getElementById('app') as HTMLElement);
-ReactDOM.createRoot(document.getElementById('root')!).render(
-
- ,
-)
+root.render(
setOpen(true)}
- className={`${open ? 'hidden' : ''} cursor-pointer`}>
-
-
- 
-
-
+
+ setOpen(true)} hidden={open}>
+
+ {open &&
+ }
+
)
-}
+}
\ No newline at end of file
diff --git a/extensions/react-widget/src/components/Response.tsx b/extensions/react-widget/src/components/Response.tsx
deleted file mode 100644
index b281453c..00000000
--- a/extensions/react-widget/src/components/Response.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
-import remarkGfm from 'remark-gfm';
-import ReactMarkdown from 'react-markdown'
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';
-interface typeProps {
- message: string
-}
-const classes = {
- list: {
- p: {
- display: 'inline'
- },
- li: {
- ':not(:first-child)': {
- marginTop: '1em'
- },
- '> .list': {
- marginTop: '1em'
- }
- }
- }
-};
-const Response = (props: typeProps) => {
- return (
-
- 
{
- event.stopPropagation();
- setOpen(false);
- }}
- />
- setOpen(false)}>
+
+
+
+
+ 
+
+
+ Get AI assistance
+ DocsGPT's AI Chatbot is here to help
+
+
-
-
+
- 
-
-
-
- Get AI assistance
-DocsGPT's AI Chatbot is here to help
-
+
- {open && (
-
-
-
- {
- queries.length > 0 ? queries?.map((query, index) => {
- return (
-
- {
- query.prompt && )
- })
- :
-
-
- )}
+
-
- }
- {
- query.response ? - {query.prompt} -
-
-
- :
-
-
- {
- query.error ?
- Network Error
-
- Something went wrong !
-
-
- :
- }
-
-
- }
- - . - . - . -
-
-
- Welcome to DocsGPT !
-
- This is a chatbot that uses the GPT-3, Faiss and LangChain to answer questions.
-
-
-
- }
-
+
+ {
+ queries.length > 0 ? queries?.map((query, index) => {
+ return (
+
+ {
+ query.prompt &&
+
+ {query.prompt}
+
+
+ }
+ {
+ query.response ?
+
+ {query.response}
+
+
+ : )
+ })
+ :
+
+ setPrompt(event.target.value)}
+ type='text' placeholder="What do you want to do?" />
+
+
+
+
-
+ {
+ query.error ?
+
+
+
+ :
+
+ .
+ .
+ .
+
+
+ }
+
+ }
+
+
+ Network Error
+ Something went wrong ! +
- {children}
-
- );
- },
- ul({ children }) {
- return (
- -
- {children}
-
-
- {children}
-
-
- {children}
-
-
- );
- },
- thead({ children }) {
- return (
-
- {children}
-
- );
- },
- tr({ children }) {
- return (
-