kooby 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +0 -38
  2. package/dist/cjs/index.js +5 -3
  3. package/dist/esm/index.js +5 -3
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -20,42 +20,6 @@ const MyComponent = () => {
20
20
  };
21
21
  ```
22
22
 
23
- ## With Auth Token ( JWT )
24
-
25
- ```jsx
26
- // Import the kooby component
27
- import { Kooby } from "kooby";
28
-
29
- const MyComponent = () => {
30
- return (
31
- <Kooby url="ws://localhost:8000" token="asdf...">
32
- <Kooby.Toolbar />
33
- <Kooby.Conversation />
34
- <Kooby.ConnectionStatus />
35
- <Kooby.TextBox />
36
- </Kooby>
37
- );
38
- };
39
- ```
40
-
41
- ## With Only URL
42
-
43
- ```jsx
44
- // Import the kooby component
45
- import { Kooby } from "kooby";
46
-
47
- const MyComponent = () => {
48
- return (
49
- <Kooby url="ws://localhost:8000">
50
- <Kooby.Toolbar />
51
- <Kooby.Conversation />
52
- <Kooby.ConnectionStatus />
53
- <Kooby.TextBox />
54
- </Kooby>
55
- );
56
- };
57
- ```
58
-
59
23
  ## With metadata
60
24
 
61
25
  ```jsx
@@ -67,8 +31,6 @@ const MyComponent = () => {
67
31
  url="ws://localhost:8000"
68
32
  metadata={{
69
33
  user: "Joe",
70
- topic: "Chargers",
71
- project: "digital-experience/ocw-barker",
72
34
  }}
73
35
  >
74
36
  <Kooby.Toolbar />
package/dist/cjs/index.js CHANGED
@@ -349,7 +349,7 @@ function styleInject(css, ref) {
349
349
  }
350
350
  }
351
351
 
