updated widget

- now uses the ccat-api package
- added new parameters
- fixed css

Author: zAlweNy26

README.md

@@ -30,24 +30,29 @@ And then you can import the widget (a parent div with fixed size is suggested):
 
 The available attributes are:
 
-| Attribute   | Required | Param Type | Default value | Description                                 |
-|-------------|----------|------------|---------------|---------------------------------------------|
-| url         | true     | String     |               | The URL to use to communicate with the Cat. |
-| api         | true     | String     |               | The API key for the Cat.                    |
-| 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 chat have to use the dark mode. `false` if not. |
-| timeout     | false    | Number     | `10000`       | The delay (in milliseconds) to wait before trying again to connect. |
-| 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']` | The features that the user can use. |
+| 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. |
+| showWhy     | false    | Boolean  | `true`        | `true` if the chat have to show the WHY button in the CCat response. `false` if not. |
+| 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. |
 
 An example could be:
 
 ```html
 <div class="w-96 h-96 m-auto">
-    <cheshire-cat-chat id="cat-chat" api="none" url="localhost:1865" callback="myCallback" dark />
+    <cheshire-cat-chat id="cat-chat" auth="meow" url="localhost" port="1865" callback="myCallback" dark />
 </div>
 <script>
     const catChat = document.querySelector("#cat-chat")
@@ -69,7 +74,7 @@ You also have access to some events:
 
 ```html
 <div class="w-96 h-96 m-auto">
-    <cheshire-cat-chat id="cat-chat" api="none" url="localhost:1865" />
+    <cheshire-cat-chat id="cat-chat" auth="meow" url="localhost" port="1865" />
 </div>
 <script>
 const catChat = document.querySelector("#cat-chat")
@@ -85,6 +90,10 @@ 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>
 ```
 
@@ -95,3 +104,4 @@ 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. |

components.d.ts

@@ -3,26 +3,26 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     Dialog: typeof import('@headlessui/vue')['Dialog']
     DialogPanel: typeof import('@headlessui/vue')['DialogPanel']
     DialogTitle: typeof import('@headlessui/vue')['DialogTitle']
     HeroiconsArrowDown20Solid: typeof import('~icons/heroicons/arrow-down20-solid')['default']
+    HeroiconsBoltSolid: typeof import('~icons/heroicons/bolt-solid')['default']
     HeroiconsDocumentTextSolid: typeof import('~icons/heroicons/document-text-solid')['default']
     HeroiconsGlobeAlt: typeof import('~icons/heroicons/globe-alt')['default']
     HeroiconsMicrophoneSolid: typeof import('~icons/heroicons/microphone-solid')['default']
     HeroiconsPaperAirplaneSolid: typeof import('~icons/heroicons/paper-airplane-solid')['default']
-    HeroiconsPaperClip20Solid: typeof import('~icons/heroicons/paper-clip20-solid')['default']
     HeroiconsTrashSolid: typeof import('~icons/heroicons/trash-solid')['default']
     HeroiconsXMark20Solid: typeof import('~icons/heroicons/x-mark20-solid')['default']
+    MemorySelect: typeof import('./src/components/MemorySelect.vue')['default']
     MessageBox: typeof import('./src/components/MessageBox.vue')['default']
     ModalBox: typeof import('./src/components/ModalBox.vue')['default']
     NotificationStack: typeof import('./src/components/NotificationStack.vue')['default']
+    PhBrainFill: typeof import('~icons/ph/brain-fill')['default']
     SidePanel: typeof import('./src/components/SidePanel.vue')['default']
     TransitionChild: typeof import('@headlessui/vue')['TransitionChild']
     TransitionRoot: typeof import('@headlessui/vue')['TransitionRoot']

example/index.html

@@ -11,6 +11,8 @@
         flex-direction: column;
         padding: 0.5rem;
         height: 100vh;
+        max-height: 100vh;
+        min-height: 100vh;
       }
       .chat-title {
         font-size: 3rem;
@@ -28,23 +30,24 @@
     <h1 class="chat-title">Cat ready to hack!</h1>
     <cheshire-cat-chat 
       id="cat-chat" 
-      api="none" 
+      auth="meow" 
       callback="myCallback" 
       timeout="5000" 
-      url="localhost:1865" 
+      url="localhost"
+      port="1865"
       primary="#00ff00"
     />
 
     <script>
       const catChat = document.querySelector("#cat-chat")
 
-      catChat.defaults = ['Ehy, ciao!', 'Come va?', 'Chi sei?', 'Mostrami cosa sai fare', 'Dammi il cinque!']
+      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 `Talk in italian. ${message}`
+        return `Let's have a chat. ${message}`
       }
 
       catChat.addEventListener("message", ({ detail }) => {
@@ -58,6 +61,10 @@ <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>

example/widget.css

@@ -1,3 +1 @@
-/// <reference types="vite/client" />
-
 declare module 'vue3-webcomponent-wrapper';

example/widget.js

@@ -11,6 +11,8 @@
         flex-direction: column;
         padding: 0.5rem;
         height: 100vh;
+        max-height: 100vh;
+        min-height: 100vh;
       }
       .chat-title {
         font-size: 3rem;
@@ -26,23 +28,24 @@
     <h1 class="chat-title">Cat ready to hack!</h1>
     <cheshire-cat-chat 
       id="cat-chat" 
-      api="none" 
+      auth="meow" 
       callback="myCallback" 
       timeout="5000" 
-      url="localhost:1865" 
+      url="localhost"
+      port="1865"
       primary="#00ff00"
     />
     <script type="module" src="/src/main.ts"></script>
     <script>
       const catChat = document.querySelector("#cat-chat")
 
-      catChat.defaults = ['Ehy, ciao!', 'Come va?', 'Chi sei?', 'Mostrami cosa sai fare', 'Dammi il cinque!']
+      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 `Talk in italian. ${message}`
+        return `Let's have a chat. ${message}`
       }
 
       catChat.addEventListener("message", ({ detail }) => {
@@ -56,6 +59,10 @@ <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>