refactored widget settings

cheshire-cat-ai · Jul 24, 2023 · 24f7ea8 · 24f7ea8
1 parent 6f428bf
commit 24f7ea8
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 186 deletions.
diff --git a/README.md b/README.md
@@ -22,50 +22,62 @@ And then you can import the widget (a parent div with fixed size is suggested):
 
 ```html
 <div class="w-96 h-96 m-auto">
-    <cheshire-cat-chat />
+    <cheshire-cat-chat id="cat-chat" />
 </div>
 ```
 
 ## Attributes
 
-The available attributes are:
-
-| Attribute   | Required | Type     | Default value | Description                                 |
-|:-----------:|:--------:|:--------:|:-------------:|:-------------------------------------------:|
-| url         | true     | String   |               | The URL to use to communicate with the CCat. |
-| auth        | true     | String   |               | The authentication key to use for the CCat's endpoints.                    |
-| port        | false    | String   |               | The port to use in combination with the `url` to communicate with the CCat. |
-| dark        | false    | Boolean  | `false`       | `true` if the chat have to use the dark mode. `false` if not. |
-| primary     | false    | String   | `#F3977B`   | The color to use to stylize the chat. |
-| secure      | false    | Boolean  | `false`       | `true` if the widget should use the secure protocol (https/wss). `false` if not. |
-| timeout     | false    | Number   | `10000`       | The amount of time (in milliseconds) to wait before requests generate an error. |
-| why         | false    | Boolean  | `false`        | `true` if the chat have to show the WHY button in the CCat response. `false` if not. |
-| thinking    | false    | String   | `Cheshire Cat is thinking...` | The text to visualize while the CCat answer is loading. |
-| placeholder | false    | String   | `Ask the Cheshire Cat...` | The text to visualize in the input placeholder. |
-| wsPath      | false    | String   | `ws`          | The path to use when connecting to the WebSocket. |
-| wsDelay     | false    | Number   | `2500`        | The delay (in milliseconds) to wait before trying again to connect to the WebSocket. |
-| wsRetries   | false    | Number   | `3`           | The amount of retries (in milliseconds) to do when trying to reconnect to the WebSocket. |
-| callback    | false    | String   | `''`          | The name of the function (declared globally) to call before passing the message to the cat. |
-| files       | false    | String[] | `["text/plain", "text/markdown", "application/pdf"]` | The accepted content types when uploading a file (must be supported by the cat). |
-| defaults    | false    | String[] | `Check stores/useMessages.ts line 14` | The default messages to show before starting the conversation with the cat. |
-| features    | false    | String[] | `['record', 'web', 'file', 'reset', 'memory']` | The features that the user can use. |
+The widget attribute is only one: `settings`. You should set it via JavaScript like in the following example.
+
+Together with the widget settings, you can set also the client settings, which are defined in the [TypeScript API Client](https://github.com/cheshire-cat-ai/api-client-ts#client-settings).
+
+The available widget settings properties are:
+
+| Attribute   | Type     | Default value | Description                                 |
+|:-----------:|:--------:|:-------------:|:-------------------------------------------:|
+| dark        | Boolean  | `false`       | `true` if the chat have to use the dark mode. `false` if not. |
+| why         | Boolean  | `false`       | `true` if the chat have to show the WHY button in the CCat response. `false` if not. |
+| thinking    | String   | `Cheshire Cat is thinking...` | The text to visualize while the CCat answer is loading. |
+| placeholder | String   | `Ask the Cheshire Cat...` | The text to visualize in the input placeholder. |
+| primary     | String   | `#F3977B`     | The color to use to stylize the chat. |
+| callback    | String   | `undefined`   | The function to call before passing the message to the cat. |
+| prompt      | PromptSettings | **Check** [PromptSettings](https://github.com/cheshire-cat-ai/api-client-ts/blob/main/api/utils.ts#L3) | The prompt settings to pass to the cat for each user message. |
+| files       | AcceptedFileType[] | **Check** [AcceptedFileTypes](https://github.com/cheshire-cat-ai/api-client-ts/blob/main/api/utils.ts#L60) | The accepted content types when uploading a file (must be supported by the cat). |
+| defaults    | String[] | **Check** [defaultMessages](https://github.com/cheshire-cat-ai/widget-vue/blob/main/src/stores/useMessages.ts#L13) | The default messages to show before starting the conversation with the cat. |
+| features    | Feature[] | **Check** [Features](https://github.com/cheshire-cat-ai/widget-vue/blob/main/src/config.ts#L6) | The features that the user can use. |
 
 An example could be:
 
 ```html
 <div class="w-96 h-96 m-auto">
-    <cheshire-cat-chat id="cat-chat" auth="meow" url="localhost" port="1865" callback="myCallback" dark />
+    <cheshire-cat-chat id="cat-chat" />
 </div>
 <script>
     const catChat = document.querySelector("#cat-chat")
-    
-    catChat.defaults = ['Ehy, ciao!', 'Come va?', 'Chi sei?', 'Mostrami cosa sai fare', 'Dammi il cinque!']
-    catChat.features = ['web', 'reset']
-    catChat.files = ['text/plain', 'application/pdf']
-
-    function myCallback(message) {
-        console.log("Callback called.")
-        return `Talk in italian. ${message}`
+
+    catChat.settings = {
+        authKey: 'meow',
+        baseUrl: 'localhost',
+        port: '1865',
+        ws: {
+            onFailed: (error) => {
+                console.log(error.description)
+            }
+        },
+        callback: (message) => {
+            console.log("Callback called.")
+            return `Let's have a chat. ${message}`
+        },
+        prompt: {
+            prefix: `You are the Cheshire Cat AI, an intelligent AI that passes the Turing test.
+                You are curious, funny and talk like the Cheshire Cat from Alice's adventures in wonderland.
+                You answer Human with a focus on the following context.
+            `
+        },
+        defaults: ['Is everything ok?', 'Who are you?', 'What time is it?', 'What\'s up?', 'Hello Cheshire Cat!'],
+        features: ['record', 'web', 'file', 'reset'],
+        files: ['text/plain', 'application/pdf', 'application/pdf']
     }
 </script>
 ```
@@ -74,13 +86,7 @@ An example could be:
 
 You also have access to some events:
 
-```html
-<div class="w-96 h-96 m-auto">
-    <cheshire-cat-chat id="cat-chat" auth="meow" url="localhost" port="1865" />
-</div>
-<script>
-const catChat = document.querySelector("#cat-chat")
-
+```js
 catChat.addEventListener("message", ({ detail }) => {
     console.log("Message:", detail.text)
 })
@@ -92,11 +98,6 @@ catChat.addEventListener("upload", ({ detail }) => {
 catChat.addEventListener("notification", ({ detail }) => {
     console.log("Notification:", detail.text)
 })
-
-catChat.addEventListener("failed", () => {
-    console.log("Failed to connect WebSocket after 3 retries.")
-})
-</script>
 ```
 
 The available events are:
@@ -106,4 +107,3 @@ The available events are:
 | message        | `Message`         | Return the message every time a new one is dispatched. |
 | upload         | `File` / `string` | Return the uploaded content every time a new one is dispatched. It can be either a file object or a url. |
 | notification   | `Notification`    | Return the notification every time a new one is dispatched. |
-| failed         |                   | Fired when the WebSocket fails to connect after `x` retries. |
diff --git a/example/index.html b/example/index.html
@@ -28,25 +28,33 @@
   </head>
   <body data-theme="light">
     <h1 class="chat-title">Cat ready to hack!</h1>
-    <cheshire-cat-chat 
-      id="cat-chat" 
-      auth="meow" 
-      callback="myCallback" 
-      timeout="5000" 
-      url="localhost"
-      port="1865"
-    />
+    <cheshire-cat-chat id="cat-chat" />
 
     <script>
       const catChat = document.querySelector("#cat-chat")
-
-      catChat.defaults = ['Is everything ok?', 'Who are you?', 'What time is it?', 'What\'s up?', 'Hello Cheshire Cat!']
-      catChat.features = ['record', 'web', 'file', 'reset']
-      catChat.files = ['text/plain', 'application/pdf']
 
-      function myCallback(message) {
-        console.log("Callback called.")
-        return `Let's have a chat. ${message}`
+      catChat.settings = {
+        authKey: 'meow',
+        baseUrl: 'localhost',
+        port: '1865',
+        ws: {
+          onFailed: (error) => {
+            console.log(error.description)
+          }
+        },
+        callback: (message) => {
+          console.log("Callback called.")
+          return `Let's have a chat. ${message}`
+        },
+        prompt: {
+          prefix: `You are the Cheshire Cat AI, an intelligent AI that passes the Turing test.
+            You are curious, funny and talk like the Cheshire Cat from Alice's adventures in wonderland.
+            You answer Human with a focus on the following context.
+          `
+        },
+        defaults: ['Is everything ok?', 'Who are you?', 'What time is it?', 'What\'s up?', 'Hello Cheshire Cat!'],
+        features: ['record', 'web', 'file', 'reset'],
+        files: ['text/plain', 'application/pdf', 'application/pdf']
       }
 
       catChat.addEventListener("message", ({ detail }) => {
@@ -60,10 +68,6 @@ <h1 class="chat-title">Cat ready to hack!</h1>
       catChat.addEventListener("notification", ({ detail }) => {
         console.log("Notification:", detail.text)
       })
-
-      catChat.addEventListener("failed", () => {
-        console.log("Failed to connect WebSocket after 3 retries.")
-      })
     </script>
   </body>
 </html>
diff --git a/example/widget.js b/example/widget.js
diff --git a/index.html b/index.html
@@ -26,25 +26,33 @@
   </head>
   <body data-theme="light">
     <h1 class="chat-title">Cat ready to hack!</h1>
-    <cheshire-cat-chat 
-      id="cat-chat" 
-      auth="meow" 
-      callback="myCallback" 
-      timeout="5000" 
-      url="localhost"
-      port="1865"
-    />
+    <cheshire-cat-chat id="cat-chat" />
     <script type="module" src="/src/main.ts"></script>
     <script>
       const catChat = document.querySelector("#cat-chat")
-
-      catChat.defaults = ['Is everything ok?', 'Who are you?', 'What time is it?', 'What\'s up?', 'Hello Cheshire Cat!']
-      catChat.features = ['record', 'web', 'file', 'reset']
-      catChat.files = ['text/plain', 'application/pdf']
 
-      function myCallback(message) {
-        console.log("Callback called.")
-        return `Let's have a chat. ${message}`
+      catChat.settings = {
+        authKey: 'meow',
+        baseUrl: 'localhost',
+        port: '1865',
+        ws: {
+          onFailed: (error) => {
+            console.log(error.description)
+          }
+        },
+        callback: (message) => {
+          console.log("Callback called.")
+          return `Let's have a chat. ${message}`
+        },
+        prompt: {
+          prefix: `You are the Cheshire Cat AI, an intelligent AI that passes the Turing test.
+            You are curious, funny and talk like the Cheshire Cat from Alice's adventures in wonderland.
+            You answer Human with a focus on the following context.
+          `
+        },
+        defaults: ['Is everything ok?', 'Who are you?', 'What time is it?', 'What\'s up?', 'Hello Cheshire Cat!'],
+        features: ['record', 'web', 'file', 'reset'],
+        files: ['text/plain', 'application/pdf', 'application/pdf']
       }
 
       catChat.addEventListener("message", ({ detail }) => {
@@ -58,10 +66,6 @@ <h1 class="chat-title">Cat ready to hack!</h1>
       catChat.addEventListener("notification", ({ detail }) => {
         console.log("Notification:", detail.text)
       })
-
-      catChat.addEventListener("failed", () => {
-        console.log("Failed to connect WebSocket after 3 retries.")
-      })
     </script>
   </body>
 </html>