352
- var css_248z = ".kooby {\n max-width: 1000px;\n height: 100%;\n max-height: 90vh;\n padding: 30px;\n padding-top: 50px;\n border: 1px solid var(--kooby-border, rgba(0, 0, 0, 0.15));\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n color: #000;\n}\n\n.site--app[data-theme=\"dark\"] .kooby,\n[data-color-scheme=\"dark\"] .kooby {\n border: none;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.12);\n background-color: var(--kooby-panel-bg, rgba(30, 30, 30, 0.95));\n color: #fff;\n}\n\n.kooby-focus {\n width: 100%;\n max-width: 100%;\n}\n\n.kooby-toolbar {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 4px;\n position: absolute;\n top: 0;\n right: 0;\n padding: 5px;\n box-sizing: border-box;\n}\n\n.kooby-conversation {\n display: flex;\n flex-direction: column;\n gap: 30px;\n flex: 2;\n overflow: scroll;\n\n scrollbar-width: none;\n}\n\n.kooby-conversation::-webkit-scrollbar {\n display: none;\n}\n\n.kooby-text-box {\n flex: 0 0 auto;\n}\n\n.kooby-message {\n display: flex;\n align-items: flex-start;\n width: 100%;\n}\n\n.kooby-message-role {\n min-width: 100px;\n height: 40px;\n padding: 5px;\n padding-left: 10px;\n border-radius: 5px 0 0 5px;\n display: flex;\n align-items: center;\n /* justify-content: center; */\n}\n\n.kooby-message-role strong {\n color: #000;\n}\n\n[data-color-scheme=\"dark\"] .kooby-message-role strong {\n color: #fff;\n}\n\n.kooby-system {\n background-color: #d3d3d3;\n}\n\n.kooby-assistant {\n background-color: #d3d3d3;\n}\n\n[data-color-scheme=\"dark\"] .kooby-system,\n[data-color-scheme=\"dark\"] .kooby-assistant {\n background-color: #3a3a3a;\n}\n\n.kooby-user {\n background-color: rgb(59, 99, 251);\n}\n\n.kooby-user strong {\n color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-user strong {\n color: white;\n}\n\n.kooby-content {\n padding: 10px;\n width: 100%;\n text-align: left;\n color: #000;\n margin-top: 5px;\n}\n\n[data-color-scheme=\"dark\"] .kooby-content {\n color: #fff;\n}\n\n.kooby-content :where(p, li, td, th, span, strong, em, h1, h2, h3, h4, h5, h6) {\n color: inherit;\n}\n\n.kooby .mermaid {\n background-color: white;\n border-radius: 5px;\n padding: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n.kooby-debug {\n position: fixed;\n right: 0;\n top: 0;\n width: 30vw;\n height: 100vh;\n color: #111;\n overflow-y: auto;\n z-index: 1000;\n padding: 30px;\n background-color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-debug {\n color: #f5f5f5;\n background-color: var(--kooby-panel-bg, rgba(30, 30, 30));\n}\n\n.kooby-debug pre {\n white-space: pre-wrap;\n}\n\n.kooby-debug-actions {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 10px;\n}\n\n.kooby-debug-actions button {\n font-size: 1rem;\n padding: 4px 8px;\n height: auto;\n min-height: unset;\n}\n\n.kooby-feedback {\n display: flex;\n margin-top: 10px;\n align-items: center;\n gap: 6px;\n}\n\n.qr-code {\n width: 200px;\n}\n\n.qr {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.qr code {\n font-size: 12px;\n}\n\n.qr-download {\n width: 200px;\n}\n\n.site--app {\n min-height: 100vh;\n color: #000;\n}\n\n[data-color-scheme=\"dark\"] .site--app {\n color: #fff;\n}\n\n.site--app h1 {\n color: inherit;\n}\n\n.site--app-main {\n max-width: 1200px;\n margin: 0 auto;\n padding: 16px;\n}\n";
352
+ var css_248z = ".kooby {\n max-width: 1000px;\n height: 100%;\n max-height: 90vh;\n padding: 30px;\n padding-top: 50px;\n border: 1px solid var(--kooby-border, rgba(0, 0, 0, 0.15));\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n color: #000;\n}\n\n@media (min-width: 768px) {\n .kooby {\n min-width: 740px;\n }\n}\n\n.site--app[data-theme=\"dark\"] .kooby,\n[data-color-scheme=\"dark\"] .kooby {\n border: none;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.12);\n background-color: var(--kooby-panel-bg, rgba(30, 30, 30, 0.95));\n color: #fff;\n}\n\n.kooby-focus {\n width: 100%;\n max-width: 100%;\n}\n\n.kooby-toolbar {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 4px;\n position: absolute;\n top: 0;\n right: 0;\n padding: 5px;\n box-sizing: border-box;\n}\n\n.kooby-conversation {\n display: flex;\n flex-direction: column;\n gap: 30px;\n flex: 2;\n overflow: scroll;\n\n scrollbar-width: none;\n}\n\n.kooby-conversation::-webkit-scrollbar {\n display: none;\n}\n\n.kooby-text-box {\n flex: 0 0 auto;\n}\n\n.kooby-message {\n display: flex;\n align-items: flex-start;\n width: 100%;\n}\n\n.kooby-message-role {\n min-width: 100px;\n height: 40px;\n padding: 5px;\n padding-left: 10px;\n border-radius: 5px 0 0 5px;\n display: flex;\n align-items: center;\n /* justify-content: center; */\n}\n\n.kooby-message-role strong {\n color: #000;\n}\n\n[data-color-scheme=\"dark\"] .kooby-message-role strong {\n color: #fff;\n}\n\n.kooby-system {\n background-color: #d3d3d3;\n}\n\n.kooby-assistant {\n background-color: #d3d3d3;\n}\n\n[data-color-scheme=\"dark\"] .kooby-system,\n[data-color-scheme=\"dark\"] .kooby-assistant {\n background-color: #3a3a3a;\n}\n\n.kooby-user {\n background-color: rgb(59, 99, 251);\n}\n\n.kooby-user strong {\n color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-user strong {\n color: white;\n}\n\n.kooby-content {\n padding: 10px;\n width: 100%;\n text-align: left;\n color: #000;\n margin-top: 5px;\n}\n\n[data-color-scheme=\"dark\"] .kooby-content {\n color: #fff;\n}\n\n.kooby-content :where(p, li, td, th, span, strong, em, h1, h2, h3, h4, h5, h6) {\n color: inherit;\n}\n\n.kooby .mermaid {\n background-color: white;\n border-radius: 5px;\n padding: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n.kooby-debug {\n position: fixed;\n right: 0;\n top: 0;\n width: 30vw;\n height: 100vh;\n color: #111;\n overflow-y: auto;\n z-index: 1000;\n padding: 30px;\n background-color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-debug {\n color: #f5f5f5;\n background-color: var(--kooby-panel-bg, rgba(30, 30, 30));\n}\n\n.kooby-debug pre {\n white-space: pre-wrap;\n}\n\n.kooby-debug-actions {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 10px;\n}\n\n.kooby-debug-actions button {\n font-size: 1rem;\n padding: 4px 8px;\n height: auto;\n min-height: unset;\n}\n\n.kooby-feedback {\n display: flex;\n margin-top: 10px;\n align-items: center;\n gap: 6px;\n}\n\n.qr-code {\n width: 200px;\n}\n\n.qr {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.qr code {\n font-size: 12px;\n}\n\n.qr-download {\n width: 200px;\n}\n\n.site--app {\n min-height: 100vh;\n color: #000;\n}\n\n[data-color-scheme=\"dark\"] .site--app {\n color: #fff;\n}\n\n.site--app h1 {\n color: inherit;\n}\n\n.site--app-main {\n max-width: 1200px;\n margin: 0 auto;\n padding: 16px;\n}\n";
353
353
  styleInject(css_248z);
