From ad3d5a30ec1113aeb9fcd50d19eba1590862687f Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 7 Mar 2024 15:58:31 +0530
Subject: [PATCH] docs update - widget v0.3.3

---
 docs/package.json                     |  2 +-
 docs/pages/Extensions/react-widget.md | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 0865c320..37703a16 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,7 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "@vercel/analytics": "^1.1.1",
-    "docsgpt": "^0.3.0",
+    "docsgpt": "^0.3.3",
     "next": "^14.0.4",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
diff --git a/docs/pages/Extensions/react-widget.md b/docs/pages/Extensions/react-widget.md
index de585581..63688994 100644
--- a/docs/pages/Extensions/react-widget.md
+++ b/docs/pages/Extensions/react-widget.md
@@ -10,7 +10,6 @@ First, make sure you have Node.js and npm installed in your project. Then go to
 In the file where you want to use the widget, import it and include the CSS file:
 ```js
 import { DocsGPTWidget } from "docsgpt";
-import "docsgpt/dist/style.css";
 ```
 
 
@@ -20,18 +19,28 @@ Now, you can use the widget in your component like this :
   apiHost="https://your-docsgpt-api.com"
   selectDocs="local/docs.zip"
   apiKey=""
+  avatar = "https://d3dg1063dc54p9.cloudfront.net/cute-docsgpt.png",
+  title = "Get AI assistance",
+  description = "DocsGPT's AI Chatbot is here to help",
+  heroTitle = "Welcome to DocsGPT !",
+  heroDescription="This chatbot is built with DocsGPT and utilises GenAI, 
+  please review important information using sources."
 />
 ```
-DocsGPTWidget takes 3 **props**:
+DocsGPTWidget takes 8 **props** with default fallback values:
 1. `apiHost` — The URL of your DocsGPT API.
 2. `selectDocs` — The documentation source that you want to use for your widget (e.g. `default` or `local/docs1.zip`).
 3. `apiKey` — Usually, it's empty.
+4. `avatar`: Specifies the URL of the avatar or image representing the chatbot.
+5. `title`: Sets the title text displayed in the chatbot interface.
+6. `description`: Provides a brief description of the chatbot's purpose or functionality.
+7. `heroTitle`: Displays a welcome title when users interact with the chatbot.
+8. `heroDescription`: Provide additional introductory text or information about the chatbot's capabilities.
 
 ### How to use DocsGPTWidget with [Nextra](https://nextra.site/) (Next.js + MDX)
 Install your widget as described above and then go to your `pages/` folder and create a new file `_app.js` with the following content:
 ```js
 import { DocsGPTWidget } from "docsgpt";
-import "docsgpt/dist/style.css";
 
 export default function MyApp({ Component, pageProps }) {
     return (