354
354
 
355
355
  var _excluded = ["debug", "url", "agent", "token", "children", "metadata", "context", "readOnly", "sendHistory", "apiRef", "expanded"];
@@ -649,10 +649,12 @@ var Toolbar = function Toolbar(_ref5) {
649
649
  socketId: socketId
650
650
  }) : null, reset && /*#__PURE__*/React.createElement(s2.TooltipTrigger, null, /*#__PURE__*/React.createElement(s2.ActionButton, {
651
651
  "aria-label": "Reset",
652
- onPress: resetConversation
652
+ onPress: resetConversation,
653
+ isQuiet: true
653
654
  }, /*#__PURE__*/React.createElement(Refresh, null)), /*#__PURE__*/React.createElement(s2.Tooltip, null, "Reset")), expandable && /*#__PURE__*/React.createElement(s2.TooltipTrigger, null, /*#__PURE__*/React.createElement(s2.ActionButton, {
654
655
  "aria-label": "Expand",
655
- onPress: toggleFocus
656
+ onPress: toggleFocus,
657
+ isQuiet: true
656
658
  }, /*#__PURE__*/React.createElement(OpenIn, null)), /*#__PURE__*/React.createElement(s2.Tooltip, null, "Expand")));
657
659
  };
658
660
  var ConnectionStatus = function ConnectionStatus() {
package/dist/esm/index.js CHANGED
@@ -347,7 +347,7 @@ function styleInject(css, ref) {
347
347
  }
348
348
  }
349
349
 
350
- var css_248z = ".kooby {\n max-width: 1000px;\n height: 100%;\n max-height: 90vh;\n padding: 30px;\n padding-top: 50px;\n border: 1px solid var(--kooby-border, rgba(0, 0, 0, 0.15));\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n color: #000;\n}\n\n.site--app[data-theme=\"dark\"] .kooby,\n[data-color-scheme=\"dark\"] .kooby {\n border: none;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.12);\n background-color: var(--kooby-panel-bg, rgba(30, 30, 30, 0.95));\n color: #fff;\n}\n\n.kooby-focus {\n width: 100%;\n max-width: 100%;\n}\n\n.kooby-toolbar {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 4px;\n position: absolute;\n top: 0;\n right: 0;\n padding: 5px;\n box-sizing: border-box;\n}\n\n.kooby-conversation {\n display: flex;\n flex-direction: column;\n gap: 30px;\n flex: 2;\n overflow: scroll;\n\n scrollbar-width: none;\n}\n\n.kooby-conversation::-webkit-scrollbar {\n display: none;\n}\n\n.kooby-text-box {\n flex: 0 0 auto;\n}\n\n.kooby-message {\n display: flex;\n align-items: flex-start;\n width: 100%;\n}\n\n.kooby-message-role {\n min-width: 100px;\n height: 40px;\n padding: 5px;\n padding-left: 10px;\n border-radius: 5px 0 0 5px;\n display: flex;\n align-items: center;\n /* justify-content: center; */\n}\n\n.kooby-message-role strong {\n color: #000;\n}\n\n[data-color-scheme=\"dark\"] .kooby-message-role strong {\n color: #fff;\n}\n\n.kooby-system {\n background-color: #d3d3d3;\n}\n\n.kooby-assistant {\n background-color: #d3d3d3;\n}\n\n[data-color-scheme=\"dark\"] .kooby-system,\n[data-color-scheme=\"dark\"] .kooby-assistant {\n background-color: #3a3a3a;\n}\n\n.kooby-user {\n background-color: rgb(59, 99, 251);\n}\n\n.kooby-user strong {\n color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-user strong {\n color: white;\n}\n\n.kooby-content {\n padding: 10px;\n width: 100%;\n text-align: left;\n color: #000;\n margin-top: 5px;\n}\n\n[data-color-scheme=\"dark\"] .kooby-content {\n color: #fff;\n}\n\n.kooby-content :where(p, li, td, th, span, strong, em, h1, h2, h3, h4, h5, h6) {\n color: inherit;\n}\n\n.kooby .mermaid {\n background-color: white;\n border-radius: 5px;\n padding: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n.kooby-debug {\n position: fixed;\n right: 0;\n top: 0;\n width: 30vw;\n height: 100vh;\n color: #111;\n overflow-y: auto;\n z-index: 1000;\n padding: 30px;\n background-color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-debug {\n color: #f5f5f5;\n background-color: var(--kooby-panel-bg, rgba(30, 30, 30));\n}\n\n.kooby-debug pre {\n white-space: pre-wrap;\n}\n\n.kooby-debug-actions {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 10px;\n}\n\n.kooby-debug-actions button {\n font-size: 1rem;\n padding: 4px 8px;\n height: auto;\n min-height: unset;\n}\n\n.kooby-feedback {\n display: flex;\n margin-top: 10px;\n align-items: center;\n gap: 6px;\n}\n\n.qr-code {\n width: 200px;\n}\n\n.qr {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.qr code {\n font-size: 12px;\n}\n\n.qr-download {\n width: 200px;\n}\n\n.site--app {\n min-height: 100vh;\n color: #000;\n}\n\n[data-color-scheme=\"dark\"] .site--app {\n color: #fff;\n}\n\n.site--app h1 {\n color: inherit;\n}\n\n.site--app-main {\n max-width: 1200px;\n margin: 0 auto;\n padding: 16px;\n}\n";
350
+ var css_248z = ".kooby {\n max-width: 1000px;\n height: 100%;\n max-height: 90vh;\n padding: 30px;\n padding-top: 50px;\n border: 1px solid var(--kooby-border, rgba(0, 0, 0, 0.15));\n border-radius: 10px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n color: #000;\n}\n\n@media (min-width: 768px) {\n .kooby {\n min-width: 740px;\n }\n}\n\n.site--app[data-theme=\"dark\"] .kooby,\n[data-color-scheme=\"dark\"] .kooby {\n border: none;\n box-shadow: 0 0 2px rgba(255, 255, 255, 0.12);\n background-color: var(--kooby-panel-bg, rgba(30, 30, 30, 0.95));\n color: #fff;\n}\n\n.kooby-focus {\n width: 100%;\n max-width: 100%;\n}\n\n.kooby-toolbar {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 4px;\n position: absolute;\n top: 0;\n right: 0;\n padding: 5px;\n box-sizing: border-box;\n}\n\n.kooby-conversation {\n display: flex;\n flex-direction: column;\n gap: 30px;\n flex: 2;\n overflow: scroll;\n\n scrollbar-width: none;\n}\n\n.kooby-conversation::-webkit-scrollbar {\n display: none;\n}\n\n.kooby-text-box {\n flex: 0 0 auto;\n}\n\n.kooby-message {\n display: flex;\n align-items: flex-start;\n width: 100%;\n}\n\n.kooby-message-role {\n min-width: 100px;\n height: 40px;\n padding: 5px;\n padding-left: 10px;\n border-radius: 5px 0 0 5px;\n display: flex;\n align-items: center;\n /* justify-content: center; */\n}\n\n.kooby-message-role strong {\n color: #000;\n}\n\n[data-color-scheme=\"dark\"] .kooby-message-role strong {\n color: #fff;\n}\n\n.kooby-system {\n background-color: #d3d3d3;\n}\n\n.kooby-assistant {\n background-color: #d3d3d3;\n}\n\n[data-color-scheme=\"dark\"] .kooby-system,\n[data-color-scheme=\"dark\"] .kooby-assistant {\n background-color: #3a3a3a;\n}\n\n.kooby-user {\n background-color: rgb(59, 99, 251);\n}\n\n.kooby-user strong {\n color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-user strong {\n color: white;\n}\n\n.kooby-content {\n padding: 10px;\n width: 100%;\n text-align: left;\n color: #000;\n margin-top: 5px;\n}\n\n[data-color-scheme=\"dark\"] .kooby-content {\n color: #fff;\n}\n\n.kooby-content :where(p, li, td, th, span, strong, em, h1, h2, h3, h4, h5, h6) {\n color: inherit;\n}\n\n.kooby .mermaid {\n background-color: white;\n border-radius: 5px;\n padding: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n}\n\n.kooby-debug {\n position: fixed;\n right: 0;\n top: 0;\n width: 30vw;\n height: 100vh;\n color: #111;\n overflow-y: auto;\n z-index: 1000;\n padding: 30px;\n background-color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-debug {\n color: #f5f5f5;\n background-color: var(--kooby-panel-bg, rgba(30, 30, 30));\n}\n\n.kooby-debug pre {\n white-space: pre-wrap;\n}\n\n.kooby-debug-actions {\n display: flex;\n justify-content: flex-end;\n margin-bottom: 10px;\n}\n\n.kooby-debug-actions button {\n font-size: 1rem;\n padding: 4px 8px;\n height: auto;\n min-height: unset;\n}\n\n.kooby-feedback {\n display: flex;\n margin-top: 10px;\n align-items: center;\n gap: 6px;\n}\n\n.qr-code {\n width: 200px;\n}\n\n.qr {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.qr code {\n font-size: 12px;\n}\n\n.qr-download {\n width: 200px;\n}\n\n.site--app {\n min-height: 100vh;\n color: #000;\n}\n\n[data-color-scheme=\"dark\"] .site--app {\n color: #fff;\n}\n\n.site--app h1 {\n color: inherit;\n}\n\n.site--app-main {\n max-width: 1200px;\n margin: 0 auto;\n padding: 16px;\n}\n";
351
351
  styleInject(css_248z);
352
352
 
353
353
  var _excluded = ["debug", "url", "agent", "token", "children", "metadata", "context", "readOnly", "sendHistory", "apiRef", "expanded"];
@@ -647,10 +647,12 @@ var Toolbar = function Toolbar(_ref5) {
647
647
  socketId: socketId
648
648
  }) : null, reset && /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(ActionButton, {
649
649
  "aria-label": "Reset",
650
- onPress: resetConversation
650
+ onPress: resetConversation,
651
+ isQuiet: true
651
652
  }, /*#__PURE__*/React.createElement(Refresh, null)), /*#__PURE__*/React.createElement(Tooltip, null, "Reset")), expandable && /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(ActionButton, {
652
653
  "aria-label": "Expand",
653
- onPress: toggleFocus
654
+ onPress: toggleFocus,
655
+ isQuiet: true
654
656
  }, /*#__PURE__*/React.createElement(OpenIn, null)), /*#__PURE__*/React.createElement(Tooltip, null, "Expand")));
655
657
  };
656
658
  var ConnectionStatus = function ConnectionStatus() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kooby",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",