From 9fd1bd68109b20c37ef54a8c5c1095043ac3555c Mon Sep 17 00:00:00 2001 From: OvidijusParsiunas Date: Tue, 14 Nov 2023 22:17:35 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20=20@=2090cbc?= =?UTF-8?q?ca6c9b38113016c741ce6a777bd5d8409b3=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 4 ++-- assets/js/c214479d.4b73ea0f.js | 1 - assets/js/c214479d.b77cd199.js | 1 + .../{runtime~main.8eec9009.js => runtime~main.0a606cfa.js} | 2 +- docs/connect/index.html | 4 ++-- docs/demo/index.html | 4 ++-- docs/directConnection/AssemblyAI/index.html | 4 ++-- docs/directConnection/Azure/index.html | 4 ++-- docs/directConnection/Cohere/index.html | 4 ++-- docs/directConnection/HuggingFace/index.html | 4 ++-- docs/directConnection/OpenAI/index.html | 4 ++-- docs/directConnection/StabilityAI/index.html | 4 ++-- docs/directConnection/index.html | 4 ++-- docs/events/index.html | 4 ++-- docs/files/index.html | 4 ++-- docs/installation/index.html | 4 ++-- docs/interceptors/index.html | 4 ++-- docs/introPanel/index.html | 4 ++-- docs/introduction/index.html | 4 ++-- docs/messages/HTML/index.html | 4 ++-- docs/messages/index.html | 7 ++++--- docs/messages/styles/index.html | 4 ++-- docs/methods/index.html | 4 ++-- docs/speech/index.html | 4 ++-- docs/styles/index.html | 4 ++-- examples/Layout/fullScreen/index.html | 4 ++-- examples/Layout/sticky/index.html | 4 ++-- examples/design/index.html | 4 ++-- examples/externalModules/index.html | 4 ++-- examples/frameworks/index.html | 4 ++-- examples/servers/index.html | 4 ++-- exploreButton/exploreButton/index.html | 4 ++-- features/captureFiles/captureFiles/index.html | 4 ++-- features/connect/connect/index.html | 4 ++-- features/customize/customize/index.html | 4 ++-- features/features/index.html | 4 ++-- features/media/media/index.html | 4 ++-- features/speech/speech/index.html | 4 ++-- footer/footer/index.html | 4 ++-- index.html | 4 ++-- playground/chat/manipulate/playgroundAddButton/index.html | 4 ++-- playground/chat/playgroundChatComponent/index.html | 4 ++-- playground/chat/playgroundChatWrapper/index.html | 4 ++-- playground/chat/playgroundChatWrapperConfig/index.html | 4 ++-- playground/chat/playgroundChatWrapperLogo/index.html | 4 ++-- playground/chat/playgroundChatWrapperText/index.html | 4 ++-- .../header/export/modal/playgroundExportModal/index.html | 4 ++-- playground/header/export/playgroundExportButton/index.html | 4 ++-- .../modal/playgroundInformationModal/index.html | 4 ++-- .../information/playgroundInformationButton/index.html | 4 ++-- playground/header/layout/playgroundLayoutButton/index.html | 4 ++-- playground/header/playgroundCog/index.html | 4 ++-- playground/header/playgroundHeaderButtons/index.html | 4 ++-- playground/header/playgroundShield/index.html | 4 ++-- .../header/upload/modal/playgroundUploadModal/index.html | 4 ++-- playground/header/upload/playgroundUploadButton/index.html | 4 ++-- playground/index.html | 4 ++-- playground/playgroundSelect/index.html | 4 ++-- .../serviceModal/close/serviceModalCloseButtons/index.html | 4 ++-- playground/serviceModal/code/serviceCode/index.html | 4 ++-- .../fields/serviceConstructableObject/index.html | 4 ++-- playground/serviceModal/fields/serviceField/index.html | 4 ++-- .../fields/serviceOptionalParametersFields/index.html | 4 ++-- .../serviceModal/fields/serviceRequiredField/index.html | 4 ++-- playground/serviceModal/fields/serviceTypeField/index.html | 4 ++-- playground/serviceModal/serviceModal/index.html | 4 ++-- .../serviceModal/wrappers/collapsableSection/index.html | 4 ++-- playground/tooltip/playgroundTooltipWrapper/index.html | 4 ++-- preload/preloadImages/index.html | 4 ++-- preload/preloadPlaygroundImages/index.html | 4 ++-- preload/preloadStartImages/index.html | 4 ++-- search/index.html | 4 ++-- smallScreen/deepChatLogo/index.html | 4 ++-- smallScreen/smallScreen/index.html | 4 ++-- start/connectToCustomAPI/index.html | 4 ++-- start/connectToPopularAPI/index.html | 4 ++-- start/createComponent/index.html | 4 ++-- start/index.html | 4 ++-- start/options/index.html | 4 ++-- start/startParticles/index.html | 4 ++-- start/startSmallScreen/index.html | 4 ++-- startPanel/startPanel/index.html | 4 ++-- startPanel/startPanelParticles/index.html | 4 ++-- utils/fadeInContent/index.html | 4 ++-- utils/fadeInNav/index.html | 4 ++-- utils/onVisibleAnimation/index.html | 4 ++-- 86 files changed, 170 insertions(+), 169 deletions(-) delete mode 100644 assets/js/c214479d.4b73ea0f.js create mode 100644 assets/js/c214479d.b77cd199.js rename assets/js/{runtime~main.8eec9009.js => runtime~main.0a606cfa.js} (99%) diff --git a/404.html b/404.html index 0316959b7..94e14be1f 100644 --- a/404.html +++ b/404.html @@ -13,13 +13,13 @@ - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/c214479d.4b73ea0f.js b/assets/js/c214479d.4b73ea0f.js deleted file mode 100644 index 706c1dc7c..000000000 --- a/assets/js/c214479d.4b73ea0f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7468],{3905:(e,t,a)=>{a.d(t,{Zo:()=>d,kt:()=>h});var n=a(7294);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function i(e){for(var t=1;t=0||(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var o=n.createContext({}),p=function(e){var t=n.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},d=function(e){var t=p(e.components);return n.createElement(o.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},c=n.forwardRef((function(e,t){var a=e.components,l=e.mdxType,r=e.originalType,o=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),m=p(a),c=l,h=m["".concat(o,".").concat(c)]||m[c]||u[c]||r;return a?n.createElement(h,i(i({ref:t},d),{},{components:a})):n.createElement(h,i({ref:t},d))}));function h(e,t){var a=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=a.length,i=new Array(r);i[0]=c;var s={};for(var o in t)hasOwnProperty.call(t,o)&&(s[o]=t[o]);s.originalType=e,s[m]="string"==typeof e?e:l,i[1]=s;for(var p=2;p{a.d(t,{Z:()=>i});var n=a(7294),l=a(6010);const r={tabItem:"tabItem_Ymn6"};function i(e){let{children:t,hidden:a,className:i}=e;return n.createElement("div",{role:"tabpanel",className:(0,l.Z)(r.tabItem,i),hidden:a},t)}},4866:(e,t,a)=>{a.d(t,{Z:()=>v});var n=a(7462),l=a(7294),r=a(6010),i=a(2466),s=a(6550),o=a(1980),p=a(7392),d=a(12);function m(e){return function(e){return l.Children.map(e,(e=>{if(!e||(0,l.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}(e).map((e=>{let{props:{value:t,label:a,attributes:n,default:l}}=e;return{value:t,label:a,attributes:n,default:l}}))}function u(e){const{values:t,children:a}=e;return(0,l.useMemo)((()=>{const e=t??m(a);return function(e){const t=(0,p.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,a])}function c(e){let{value:t,tabValues:a}=e;return a.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:a}=e;const n=(0,s.k6)(),r=function(e){let{queryString:t=!1,groupId:a}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return a??null}({queryString:t,groupId:a});return[(0,o._X)(r),(0,l.useCallback)((e=>{if(!r)return;const t=new URLSearchParams(n.location.search);t.set(r,e),n.replace({...n.location,search:t.toString()})}),[r,n])]}function g(e){const{defaultValue:t,queryString:a=!1,groupId:n}=e,r=u(e),[i,s]=(0,l.useState)((()=>function(e){let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!c({value:t,tabValues:a}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${a.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=a.find((e=>e.default))??a[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:r}))),[o,p]=h({queryString:a,groupId:n}),[m,g]=function(e){let{groupId:t}=e;const a=function(e){return e?`docusaurus.tab.${e}`:null}(t),[n,r]=(0,d.Nk)(a);return[n,(0,l.useCallback)((e=>{a&&r.set(e)}),[a,r])]}({groupId:n}),k=(()=>{const e=o??m;return c({value:e,tabValues:r})?e:null})();(0,l.useLayoutEffect)((()=>{k&&s(k)}),[k]);return{selectedValue:i,selectValue:(0,l.useCallback)((e=>{if(!c({value:e,tabValues:r}))throw new Error(`Can't select invalid tab value=${e}`);s(e),p(e),g(e)}),[p,g,r]),tabValues:r}}var k=a(2389);const y={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function b(e){let{className:t,block:a,selectedValue:s,selectValue:o,tabValues:p}=e;const d=[],{blockElementScrollPositionUntilNextRender:m}=(0,i.o5)(),u=e=>{const t=e.currentTarget,a=d.indexOf(t),n=p[a].value;n!==s&&(m(t),o(n))},c=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const a=d.indexOf(e.currentTarget)+1;t=d[a]??d[0];break}case"ArrowLeft":{const a=d.indexOf(e.currentTarget)-1;t=d[a]??d[d.length-1];break}}t?.focus()};return l.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":a},t)},p.map((e=>{let{value:t,label:a,attributes:i}=e;return l.createElement("li",(0,n.Z)({role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,key:t,ref:e=>d.push(e),onKeyDown:c,onClick:u},i,{className:(0,r.Z)("tabs__item",y.tabItem,i?.className,{"tabs__item--active":s===t})}),a??t)})))}function f(e){let{lazy:t,children:a,selectedValue:n}=e;const r=(Array.isArray(a)?a:[a]).filter(Boolean);if(t){const e=r.find((e=>e.props.value===n));return e?(0,l.cloneElement)(e,{className:"margin-top--md"}):null}return l.createElement("div",{className:"margin-top--md"},r.map(((e,t)=>(0,l.cloneElement)(e,{key:t,hidden:e.props.value!==n}))))}function x(e){const t=g(e);return l.createElement("div",{className:(0,r.Z)("tabs-container",y.tabList)},l.createElement(b,(0,n.Z)({},e,t)),l.createElement(f,(0,n.Z)({},e,t)))}function v(e){const t=(0,k.Z)();return l.createElement(x,(0,n.Z)({key:String(t)},e))}},7537:(e,t,a)=>{function n(){window.hljs||a.e(637).then(a.bind(a,637)).then((e=>{window.hljs=e.default}))}async function l(){return!!window.hljs||a.e(637).then(a.bind(a,637)).then((e=>(window.hljs=e.default,!0)))}function r(){delete window.hljs}a.d(t,{A2:()=>r,i5:()=>l,pX:()=>n})},7235:(e,t,a)=>{a.d(t,{Z:()=>l});var n=a(7294);function l(){return n.createElement("div",{style:{height:"1px"}})}},1853:(e,t,a)=>{function n(e){window.scrollY>0?e.style.boxShadow="0 1px 2px 0 rgb(0 0 0 / 10%)":e.style.boxShadow="unset"}function l(){setTimeout((()=>{window.removeEventListener("scroll",window.toggleNavOnScroll);const e=document.getElementsByClassName("navbar--fixed-top");if(e[0]){const t=e[0];n(t),window.toggleNavOnScroll=n.bind(this,t),window.addEventListener("scroll",window.toggleNavOnScroll)}}),2)}function r(){setTimeout((()=>{const e=document.querySelectorAll(".homepage > body > #__docusaurus > nav")?.[0];try{e.classList.add("fade-in")}catch(t){console.error(t),console.log("element was not rendered in time - use MutationObserver")}}),2)}a.r(t),a.d(t,{fadeIn:()=>r,readdAutoNavShadowToggle:()=>l})},8751:(e,t,a)=>{a.d(t,{Z:()=>r,a:()=>l});var n=a(7294);function l(e){return e?.children[0]?.children[0]}function r(e){let{children:t,minHeight:a,innerDisplay:l}=e;return n.createElement("div",{className:"documentation-example-container",style:{minHeight:`${a||400}px`}},n.createElement("div",{style:{display:l||"block"}},t))}},4602:(e,t,a)=>{a.d(t,{Z:()=>r});var n=a(1262),l=a(7294);function r(e){return l.createElement(n.Z,null,(()=>{const t=a(2150).DeepChat;return l.createElement(t,e,e.children)}))}},5867:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>h,contentTitle:()=>u,default:()=>b,frontMatter:()=>m,metadata:()=>c,toc:()=>g});var n=a(7462),l=(a(7294),a(3905)),r=a(8751),i=a(4602),s=a(7235),o=a(1262),p=a(5162),d=a(4866);const m={sidebar_position:5},u="Messages",c={unversionedId:"docs/messages/messages",id:"docs/messages/messages",title:"Messages",description:"Properties related to messages.",source:"@site/docs/docs/messages/messages.mdx",sourceDirName:"docs/messages",slug:"/docs/messages/",permalink:"/docs/messages/",draft:!1,editUrl:"https://github.com/OvidijusParsiunas/deep-chat/tree/main/website/docs/docs/messages/messages.mdx",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"docs",previous:{title:"Styles",permalink:"/docs/styles"},next:{title:"Styles",permalink:"/docs/messages/styles"}},h={},g=[{value:"initialMessages",id:"initialMessages",level:3},{value:"Example",id:"example",level:4},{value:"introMessage",id:"introMessage",level:3},{value:"Example",id:"example-1",level:4},{value:"avatars",id:"avatars",level:3},{value:"Example",id:"example-2",level:4},{value:"Avatar",id:"Avatar",level:4},{value:"Example",id:"example-3",level:4},{value:"names",id:"names",level:3},{value:"Example",id:"example-4",level:4},{value:"Name",id:"Name",level:4},{value:"Example",id:"example-5",level:4},{value:"displayLoadingBubble",id:"displayLoadingBubble",level:3},{value:"Example",id:"example-6",level:4},{value:"errorMessages",id:"errorMessages",level:3},{value:"Example",id:"example-7",level:4},{value:"Types",id:"types",level:2},{value:"MessageContent",id:"MessageContent",level:3},{value:"Example",id:"example-8",level:4},{value:"MessageRole",id:"MessageRole",level:3},{value:"MessageFile",id:"MessageFile",level:3},{value:"Example",id:"example-9",level:4},{value:"MessageFileType",id:"MessageFileType",level:3},{value:"Code messages",id:"code-messages",level:2},{value:"Example",id:"example-10",level:4}],k={toc:g},y="wrapper";function b(e){let{components:t,...m}=e;return(0,l.kt)(y,(0,n.Z)({},k,m,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"messages"},"Messages"),(0,l.kt)("p",null,"Properties related to messages."),(0,l.kt)("h3",{id:"initialMessages"},(0,l.kt)("inlineCode",{parentName:"h3"},"initialMessages")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("a",{parentName:"li",href:"#MessageContent"},(0,l.kt)("inlineCode",{parentName:"a"},"MessageContent[]")))),(0,l.kt)("p",null,"Messages that are pre-populated when the chat loads up. This is useful for displaying previous messages."),(0,l.kt)(o.Z,{mdxType:"BrowserOnly"},(()=>a(1853).readdAutoNavShadowToggle())),(0,l.kt)(o.Z,{mdxType:"BrowserOnly"},(()=>a(7537).pX())),(0,l.kt)("h4",{id:"example"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{demo:!0,initialMessages:[{text:"Show me a modern city",role:"user"},{files:[{src:"/img/city.jpeg",type:"image"}],role:"ai"},{text:"Whats on your mind?",role:"user"},{text:"Peace and tranquility",role:"ai"}],style:{height:"370px",borderRadius:"8px"},mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"introMessage"},(0,l.kt)("inlineCode",{parentName:"h3"},"introMessage")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("inlineCode",{parentName:"li"},"text?: string"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"html?: string"),"}")),(0,l.kt)("p",null,"Initial ",(0,l.kt)("inlineCode",{parentName:"p"},"ai")," message that is displayed when the chat is loaded. It is different to ",(0,l.kt)("a",{parentName:"p",href:"#initialMessages"},(0,l.kt)("inlineCode",{parentName:"a"},"initialMessages"))," as it will not trigger\nthe ",(0,l.kt)("a",{parentName:"p",href:"/docs/events#onNewMessage"},(0,l.kt)("inlineCode",{parentName:"a"},"onNewMessage"))," listener, will not be part of the returned messages when the ",(0,l.kt)("a",{parentName:"p",href:"/docs/methods#getMessages"},(0,l.kt)("inlineCode",{parentName:"a"},"getMessages"))," method is called and\nis not taken into consideration when calculating ",(0,l.kt)("a",{parentName:"p",href:"/docs/connect#requestBodyLimits"},(0,l.kt)("inlineCode",{parentName:"a"},"requestBodyLimits")),". ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"html")," is used to render custom code - ",(0,l.kt)("a",{parentName:"p",href:"/docs/messages/HTML"},"more info"),"."),(0,l.kt)("h4",{id:"example-1"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},introMessage:{text:"Hi I am your assistant, ask me anything!"},demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"avatars"},(0,l.kt)("inlineCode",{parentName:"h3"},"avatars")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"true")," | {",(0,l.kt)("a",{parentName:"li",href:"#Avatar"},(0,l.kt)("inlineCode",{parentName:"a"},"default?: Avatar")),", ",(0,l.kt)("a",{parentName:"li",href:"#Avatar"},(0,l.kt)("inlineCode",{parentName:"a"},"ai?: Avatar")),", ",(0,l.kt)("a",{parentName:"li",href:"#Avatar"},(0,l.kt)("inlineCode",{parentName:"a"},"user?: Avatar")),"}")),(0,l.kt)("p",null,"Add avatars beside messages. You can enable this by setting the value to ",(0,l.kt)("em",{parentName:"p"},"true"),"\nor by defining an object with ",(0,l.kt)("a",{parentName:"p",href:"#Avatar"},(0,l.kt)("inlineCode",{parentName:"a"},"Avatar"))," properties. The ",(0,l.kt)("inlineCode",{parentName:"p"},"default")," property is applied to both roles."),(0,l.kt)("h4",{id:"example-2"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:"Hey, how are you?",role:"user"},{text:"I am doing great, how about you?",role:"ai"},{text:"What is the meaning of life?",role:"user"},{text:"This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",role:"ai"}],demo:!0,avatars:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h4",{id:"Avatar"},(0,l.kt)("inlineCode",{parentName:"h4"},"Avatar")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},"src?: string"),", ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},"styles?: {")," ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("a",{parentName:"li",href:"/docs/styles#CustomStyle"},(0,l.kt)("inlineCode",{parentName:"a"},"avatar?: CustomStyle")),", ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("a",{parentName:"li",href:"/docs/styles#CustomStyle"},(0,l.kt)("inlineCode",{parentName:"a"},"container?: CustomStyle"))," ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},'position?: "left" | "right"')," ",(0,l.kt)("br",null),"\n}}")),(0,l.kt)("p",null,"This object is used to configure avatars that are displayed beside messages. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"src")," is the path to an avatar image file. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"avatar")," property is used to configure the avatar element's styling. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"container")," is used to style the element that encapsulates the avatar element. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"position")," defines which side of the message the avatar is going to be displayed on."),(0,l.kt)("h4",{id:"example-3"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:"Hey, how are you?",role:"user"},{text:"I am doing great, how about you?",role:"ai"},{text:"What is the meaning of life?",role:"user"},{text:"This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",role:"ai"}],avatars:{default:{styles:{avatar:{height:"30px",width:"30px"},container:{marginTop:"8px"}}},ai:{src:"/img/ai-brain.svg",styles:{avatar:{marginLeft:"-3px"}}}},demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"names"},(0,l.kt)("inlineCode",{parentName:"h3"},"names")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"true")," | {",(0,l.kt)("a",{parentName:"li",href:"#Name"},(0,l.kt)("inlineCode",{parentName:"a"},"default?: Name")),", ",(0,l.kt)("a",{parentName:"li",href:"#Name"},(0,l.kt)("inlineCode",{parentName:"a"},"ai?: Name")),", ",(0,l.kt)("a",{parentName:"li",href:"#Name"},(0,l.kt)("inlineCode",{parentName:"a"},"user?: Name")),"}")),(0,l.kt)("p",null,"Add names beside messages. You can enable this by setting the value to ",(0,l.kt)("em",{parentName:"p"},"true"),"\nor by defining an object with ",(0,l.kt)("a",{parentName:"p",href:"#Name"},(0,l.kt)("inlineCode",{parentName:"a"},"Name"))," properties. The ",(0,l.kt)("inlineCode",{parentName:"p"},"default")," property is applied to both roles. ",(0,l.kt)("br",null)),(0,l.kt)("h4",{id:"example-4"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:"Hey, how are you?",role:"user"},{text:"I am doing great, how about you?",role:"ai"},{text:"What is the meaning of life?",role:"user"},{text:"This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",role:"ai"}],demo:!0,names:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h4",{id:"Name"},(0,l.kt)("inlineCode",{parentName:"h4"},"Name")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},"text?: string"),", ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("a",{parentName:"li",href:"/docs/styles#CustomStyle"},(0,l.kt)("inlineCode",{parentName:"a"},"style?: CustomStyle")),", ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},'position?: "left" | "right"')," ",(0,l.kt)("br",null),"\n}")),(0,l.kt)("p",null,"This object is used to configure names that are displayed beside messages. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"text")," is the string used for the name. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"style")," is used to define the style of the name element. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"position")," defines which side of the message the name is going to be displayed."),(0,l.kt)("h4",{id:"example-5"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:"Hey, how are you?",role:"user"},{text:"I am doing great, how about you?",role:"ai"},{text:"What is the meaning of life?",role:"user"},{text:"This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",role:"ai"}],demo:!0,names:{default:{style:{fontSize:"18px",marginTop:"14px"}},ai:{text:"You"},user:{text:"Me"}},mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"displayLoadingBubble"},(0,l.kt)("inlineCode",{parentName:"h3"},"displayLoadingBubble")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"boolean"))),(0,l.kt)("p",null,"Toggle whether the loading bubble should be displayed when waiting for a message response. If set to ",(0,l.kt)("em",{parentName:"p"},"false")," - the ",(0,l.kt)("a",{parentName:"p",href:"/docs/styles/#submitButtonStyles"},"submit button"),"\nwill automatically have a loading animation."),(0,l.kt)("h4",{id:"example-6"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},introMessage:{text:"Send a new message to observe a response with no loading bubble."},displayLoadingBubble:!1,demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"errorMessages"},(0,l.kt)("inlineCode",{parentName:"h3"},"errorMessages")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"Type: {",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"displayServiceErrorMessages?: boolean"),", ",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"overrides?:")," { ",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"default?: string"),", ",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"service?: string"),", ",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"speechToText?: string")," ",(0,l.kt)("br",null),"\n}}")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"Default: ",(0,l.kt)("em",{parentName:"p"},'{ displayServiceErrorMessages: false, overrides: {default: "Error, please try again." }}')))),(0,l.kt)("p",null,"Deep Chat automatically displays an error message when something goes wrong. This object is used to control what the message will contain. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"displayServiceErrorMessages")," is used to display the full error message that has been returned from the service. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"overrides")," is used to overwrite the error message text based on what has caused it: ",(0,l.kt)("inlineCode",{parentName:"p"},"default")," is used for any kind of error, ",(0,l.kt)("inlineCode",{parentName:"p"},"service"),"\nis for communication with the target service and ",(0,l.kt)("inlineCode",{parentName:"p"},"speechToText")," is when there is a problem using the ",(0,l.kt)("a",{parentName:"p",href:"/docs/speech#speechToText"},(0,l.kt)("inlineCode",{parentName:"a"},"speechToText"))," functionality. ",(0,l.kt)("br",null)),(0,l.kt)("h4",{id:"example-7"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},demo:{displayErrors:{default:!0,service:!0,speechToText:!0}},errorMessages:{overrides:{default:"Default error :(",service:"Target service error!",speechToText:"Speech to text microphone error!"}},mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h2",{id:"types"},"Types"),(0,l.kt)("p",null,"Shared object property types related to messages:"),(0,l.kt)("h3",{id:"MessageContent"},(0,l.kt)("inlineCode",{parentName:"h3"},"MessageContent")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("a",{parentName:"li",href:"#MessageRole"},(0,l.kt)("inlineCode",{parentName:"a"},"role: MessageRole")),", ",(0,l.kt)("inlineCode",{parentName:"li"},"text?: string"),", ",(0,l.kt)("a",{parentName:"li",href:"#MessageFile"},(0,l.kt)("inlineCode",{parentName:"a"},"files?: MessageFile[]")),", ",(0,l.kt)("a",{parentName:"li",href:"/docs/messages/HTML"},(0,l.kt)("inlineCode",{parentName:"a"},"html?: string")),"}")),(0,l.kt)("p",null,"Object format used to encapsulate a message within the chat. The ",(0,l.kt)("inlineCode",{parentName:"p"},"role")," property is required whilst other properties are defined/combined depending\non what is being transferred in the message. ",(0,l.kt)("br",null),"\nThe ",(0,l.kt)("inlineCode",{parentName:"p"},"text")," string uses ",(0,l.kt)("a",{parentName:"p",href:"https://www.markdownguide.org/basic-syntax/"},"Markdown")," syntax to render the message accordingly. This is useful for displaying code snippets, paragraphs etc. See this ",(0,l.kt)("a",{parentName:"p",href:"https://jonschlinkert.github.io/remarkable/demo/"},"playground")," for reference. ",(0,l.kt)("br",null)),(0,l.kt)("h4",{id:"example-8"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{files:[{src:"/img/bird-2.jpeg",type:"image"}],role:"user"},{text:"This is a nice image of a yellow bird on a branch.",role:"ai"}],demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"MessageRole"},(0,l.kt)("inlineCode",{parentName:"h3"},"MessageRole")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},'"ai"')," | ",(0,l.kt)("inlineCode",{parentName:"li"},'"user"'))),(0,l.kt)("p",null,"Entity that the message was sent from."),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"MessageFile"},(0,l.kt)("inlineCode",{parentName:"h3"},"MessageFile")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("inlineCode",{parentName:"li"},"name?: string"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"src?: string"),", ",(0,l.kt)("a",{parentName:"li",href:"#MessageFileType"},(0,l.kt)("inlineCode",{parentName:"a"},"type?: MessageFileType")),"} ",(0,l.kt)("br",null)),(0,l.kt)("li",{parentName:"ul"},"Default: ",(0,l.kt)("em",{parentName:"li"},'{name: "file", type: "any"}'))),(0,l.kt)("p",null,"Format that defines the details of a file. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"name")," is used to display the file name inside the message bubble (if not image/gif/audio). ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"src")," is either the ",(0,l.kt)("em",{parentName:"p"},"url")," path to the file location or the base64 encoding as a string (make sure to use the correct type prefix e.g: ",(0,l.kt)("em",{parentName:"p"},'"data:(type);base64,"'),").",(0,l.kt)("br",null),"\nThe component will automatically try to infer the file type from the ",(0,l.kt)("inlineCode",{parentName:"p"},"src")," property so that it can render its media correctly,\nhowever you can help it by setting the ",(0,l.kt)("inlineCode",{parentName:"p"},"type"),"."),(0,l.kt)("h4",{id:"example-9"},"Example"),(0,l.kt)(r.Z,{minHeight:535,mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px",height:"480px"},initialMessages:[{role:"user",files:[{src:"/img/city.jpeg",type:"image"},{src:"/img/example-gif-1.gif",type:"image"},{src:"/audio/cantinaBand.wav",type:"audio"},{name:"placeholder.exe"},{src:"/text/text.txt",name:"hello-world.txt",type:"file"}]}],demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("admonition",{type:"info"},(0,l.kt)("p",{parentName:"admonition"},"Files with ",(0,l.kt)("em",{parentName:"p"},'"image"')," or ",(0,l.kt)("em",{parentName:"p"},'"any"')," types that contain a ",(0,l.kt)("inlineCode",{parentName:"p"},"src")," property as a url will have their bubble set as a hyperlink.")),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"MessageFileType"},(0,l.kt)("inlineCode",{parentName:"h3"},"MessageFileType")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},'"image"')," | ",(0,l.kt)("inlineCode",{parentName:"li"},'"audio"')," | ",(0,l.kt)("inlineCode",{parentName:"li"},'"any"'))),(0,l.kt)("p",null,"Type of a file stored inside a message. ",(0,l.kt)("em",{parentName:"p"},'"any"')," is the default type."),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h2",{id:"code-messages"},"Code messages"),(0,l.kt)("p",null,"By default, messages containing code will be rendered with white text in a dark background.\nIn order to highlight the code, you will need to add an external module called ",(0,l.kt)("a",{parentName:"p",href:"https://www.npmjs.com/package/highlight.js?activeTab=readme"},(0,l.kt)("inlineCode",{parentName:"a"},"highligtjs")),".\nCheck out external module ",(0,l.kt)("a",{parentName:"p",href:"/examples/externalModules"},"EXAMPLES")," to find multiple ways of how you can add it to your project."),(0,l.kt)("h4",{id:"example-10"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:'```java\nwhile (i < 5) {\n console.log("hi");\n i+= 1;\n}\n```',role:"ai"}],messageStyles:{default:{shared:{bubble:{maxWidth:"270px"}}}},demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}))}b.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/c214479d.b77cd199.js b/assets/js/c214479d.b77cd199.js new file mode 100644 index 000000000..33c3994cf --- /dev/null +++ b/assets/js/c214479d.b77cd199.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7468],{3905:(e,t,a)=>{a.d(t,{Zo:()=>d,kt:()=>h});var n=a(7294);function l(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function i(e){for(var t=1;t=0||(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var o=n.createContext({}),p=function(e){var t=n.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},d=function(e){var t=p(e.components);return n.createElement(o.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},c=n.forwardRef((function(e,t){var a=e.components,l=e.mdxType,r=e.originalType,o=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),m=p(a),c=l,h=m["".concat(o,".").concat(c)]||m[c]||u[c]||r;return a?n.createElement(h,i(i({ref:t},d),{},{components:a})):n.createElement(h,i({ref:t},d))}));function h(e,t){var a=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var r=a.length,i=new Array(r);i[0]=c;var s={};for(var o in t)hasOwnProperty.call(t,o)&&(s[o]=t[o]);s.originalType=e,s[m]="string"==typeof e?e:l,i[1]=s;for(var p=2;p{a.d(t,{Z:()=>i});var n=a(7294),l=a(6010);const r={tabItem:"tabItem_Ymn6"};function i(e){let{children:t,hidden:a,className:i}=e;return n.createElement("div",{role:"tabpanel",className:(0,l.Z)(r.tabItem,i),hidden:a},t)}},4866:(e,t,a)=>{a.d(t,{Z:()=>v});var n=a(7462),l=a(7294),r=a(6010),i=a(2466),s=a(6550),o=a(1980),p=a(7392),d=a(12);function m(e){return function(e){return l.Children.map(e,(e=>{if(!e||(0,l.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}(e).map((e=>{let{props:{value:t,label:a,attributes:n,default:l}}=e;return{value:t,label:a,attributes:n,default:l}}))}function u(e){const{values:t,children:a}=e;return(0,l.useMemo)((()=>{const e=t??m(a);return function(e){const t=(0,p.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,a])}function c(e){let{value:t,tabValues:a}=e;return a.some((e=>e.value===t))}function h(e){let{queryString:t=!1,groupId:a}=e;const n=(0,s.k6)(),r=function(e){let{queryString:t=!1,groupId:a}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return a??null}({queryString:t,groupId:a});return[(0,o._X)(r),(0,l.useCallback)((e=>{if(!r)return;const t=new URLSearchParams(n.location.search);t.set(r,e),n.replace({...n.location,search:t.toString()})}),[r,n])]}function g(e){const{defaultValue:t,queryString:a=!1,groupId:n}=e,r=u(e),[i,s]=(0,l.useState)((()=>function(e){let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!c({value:t,tabValues:a}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${a.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=a.find((e=>e.default))??a[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:r}))),[o,p]=h({queryString:a,groupId:n}),[m,g]=function(e){let{groupId:t}=e;const a=function(e){return e?`docusaurus.tab.${e}`:null}(t),[n,r]=(0,d.Nk)(a);return[n,(0,l.useCallback)((e=>{a&&r.set(e)}),[a,r])]}({groupId:n}),k=(()=>{const e=o??m;return c({value:e,tabValues:r})?e:null})();(0,l.useLayoutEffect)((()=>{k&&s(k)}),[k]);return{selectedValue:i,selectValue:(0,l.useCallback)((e=>{if(!c({value:e,tabValues:r}))throw new Error(`Can't select invalid tab value=${e}`);s(e),p(e),g(e)}),[p,g,r]),tabValues:r}}var k=a(2389);const y={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function b(e){let{className:t,block:a,selectedValue:s,selectValue:o,tabValues:p}=e;const d=[],{blockElementScrollPositionUntilNextRender:m}=(0,i.o5)(),u=e=>{const t=e.currentTarget,a=d.indexOf(t),n=p[a].value;n!==s&&(m(t),o(n))},c=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const a=d.indexOf(e.currentTarget)+1;t=d[a]??d[0];break}case"ArrowLeft":{const a=d.indexOf(e.currentTarget)-1;t=d[a]??d[d.length-1];break}}t?.focus()};return l.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":a},t)},p.map((e=>{let{value:t,label:a,attributes:i}=e;return l.createElement("li",(0,n.Z)({role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,key:t,ref:e=>d.push(e),onKeyDown:c,onClick:u},i,{className:(0,r.Z)("tabs__item",y.tabItem,i?.className,{"tabs__item--active":s===t})}),a??t)})))}function f(e){let{lazy:t,children:a,selectedValue:n}=e;const r=(Array.isArray(a)?a:[a]).filter(Boolean);if(t){const e=r.find((e=>e.props.value===n));return e?(0,l.cloneElement)(e,{className:"margin-top--md"}):null}return l.createElement("div",{className:"margin-top--md"},r.map(((e,t)=>(0,l.cloneElement)(e,{key:t,hidden:e.props.value!==n}))))}function x(e){const t=g(e);return l.createElement("div",{className:(0,r.Z)("tabs-container",y.tabList)},l.createElement(b,(0,n.Z)({},e,t)),l.createElement(f,(0,n.Z)({},e,t)))}function v(e){const t=(0,k.Z)();return l.createElement(x,(0,n.Z)({key:String(t)},e))}},7537:(e,t,a)=>{function n(){window.hljs||a.e(637).then(a.bind(a,637)).then((e=>{window.hljs=e.default}))}async function l(){return!!window.hljs||a.e(637).then(a.bind(a,637)).then((e=>(window.hljs=e.default,!0)))}function r(){delete window.hljs}a.d(t,{A2:()=>r,i5:()=>l,pX:()=>n})},7235:(e,t,a)=>{a.d(t,{Z:()=>l});var n=a(7294);function l(){return n.createElement("div",{style:{height:"1px"}})}},1853:(e,t,a)=>{function n(e){window.scrollY>0?e.style.boxShadow="0 1px 2px 0 rgb(0 0 0 / 10%)":e.style.boxShadow="unset"}function l(){setTimeout((()=>{window.removeEventListener("scroll",window.toggleNavOnScroll);const e=document.getElementsByClassName("navbar--fixed-top");if(e[0]){const t=e[0];n(t),window.toggleNavOnScroll=n.bind(this,t),window.addEventListener("scroll",window.toggleNavOnScroll)}}),2)}function r(){setTimeout((()=>{const e=document.querySelectorAll(".homepage > body > #__docusaurus > nav")?.[0];try{e.classList.add("fade-in")}catch(t){console.error(t),console.log("element was not rendered in time - use MutationObserver")}}),2)}a.r(t),a.d(t,{fadeIn:()=>r,readdAutoNavShadowToggle:()=>l})},8751:(e,t,a)=>{a.d(t,{Z:()=>r,a:()=>l});var n=a(7294);function l(e){return e?.children[0]?.children[0]}function r(e){let{children:t,minHeight:a,innerDisplay:l}=e;return n.createElement("div",{className:"documentation-example-container",style:{minHeight:`${a||400}px`}},n.createElement("div",{style:{display:l||"block"}},t))}},4602:(e,t,a)=>{a.d(t,{Z:()=>r});var n=a(1262),l=a(7294);function r(e){return l.createElement(n.Z,null,(()=>{const t=a(2150).DeepChat;return l.createElement(t,e,e.children)}))}},5867:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>h,contentTitle:()=>u,default:()=>b,frontMatter:()=>m,metadata:()=>c,toc:()=>g});var n=a(7462),l=(a(7294),a(3905)),r=a(8751),i=a(4602),s=a(7235),o=a(1262),p=a(5162),d=a(4866);const m={sidebar_position:5},u="Messages",c={unversionedId:"docs/messages/messages",id:"docs/messages/messages",title:"Messages",description:"Properties related to messages.",source:"@site/docs/docs/messages/messages.mdx",sourceDirName:"docs/messages",slug:"/docs/messages/",permalink:"/docs/messages/",draft:!1,editUrl:"https://github.com/OvidijusParsiunas/deep-chat/tree/main/website/docs/docs/messages/messages.mdx",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"docs",previous:{title:"Styles",permalink:"/docs/styles"},next:{title:"Styles",permalink:"/docs/messages/styles"}},h={},g=[{value:"initialMessages",id:"initialMessages",level:3},{value:"Example",id:"example",level:4},{value:"introMessage",id:"introMessage",level:3},{value:"Example",id:"example-1",level:4},{value:"avatars",id:"avatars",level:3},{value:"Example",id:"example-2",level:4},{value:"Avatar",id:"Avatar",level:4},{value:"Example",id:"example-3",level:4},{value:"names",id:"names",level:3},{value:"Example",id:"example-4",level:4},{value:"Name",id:"Name",level:4},{value:"Example",id:"example-5",level:4},{value:"displayLoadingBubble",id:"displayLoadingBubble",level:3},{value:"Example",id:"example-6",level:4},{value:"errorMessages",id:"errorMessages",level:3},{value:"Example",id:"example-7",level:4},{value:"Types",id:"types",level:2},{value:"MessageContent",id:"MessageContent",level:3},{value:"Example",id:"example-8",level:4},{value:"MessageRole",id:"MessageRole",level:3},{value:"MessageFile",id:"MessageFile",level:3},{value:"Example",id:"example-9",level:4},{value:"MessageFileType",id:"MessageFileType",level:3},{value:"Code messages",id:"code-messages",level:2},{value:"Example",id:"example-10",level:4}],k={toc:g},y="wrapper";function b(e){let{components:t,...m}=e;return(0,l.kt)(y,(0,n.Z)({},k,m,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"messages"},"Messages"),(0,l.kt)("p",null,"Properties related to messages."),(0,l.kt)("h3",{id:"initialMessages"},(0,l.kt)("inlineCode",{parentName:"h3"},"initialMessages")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("a",{parentName:"li",href:"#MessageContent"},(0,l.kt)("inlineCode",{parentName:"a"},"MessageContent[]")))),(0,l.kt)("p",null,"Messages that are pre-populated when the chat loads up. This is useful for displaying previous messages."),(0,l.kt)(o.Z,{mdxType:"BrowserOnly"},(()=>a(1853).readdAutoNavShadowToggle())),(0,l.kt)(o.Z,{mdxType:"BrowserOnly"},(()=>a(7537).pX())),(0,l.kt)("h4",{id:"example"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{demo:!0,initialMessages:[{text:"Show me a modern city",role:"user"},{files:[{src:"/img/city.jpeg",type:"image"}],role:"ai"},{text:"Whats on your mind?",role:"user"},{text:"Peace and tranquility",role:"ai"}],style:{height:"370px",borderRadius:"8px"},mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"introMessage"},(0,l.kt)("inlineCode",{parentName:"h3"},"introMessage")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("inlineCode",{parentName:"li"},"text?: string"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"html?: string"),"}")),(0,l.kt)("p",null,"Initial ",(0,l.kt)("inlineCode",{parentName:"p"},"ai")," message that is displayed when the chat is loaded. It is different to ",(0,l.kt)("a",{parentName:"p",href:"#initialMessages"},(0,l.kt)("inlineCode",{parentName:"a"},"initialMessages"))," as it will not trigger\nthe ",(0,l.kt)("a",{parentName:"p",href:"/docs/events#onNewMessage"},(0,l.kt)("inlineCode",{parentName:"a"},"onNewMessage"))," listener, will not be part of the returned messages when the ",(0,l.kt)("a",{parentName:"p",href:"/docs/methods#getMessages"},(0,l.kt)("inlineCode",{parentName:"a"},"getMessages"))," method is called and\nis not taken into consideration when calculating ",(0,l.kt)("a",{parentName:"p",href:"/docs/connect#requestBodyLimits"},(0,l.kt)("inlineCode",{parentName:"a"},"requestBodyLimits")),". ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"html")," is used to render ",(0,l.kt)("a",{parentName:"p",href:"/docs/messages/HTML"},"custom code")," and can be coupled with a ",(0,l.kt)("a",{parentName:"p",href:"/docs/messages/HTML#deepChatClasses"},(0,l.kt)("inlineCode",{parentName:"a"},"deep-chat-temporary-message")),"\nclass to make this message disappear after a new one is added."),(0,l.kt)("h4",{id:"example-1"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},introMessage:{text:"Hi I am your assistant, ask me anything!"},demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"avatars"},(0,l.kt)("inlineCode",{parentName:"h3"},"avatars")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"true")," | {",(0,l.kt)("a",{parentName:"li",href:"#Avatar"},(0,l.kt)("inlineCode",{parentName:"a"},"default?: Avatar")),", ",(0,l.kt)("a",{parentName:"li",href:"#Avatar"},(0,l.kt)("inlineCode",{parentName:"a"},"ai?: Avatar")),", ",(0,l.kt)("a",{parentName:"li",href:"#Avatar"},(0,l.kt)("inlineCode",{parentName:"a"},"user?: Avatar")),"}")),(0,l.kt)("p",null,"Add avatars beside messages. You can enable this by setting the value to ",(0,l.kt)("em",{parentName:"p"},"true"),"\nor by defining an object with ",(0,l.kt)("a",{parentName:"p",href:"#Avatar"},(0,l.kt)("inlineCode",{parentName:"a"},"Avatar"))," properties. The ",(0,l.kt)("inlineCode",{parentName:"p"},"default")," property is applied to both roles."),(0,l.kt)("h4",{id:"example-2"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:"Hey, how are you?",role:"user"},{text:"I am doing great, how about you?",role:"ai"},{text:"What is the meaning of life?",role:"user"},{text:"This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",role:"ai"}],demo:!0,avatars:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h4",{id:"Avatar"},(0,l.kt)("inlineCode",{parentName:"h4"},"Avatar")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},"src?: string"),", ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},"styles?: {")," ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("a",{parentName:"li",href:"/docs/styles#CustomStyle"},(0,l.kt)("inlineCode",{parentName:"a"},"avatar?: CustomStyle")),", ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("a",{parentName:"li",href:"/docs/styles#CustomStyle"},(0,l.kt)("inlineCode",{parentName:"a"},"container?: CustomStyle"))," ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},'position?: "left" | "right"')," ",(0,l.kt)("br",null),"\n}}")),(0,l.kt)("p",null,"This object is used to configure avatars that are displayed beside messages. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"src")," is the path to an avatar image file. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"avatar")," property is used to configure the avatar element's styling. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"container")," is used to style the element that encapsulates the avatar element. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"position")," defines which side of the message the avatar is going to be displayed on."),(0,l.kt)("h4",{id:"example-3"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:"Hey, how are you?",role:"user"},{text:"I am doing great, how about you?",role:"ai"},{text:"What is the meaning of life?",role:"user"},{text:"This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",role:"ai"}],avatars:{default:{styles:{avatar:{height:"30px",width:"30px"},container:{marginTop:"8px"}}},ai:{src:"/img/ai-brain.svg",styles:{avatar:{marginLeft:"-3px"}}}},demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"names"},(0,l.kt)("inlineCode",{parentName:"h3"},"names")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"true")," | {",(0,l.kt)("a",{parentName:"li",href:"#Name"},(0,l.kt)("inlineCode",{parentName:"a"},"default?: Name")),", ",(0,l.kt)("a",{parentName:"li",href:"#Name"},(0,l.kt)("inlineCode",{parentName:"a"},"ai?: Name")),", ",(0,l.kt)("a",{parentName:"li",href:"#Name"},(0,l.kt)("inlineCode",{parentName:"a"},"user?: Name")),"}")),(0,l.kt)("p",null,"Add names beside messages. You can enable this by setting the value to ",(0,l.kt)("em",{parentName:"p"},"true"),"\nor by defining an object with ",(0,l.kt)("a",{parentName:"p",href:"#Name"},(0,l.kt)("inlineCode",{parentName:"a"},"Name"))," properties. The ",(0,l.kt)("inlineCode",{parentName:"p"},"default")," property is applied to both roles. ",(0,l.kt)("br",null)),(0,l.kt)("h4",{id:"example-4"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:"Hey, how are you?",role:"user"},{text:"I am doing great, how about you?",role:"ai"},{text:"What is the meaning of life?",role:"user"},{text:"This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",role:"ai"}],demo:!0,names:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h4",{id:"Name"},(0,l.kt)("inlineCode",{parentName:"h4"},"Name")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},"text?: string"),", ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("a",{parentName:"li",href:"/docs/styles#CustomStyle"},(0,l.kt)("inlineCode",{parentName:"a"},"style?: CustomStyle")),", ",(0,l.kt)("br",null),"\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"li"},'position?: "left" | "right"')," ",(0,l.kt)("br",null),"\n}")),(0,l.kt)("p",null,"This object is used to configure names that are displayed beside messages. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"text")," is the string used for the name. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"style")," is used to define the style of the name element. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"position")," defines which side of the message the name is going to be displayed."),(0,l.kt)("h4",{id:"example-5"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:"Hey, how are you?",role:"user"},{text:"I am doing great, how about you?",role:"ai"},{text:"What is the meaning of life?",role:"user"},{text:"This ultimately depends on the person, but it could be the pursuit of happiness or fulfillment.",role:"ai"}],demo:!0,names:{default:{style:{fontSize:"18px",marginTop:"14px"}},ai:{text:"You"},user:{text:"Me"}},mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"displayLoadingBubble"},(0,l.kt)("inlineCode",{parentName:"h3"},"displayLoadingBubble")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"boolean"))),(0,l.kt)("p",null,"Toggle whether the loading bubble should be displayed when waiting for a message response. If set to ",(0,l.kt)("em",{parentName:"p"},"false")," - the ",(0,l.kt)("a",{parentName:"p",href:"/docs/styles/#submitButtonStyles"},"submit button"),"\nwill automatically have a loading animation."),(0,l.kt)("h4",{id:"example-6"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},introMessage:{text:"Send a new message to observe a response with no loading bubble."},displayLoadingBubble:!1,demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"errorMessages"},(0,l.kt)("inlineCode",{parentName:"h3"},"errorMessages")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"Type: {",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"displayServiceErrorMessages?: boolean"),", ",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"overrides?:")," { ",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"default?: string"),", ",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"service?: string"),", ",(0,l.kt)("br",null),"\n","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0","\xa0"," ",(0,l.kt)("inlineCode",{parentName:"p"},"speechToText?: string")," ",(0,l.kt)("br",null),"\n}}")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"Default: ",(0,l.kt)("em",{parentName:"p"},'{ displayServiceErrorMessages: false, overrides: {default: "Error, please try again." }}')))),(0,l.kt)("p",null,"Deep Chat automatically displays an error message when something goes wrong. This object is used to control what the message will contain. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"displayServiceErrorMessages")," is used to display the full error message that has been returned from the service. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"overrides")," is used to overwrite the error message text based on what has caused it: ",(0,l.kt)("inlineCode",{parentName:"p"},"default")," is used for any kind of error, ",(0,l.kt)("inlineCode",{parentName:"p"},"service"),"\nis for communication with the target service and ",(0,l.kt)("inlineCode",{parentName:"p"},"speechToText")," is when there is a problem using the ",(0,l.kt)("a",{parentName:"p",href:"/docs/speech#speechToText"},(0,l.kt)("inlineCode",{parentName:"a"},"speechToText"))," functionality. ",(0,l.kt)("br",null)),(0,l.kt)("h4",{id:"example-7"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},demo:{displayErrors:{default:!0,service:!0,speechToText:!0}},errorMessages:{overrides:{default:"Default error :(",service:"Target service error!",speechToText:"Speech to text microphone error!"}},mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h2",{id:"types"},"Types"),(0,l.kt)("p",null,"Shared object property types related to messages:"),(0,l.kt)("h3",{id:"MessageContent"},(0,l.kt)("inlineCode",{parentName:"h3"},"MessageContent")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("a",{parentName:"li",href:"#MessageRole"},(0,l.kt)("inlineCode",{parentName:"a"},"role: MessageRole")),", ",(0,l.kt)("inlineCode",{parentName:"li"},"text?: string"),", ",(0,l.kt)("a",{parentName:"li",href:"#MessageFile"},(0,l.kt)("inlineCode",{parentName:"a"},"files?: MessageFile[]")),", ",(0,l.kt)("a",{parentName:"li",href:"/docs/messages/HTML"},(0,l.kt)("inlineCode",{parentName:"a"},"html?: string")),"}")),(0,l.kt)("p",null,"Object format used to encapsulate a message within the chat. The ",(0,l.kt)("inlineCode",{parentName:"p"},"role")," property is required whilst other properties are defined/combined depending\non what is being transferred in the message. ",(0,l.kt)("br",null),"\nThe ",(0,l.kt)("inlineCode",{parentName:"p"},"text")," string uses ",(0,l.kt)("a",{parentName:"p",href:"https://www.markdownguide.org/basic-syntax/"},"Markdown")," syntax to render the message accordingly. This is useful for displaying code snippets, paragraphs etc. See this ",(0,l.kt)("a",{parentName:"p",href:"https://jonschlinkert.github.io/remarkable/demo/"},"playground")," for reference. ",(0,l.kt)("br",null)),(0,l.kt)("h4",{id:"example-8"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{files:[{src:"/img/bird-2.jpeg",type:"image"}],role:"user"},{text:"This is a nice image of a yellow bird on a branch.",role:"ai"}],demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"MessageRole"},(0,l.kt)("inlineCode",{parentName:"h3"},"MessageRole")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},'"ai"')," | ",(0,l.kt)("inlineCode",{parentName:"li"},'"user"'))),(0,l.kt)("p",null,"Entity that the message was sent from."),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"MessageFile"},(0,l.kt)("inlineCode",{parentName:"h3"},"MessageFile")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: {",(0,l.kt)("inlineCode",{parentName:"li"},"name?: string"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"src?: string"),", ",(0,l.kt)("a",{parentName:"li",href:"#MessageFileType"},(0,l.kt)("inlineCode",{parentName:"a"},"type?: MessageFileType")),"} ",(0,l.kt)("br",null)),(0,l.kt)("li",{parentName:"ul"},"Default: ",(0,l.kt)("em",{parentName:"li"},'{name: "file", type: "any"}'))),(0,l.kt)("p",null,"Format that defines the details of a file. ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"name")," is used to display the file name inside the message bubble (if not image/gif/audio). ",(0,l.kt)("br",null),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"src")," is either the ",(0,l.kt)("em",{parentName:"p"},"url")," path to the file location or the base64 encoding as a string (make sure to use the correct type prefix e.g: ",(0,l.kt)("em",{parentName:"p"},'"data:(type);base64,"'),").",(0,l.kt)("br",null),"\nThe component will automatically try to infer the file type from the ",(0,l.kt)("inlineCode",{parentName:"p"},"src")," property so that it can render its media correctly,\nhowever you can help it by setting the ",(0,l.kt)("inlineCode",{parentName:"p"},"type"),"."),(0,l.kt)("h4",{id:"example-9"},"Example"),(0,l.kt)(r.Z,{minHeight:535,mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px",height:"480px"},initialMessages:[{role:"user",files:[{src:"/img/city.jpeg",type:"image"},{src:"/img/example-gif-1.gif",type:"image"},{src:"/audio/cantinaBand.wav",type:"audio"},{name:"placeholder.exe"},{src:"/text/text.txt",name:"hello-world.txt",type:"file"}]}],demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("admonition",{type:"info"},(0,l.kt)("p",{parentName:"admonition"},"Files with ",(0,l.kt)("em",{parentName:"p"},'"image"')," or ",(0,l.kt)("em",{parentName:"p"},'"any"')," types that contain a ",(0,l.kt)("inlineCode",{parentName:"p"},"src")," property as a url will have their bubble set as a hyperlink.")),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h3",{id:"MessageFileType"},(0,l.kt)("inlineCode",{parentName:"h3"},"MessageFileType")),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},'"image"')," | ",(0,l.kt)("inlineCode",{parentName:"li"},'"audio"')," | ",(0,l.kt)("inlineCode",{parentName:"li"},'"any"'))),(0,l.kt)("p",null,"Type of a file stored inside a message. ",(0,l.kt)("em",{parentName:"p"},'"any"')," is the default type."),(0,l.kt)(s.Z,{mdxType:"LineBreak"}),(0,l.kt)("h2",{id:"code-messages"},"Code messages"),(0,l.kt)("p",null,"By default, messages containing code will be rendered with white text in a dark background.\nIn order to highlight the code, you will need to add an external module called ",(0,l.kt)("a",{parentName:"p",href:"https://www.npmjs.com/package/highlight.js?activeTab=readme"},(0,l.kt)("inlineCode",{parentName:"a"},"highligtjs")),".\nCheck out external module ",(0,l.kt)("a",{parentName:"p",href:"/examples/externalModules"},"EXAMPLES")," to find multiple ways of how you can add it to your project."),(0,l.kt)("h4",{id:"example-10"},"Example"),(0,l.kt)(r.Z,{mdxType:"ComponentContainer"},(0,l.kt)(i.Z,{style:{borderRadius:"8px"},initialMessages:[{text:'```java\nwhile (i < 5) {\n console.log("hi");\n i+= 1;\n}\n```',role:"ai"}],messageStyles:{default:{shared:{bubble:{maxWidth:"270px"}}}},demo:!0,mdxType:"DeepChatBrowser"})),(0,l.kt)(d.Z,{mdxType:"Tabs"},(0,l.kt)(p.Z,{value:"js",label:"Sample code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\n'))),(0,l.kt)(p.Z,{value:"py",label:"Full code",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) --\x3e\n\n\n')))),(0,l.kt)(s.Z,{mdxType:"LineBreak"}))}b.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.8eec9009.js b/assets/js/runtime~main.0a606cfa.js similarity index 99% rename from assets/js/runtime~main.8eec9009.js rename to assets/js/runtime~main.0a606cfa.js index c2d891d36..0f5dd72af 100644 --- a/assets/js/runtime~main.8eec9009.js +++ b/assets/js/runtime~main.0a606cfa.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,f,d,c,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=b,r.c=t,e=[],r.O=(a,f,d,c)=>{if(!f){var b=1/0;for(i=0;i=c)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,d,c]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var c=Object.create(null);r.r(c);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(c,b),c},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({18:"f17f53dd",53:"935f2afb",182:"bc7c935a",261:"47058687",490:"5812764a",639:"87712f4e",828:"394b1633",1098:"f80390e0",1149:"7cd620da",1594:"53a90a4e",1781:"b0d8ca7b",1933:"70adbe13",2e3:"cf7ccda1",2008:"08c9246a",2240:"ff031c7d",2242:"ef02564c",2248:"2e0dce54",2355:"3c83ca7d",2465:"3c0c6a7f",2478:"62f3de64",2629:"dbc3e690",2722:"4a70a78f",2885:"8a751f9f",2919:"0c5b3199",2953:"5efdef18",3042:"1e0b4360",3049:"707d70df",3116:"2b486e95",3120:"91b8d63b",3204:"ab90bf36",3418:"960803bf",3531:"ad7a1ef6",3779:"ab8b4d1f",3877:"a40ae8f2",4020:"fe82bda8",4184:"b467856c",4195:"c4f5d8e4",4202:"71f93b87",4223:"cf9b7507",4228:"71a4181b",4246:"cab71165",4356:"60e67547",4395:"2609d35c",4668:"22f048b3",5003:"8e6cc846",5289:"a188041f",5485:"91c39c3c",5494:"a19404f3",5668:"ec3987b3",5875:"14c42b22",5877:"945fd7ad",5891:"50b9661c",5899:"f4a41cc5",6069:"08854dbd",6223:"83d494d4",6683:"43744cfd",6896:"15033d09",6979:"3d7ef9b9",7056:"c03611c9",7168:"95881879",7241:"288adf4d",7397:"09bef922",7437:"3f2a55e2",7468:"c214479d",7474:"2e8e5295",7654:"e0aabcf0",7754:"38776a5e",7768:"7cb2479d",7836:"b8a67d89",7902:"0a24f6e4",7918:"17896441",7920:"1a4e3797",8149:"943f163d",8303:"a59ec873",8441:"b9afe2a8",8464:"e39666b6",8634:"fbd5181d",8734:"981a04d0",9045:"ab123836",9094:"d929016d",9147:"7ea5518d",9260:"78c33b59",9282:"fa7d1dcf",9412:"2fd6e700",9514:"1be78505",9546:"0cfca6dd",9918:"796155b4",9924:"df0688a0"}[e]||e)+"."+{18:"706beead",53:"0493aeb6",120:"a0cedcc4",182:"21f3940b",261:"0b7d063c",490:"3e93ba7f",637:"9eb2101b",639:"a419a80e",828:"d69291f6",1098:"0a811e8b",1149:"2b8429af",1426:"a1095f54",1594:"181cc8ac",1649:"ed1b12a1",1781:"66536698",1933:"83924e11",2e3:"d636eb5b",2008:"3dbacca7",2240:"89ee4b6a",2242:"8576fef7",2248:"97cd7b57",2355:"94b44373",2465:"f6749755",2478:"0761930a",2629:"556bc567",2722:"2b80f964",2798:"8f101f3f",2885:"52857351",2919:"b16f0297",2953:"896cf97e",3042:"139782eb",3049:"87d82fc5",3116:"1aeeddd3",3120:"5195b8fe",3204:"5aec52dd",3418:"c9accc2a",3531:"ed30e80a",3779:"e9c2ff25",3877:"cd817889",4020:"b84485df",4184:"5d9ad9a8",4195:"de01a74e",4202:"9eb03ff8",4223:"330c4a89",4228:"f055bc2e",4246:"0d1a52f1",4356:"1f9d4608",4395:"6ca05d92",4668:"84f7d699",4972:"e3352a90",5003:"530a569f",5289:"c3f7a771",5485:"8e0f51d8",5494:"ca248f49",5668:"925e85b6",5875:"c68c3d6a",5877:"3357fe85",5891:"91d68aab",5899:"e2f25827",6069:"083ad7f9",6223:"c0b33140",6683:"e83dcb93",6896:"ce0d0924",6945:"8e8e2060",6979:"cb7b46fd",7056:"415d3e1e",7168:"2e020f1f",7241:"8e621dbc",7397:"d59ba66c",7437:"03dd6b14",7468:"4b73ea0f",7474:"91eea02b",7654:"b57e96ed",7754:"7e4e091b",7768:"6e5466e0",7836:"afacbfc0",7902:"0b9fb7f0",7918:"c626c9b1",7920:"a2840e56",7970:"8e01f9bc",8149:"04b240d6",8303:"011fd334",8325:"87cbe9cc",8334:"5b710f5a",8441:"b600d03c",8464:"c02464eb",8634:"bd3c22ad",8734:"67b11af1",8894:"46125374",9045:"718764bc",9094:"fe671854",9147:"274a63f0",9260:"29d60250",9282:"86ba84fb",9412:"67b92b58",9514:"ecda2eef",9546:"ac779815",9918:"6258c5fa",9924:"b6c06d25"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},c="website:",r.l=(e,a,f,b)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var c=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"7918",47058687:"261",95881879:"7168",f17f53dd:"18","935f2afb":"53",bc7c935a:"182","5812764a":"490","87712f4e":"639","394b1633":"828",f80390e0:"1098","7cd620da":"1149","53a90a4e":"1594",b0d8ca7b:"1781","70adbe13":"1933",cf7ccda1:"2000","08c9246a":"2008",ff031c7d:"2240",ef02564c:"2242","2e0dce54":"2248","3c83ca7d":"2355","3c0c6a7f":"2465","62f3de64":"2478",dbc3e690:"2629","4a70a78f":"2722","8a751f9f":"2885","0c5b3199":"2919","5efdef18":"2953","1e0b4360":"3042","707d70df":"3049","2b486e95":"3116","91b8d63b":"3120",ab90bf36:"3204","960803bf":"3418",ad7a1ef6:"3531",ab8b4d1f:"3779",a40ae8f2:"3877",fe82bda8:"4020",b467856c:"4184",c4f5d8e4:"4195","71f93b87":"4202",cf9b7507:"4223","71a4181b":"4228",cab71165:"4246","60e67547":"4356","2609d35c":"4395","22f048b3":"4668","8e6cc846":"5003",a188041f:"5289","91c39c3c":"5485",a19404f3:"5494",ec3987b3:"5668","14c42b22":"5875","945fd7ad":"5877","50b9661c":"5891",f4a41cc5:"5899","08854dbd":"6069","83d494d4":"6223","43744cfd":"6683","15033d09":"6896","3d7ef9b9":"6979",c03611c9:"7056","288adf4d":"7241","09bef922":"7397","3f2a55e2":"7437",c214479d:"7468","2e8e5295":"7474",e0aabcf0:"7654","38776a5e":"7754","7cb2479d":"7768",b8a67d89:"7836","0a24f6e4":"7902","1a4e3797":"7920","943f163d":"8149",a59ec873:"8303",b9afe2a8:"8441",e39666b6:"8464",fbd5181d:"8634","981a04d0":"8734",ab123836:"9045",d929016d:"9094","7ea5518d":"9147","78c33b59":"9260",fa7d1dcf:"9282","2fd6e700":"9412","1be78505":"9514","0cfca6dd":"9546","796155b4":"9918",df0688a0:"9924"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(a,f)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>d=e[a]=[f,c]));f.push(d[2]=c);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var c=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+c+": "+b+")",t.name="ChunkLoadError",t.type=c,t.request=b,d[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var d,c,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(f);n{"use strict";var e,a,f,d,c,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=b,r.c=t,e=[],r.O=(a,f,d,c)=>{if(!f){var b=1/0;for(i=0;i=c)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,d,c]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var c=Object.create(null);r.r(c);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(c,b),c},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({18:"f17f53dd",53:"935f2afb",182:"bc7c935a",261:"47058687",490:"5812764a",639:"87712f4e",828:"394b1633",1098:"f80390e0",1149:"7cd620da",1594:"53a90a4e",1781:"b0d8ca7b",1933:"70adbe13",2e3:"cf7ccda1",2008:"08c9246a",2240:"ff031c7d",2242:"ef02564c",2248:"2e0dce54",2355:"3c83ca7d",2465:"3c0c6a7f",2478:"62f3de64",2629:"dbc3e690",2722:"4a70a78f",2885:"8a751f9f",2919:"0c5b3199",2953:"5efdef18",3042:"1e0b4360",3049:"707d70df",3116:"2b486e95",3120:"91b8d63b",3204:"ab90bf36",3418:"960803bf",3531:"ad7a1ef6",3779:"ab8b4d1f",3877:"a40ae8f2",4020:"fe82bda8",4184:"b467856c",4195:"c4f5d8e4",4202:"71f93b87",4223:"cf9b7507",4228:"71a4181b",4246:"cab71165",4356:"60e67547",4395:"2609d35c",4668:"22f048b3",5003:"8e6cc846",5289:"a188041f",5485:"91c39c3c",5494:"a19404f3",5668:"ec3987b3",5875:"14c42b22",5877:"945fd7ad",5891:"50b9661c",5899:"f4a41cc5",6069:"08854dbd",6223:"83d494d4",6683:"43744cfd",6896:"15033d09",6979:"3d7ef9b9",7056:"c03611c9",7168:"95881879",7241:"288adf4d",7397:"09bef922",7437:"3f2a55e2",7468:"c214479d",7474:"2e8e5295",7654:"e0aabcf0",7754:"38776a5e",7768:"7cb2479d",7836:"b8a67d89",7902:"0a24f6e4",7918:"17896441",7920:"1a4e3797",8149:"943f163d",8303:"a59ec873",8441:"b9afe2a8",8464:"e39666b6",8634:"fbd5181d",8734:"981a04d0",9045:"ab123836",9094:"d929016d",9147:"7ea5518d",9260:"78c33b59",9282:"fa7d1dcf",9412:"2fd6e700",9514:"1be78505",9546:"0cfca6dd",9918:"796155b4",9924:"df0688a0"}[e]||e)+"."+{18:"706beead",53:"0493aeb6",120:"a0cedcc4",182:"21f3940b",261:"0b7d063c",490:"3e93ba7f",637:"9eb2101b",639:"a419a80e",828:"d69291f6",1098:"0a811e8b",1149:"2b8429af",1426:"a1095f54",1594:"181cc8ac",1649:"ed1b12a1",1781:"66536698",1933:"83924e11",2e3:"d636eb5b",2008:"3dbacca7",2240:"89ee4b6a",2242:"8576fef7",2248:"97cd7b57",2355:"94b44373",2465:"f6749755",2478:"0761930a",2629:"556bc567",2722:"2b80f964",2798:"8f101f3f",2885:"52857351",2919:"b16f0297",2953:"896cf97e",3042:"139782eb",3049:"87d82fc5",3116:"1aeeddd3",3120:"5195b8fe",3204:"5aec52dd",3418:"c9accc2a",3531:"ed30e80a",3779:"e9c2ff25",3877:"cd817889",4020:"b84485df",4184:"5d9ad9a8",4195:"de01a74e",4202:"9eb03ff8",4223:"330c4a89",4228:"f055bc2e",4246:"0d1a52f1",4356:"1f9d4608",4395:"6ca05d92",4668:"84f7d699",4972:"e3352a90",5003:"530a569f",5289:"c3f7a771",5485:"8e0f51d8",5494:"ca248f49",5668:"925e85b6",5875:"c68c3d6a",5877:"3357fe85",5891:"91d68aab",5899:"e2f25827",6069:"083ad7f9",6223:"c0b33140",6683:"e83dcb93",6896:"ce0d0924",6945:"8e8e2060",6979:"cb7b46fd",7056:"415d3e1e",7168:"2e020f1f",7241:"8e621dbc",7397:"d59ba66c",7437:"03dd6b14",7468:"b77cd199",7474:"91eea02b",7654:"b57e96ed",7754:"7e4e091b",7768:"6e5466e0",7836:"afacbfc0",7902:"0b9fb7f0",7918:"c626c9b1",7920:"a2840e56",7970:"8e01f9bc",8149:"04b240d6",8303:"011fd334",8325:"87cbe9cc",8334:"5b710f5a",8441:"b600d03c",8464:"c02464eb",8634:"bd3c22ad",8734:"67b11af1",8894:"46125374",9045:"718764bc",9094:"fe671854",9147:"274a63f0",9260:"29d60250",9282:"86ba84fb",9412:"67b92b58",9514:"ecda2eef",9546:"ac779815",9918:"6258c5fa",9924:"b6c06d25"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},c="website:",r.l=(e,a,f,b)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var c=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={17896441:"7918",47058687:"261",95881879:"7168",f17f53dd:"18","935f2afb":"53",bc7c935a:"182","5812764a":"490","87712f4e":"639","394b1633":"828",f80390e0:"1098","7cd620da":"1149","53a90a4e":"1594",b0d8ca7b:"1781","70adbe13":"1933",cf7ccda1:"2000","08c9246a":"2008",ff031c7d:"2240",ef02564c:"2242","2e0dce54":"2248","3c83ca7d":"2355","3c0c6a7f":"2465","62f3de64":"2478",dbc3e690:"2629","4a70a78f":"2722","8a751f9f":"2885","0c5b3199":"2919","5efdef18":"2953","1e0b4360":"3042","707d70df":"3049","2b486e95":"3116","91b8d63b":"3120",ab90bf36:"3204","960803bf":"3418",ad7a1ef6:"3531",ab8b4d1f:"3779",a40ae8f2:"3877",fe82bda8:"4020",b467856c:"4184",c4f5d8e4:"4195","71f93b87":"4202",cf9b7507:"4223","71a4181b":"4228",cab71165:"4246","60e67547":"4356","2609d35c":"4395","22f048b3":"4668","8e6cc846":"5003",a188041f:"5289","91c39c3c":"5485",a19404f3:"5494",ec3987b3:"5668","14c42b22":"5875","945fd7ad":"5877","50b9661c":"5891",f4a41cc5:"5899","08854dbd":"6069","83d494d4":"6223","43744cfd":"6683","15033d09":"6896","3d7ef9b9":"6979",c03611c9:"7056","288adf4d":"7241","09bef922":"7397","3f2a55e2":"7437",c214479d:"7468","2e8e5295":"7474",e0aabcf0:"7654","38776a5e":"7754","7cb2479d":"7768",b8a67d89:"7836","0a24f6e4":"7902","1a4e3797":"7920","943f163d":"8149",a59ec873:"8303",b9afe2a8:"8441",e39666b6:"8464",fbd5181d:"8634","981a04d0":"8734",ab123836:"9045",d929016d:"9094","7ea5518d":"9147","78c33b59":"9260",fa7d1dcf:"9282","2fd6e700":"9412","1be78505":"9514","0cfca6dd":"9546","796155b4":"9918",df0688a0:"9924"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(a,f)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>d=e[a]=[f,c]));f.push(d[2]=c);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var c=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+c+": "+b+")",t.name="ChunkLoadError",t.type=c,t.request=b,d[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var d,c,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(f);n - + @@ -63,7 +63,7 @@ }

Object containing functions that are used to notify the Deep Chat component about the status of the current request. The stopClicked and newUserMessage functions are triggered by Deep Chat itself and contain listener properties which can be assigned with custom functions to listen for when they are called (see the examples above).

- + \ No newline at end of file diff --git a/docs/demo/index.html b/docs/demo/index.html index 1242ca573..62ea5258e 100644 --- a/docs/demo/index.html +++ b/docs/demo/index.html @@ -13,7 +13,7 @@ - + @@ -27,7 +27,7 @@ displayFileAttachmentContainer is used to display the element that encapsulates all of the files to be sent on the next message.
displayErrors is used to display error messages; for the component via default, an API error via service and a speech to text issue via speechToText. This is mainly used to showcase the override capabilities in errorMessages.

Base Example​

<deep-chat demo="true"></deep-chat>

Custom Response Example​

chatElementRef.demo = {
  response: (message) => {
    const options = ['rock', 'paper', 'scissors'];
    const userOption = message.text?.toLocaleLowerCase();
    const aiOption = options[Math.floor(Math.random() * 3)];
    let response = `I guessed ${aiOption}. `;
    if (userOption === aiOption) response += 'Draw';
    else if (userOption === 'rock') response += aiOption === 'paper' ? 'I win!' : 'You win!';
    else if (userOption === 'paper') response += aiOption === 'scissors' ? 'I win!' : 'You win!';
    else if (userOption === 'scissors') response += aiOption === 'rock' ? 'I win!' : 'You win!';
    else response = 'Guess either Rock, Paper or Scissors';
    return {text: response};
  },
};

Elements Example​

<deep-chat
  demo='{
    "displayLoadingBubble": true,
    "displayFileAttachmentContainer": true,
    "displayErrors": {"service": true}
  }'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/directConnection/AssemblyAI/index.html b/docs/directConnection/AssemblyAI/index.html index 683dbeabe..6ba5cdb5d 100644 --- a/docs/directConnection/AssemblyAI/index.html +++ b/docs/directConnection/AssemblyAI/index.html @@ -13,13 +13,13 @@ - +

AssemblyAI

AssemblyAI

Properties used to connect to AssemblyAI.

assemblyAI​

  • Type: true | {audio?: true}
  • Default: {audio: true}

Connect to Assembly AI's speech recognition API to transcribe your audio.

Example​

<deep-chat
  directConnection='{
    "assemblyAI": {
      "key": "placeholder key",
      "audio": true
    }
  }'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/directConnection/Azure/index.html b/docs/directConnection/Azure/index.html index 6bb3b6a31..d4101b507 100644 --- a/docs/directConnection/Azure/index.html +++ b/docs/directConnection/Azure/index.html @@ -13,7 +13,7 @@ - + @@ -37,7 +37,7 @@ language is a BCP 47 language tag for the language of your text.

Example​

caution

Cannot input a test key as user's language service endpoint is required.

<deep-chat
  directConnection='{
    "azure": {
      "key": "placeholder key",
      "summarization": {"endpoint": "https://placeholderresource.cognitiveservices.azure.com"}
    }
  }'
></deep-chat>

Translation​

  • Type: {region?: string, language?: string}
  • Default: {language: "es"}

Connect to Azure's translation API.
region is the region of your translator resource. This is optional if your resource is global.
language is the BCP 47 language tag for the language you are translating to from English.

Example​

<deep-chat
  directConnection='{
    "azure": {
      "key": "placeholder key",
      "translation": {"region": "eastus", "language": "ja"}
    }
  }'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/directConnection/Cohere/index.html b/docs/directConnection/Cohere/index.html index dc75b83f7..e8f53a4e3 100644 --- a/docs/directConnection/Cohere/index.html +++ b/docs/directConnection/Cohere/index.html @@ -13,7 +13,7 @@ - + @@ -60,7 +60,7 @@ extractiveness controls how close to the original text the summary is. "high" extractiveness summaries will lean towards reusing sentences verbatim, while "low" extractiveness summaries will tend to paraphrase more.
temperature (from 0 to 5) controls the randomness of the output. Lower values tend to generate more predictable outputs, while higher values tend to generate more creative outputs. The sweet spot is typically between 0 and 1.
additional_command is a free-form instruction for modifying how the summaries get generated. Should start with "Generate a summary _". and end with Eg. "focusing on the next steps" or "written by Yoda".

Example​

<deep-chat
  directConnection='{
    "cohere": {
      "key": "placeholder key",
      "summarization": {"model": "summarize-xlarge"}
    }
  }'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/directConnection/HuggingFace/index.html b/docs/directConnection/HuggingFace/index.html index d8ace061a..69b5b8cd7 100644 --- a/docs/directConnection/HuggingFace/index.html +++ b/docs/directConnection/HuggingFace/index.html @@ -13,7 +13,7 @@ - + @@ -98,7 +98,7 @@ model is the name of the model used for the task.

Example​

<deep-chat
  directConnection='{
    "huggingFace": {
      "key": "placeholder key",
      "huggingFace": {"model": "facebook/wav2vec2-large-960h-lv60-self"}
    }
  }'
></deep-chat>

AudioClassification​

  • Type: true | {model?: string}
  • Default: {model: "ehcalabres/wav2vec2-lg-xlsr-en-speech-emotion-recognition"}

Connect to Hugging Face Audio Classification API.
model is the name of the model used for the task.

Example​

<deep-chat
  directConnection='{
    "huggingFace": {
      "key": "placeholder key",
      "audioSpeechRecognition": {"model": "ehcalabres/wav2vec2-lg-xlsr-en-speech-emotion-recognition"}
    }
  }'
></deep-chat>

ImageClassification​

  • Type: true | {model?: string}
  • Default: {model: "google/vit-base-patch16-224"}

Connect to Hugging Face Image Classification API.
model is the name of the model used for the task.

Example​

<deep-chat
  directConnection='{
    "huggingFace": {
      "key": "placeholder key",
      "imageClassification": {"model": "google/vit-base-patch16-224"}
    }
  }'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/directConnection/OpenAI/index.html b/docs/directConnection/OpenAI/index.html index 2e92b789e..f1c7eb840 100644 --- a/docs/directConnection/OpenAI/index.html +++ b/docs/directConnection/OpenAI/index.html @@ -13,7 +13,7 @@ - + @@ -70,7 +70,7 @@ which will feed it back into the assistant to finalise a response.

Try it out live in the Deep Chat Playground.

// using JavaScript for a simplified example

chatElementRef.directConnection = {
  openAI: {
    assistant: {
      assistant_id: 'placeholder-id',
      function_handler: (functionsDetails) => {
        return functionsDetails.map((functionDetails) => this.getCurrentWeather(functionDetails.arguments));
      },
    },
    key: 'placeholder-key',
  },
};

Shared Types​

Types used in Functions properties:

FunctionsDetails​

  • Type: {name: string, arguments: string}[]

Array of objects containing information about the functions that the model wants to call.
name is the name of the target function.
arguments is a stringified JSON containing properties based on the parameters defined for the function.

- + \ No newline at end of file diff --git a/docs/directConnection/StabilityAI/index.html b/docs/directConnection/StabilityAI/index.html index fe68c72b5..bff343b27 100644 --- a/docs/directConnection/StabilityAI/index.html +++ b/docs/directConnection/StabilityAI/index.html @@ -13,7 +13,7 @@ - + @@ -78,7 +78,7 @@ steps is the number of diffusion steps to run (10 to 150).
style_preset guides the image model towards a particular style.
clip_guidance_preset is the clip guidance preset.

Example​

<deep-chat
  directConnection='{
    "stabilityAI": {
      "key": "placeholder key",
      "textToImage": {
        "engine_id": "stable-diffusion-v1-5",
        "weight": 1,
        "style_preset": "fantasy-art",
        "samples": 2
  }}}'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/directConnection/index.html b/docs/directConnection/index.html index 23a817ae6..fefdb2daf 100644 --- a/docs/directConnection/index.html +++ b/docs/directConnection/index.html @@ -13,7 +13,7 @@ - + @@ -28,7 +28,7 @@ is loaded up during the validation period.

caution

This object is intended to be used for prototyping purposes ONLY and should not be deployed to an environment as it can be accessed in the browser. Before going live, use the request property in combination with your own service to safely use your key there. Read more about this in Connect and check examples.

Key Example​

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "chat": {"system_prompt": "Assist me with anything you can"}
    }
  }'
></deep-chat>

Validation Example​

<deep-chat
  directConnection='{
    "openAI": {
      "key": "placeholder key",
      "validateKeyProperty": true,
      "chat": {"system_prompt": "Assist me with anything you can"}
    }
  }'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/events/index.html b/docs/events/index.html index 1db3896ae..15bd375f0 100644 --- a/docs/events/index.html +++ b/docs/events/index.html @@ -13,7 +13,7 @@ - + @@ -21,7 +21,7 @@

Events

Events can be observed in two ways, either by assigning a function to a property or by listening to custom events fired from the component element.

onNewMessage​

Triggered when a message is sent from the user and recieved from the target service.
message encompasses all of the message contents.
isInitial is used to determine whether if the message is from the prepopulated initialMessages property.

Example​

Latest events:
> 
chatElementRef.onNewMessage = (message) => { console.log(message); };

onClearMessages​

  • Function: () => void
  • Event: clear-messages

Triggered when the clearMessages method has been executed. The core purpose of this is to help track messages state.

Example​

Latest events:
> 
chatElementRef.onClearMessages = () => { console.log("Messages cleared"); };

onComponentRender​

  • Function: () => void
  • Event: render

Triggered when the component has finished rendering on the browser's window.

Example​

Latest events:
> "Finished rendering"
chatElementRef.onComponentRender = () => { console.log("Finished rendering"); };
- + \ No newline at end of file diff --git a/docs/files/index.html b/docs/files/index.html index 5cfb128e8..8c530d9f9 100644 --- a/docs/files/index.html +++ b/docs/files/index.html @@ -13,7 +13,7 @@ - + @@ -82,7 +82,7 @@ It uses the same syntax as the accept attributes in input elements. If the configuration in audio also uses the acceptedFormats property, it will override this one.

<deep-chat
  microphone='{
    "files": {
      "format": "mp3",
      "maxDurationSeconds": 10,
      "maxNumberOfFiles": 2,
      "acceptedFormats": ".mp3,.wav"
    }
  }'
></deep-chat>
info

The use of this object will automatically disable the speechToText functionality.

AudioFormat​

  • Type: "mp3" | "4a" | "webm" | "mp4" | "mpga" | "wav" | "mpeg" | "m4a"

Allowed audio file formats.

- + \ No newline at end of file diff --git a/docs/installation/index.html b/docs/installation/index.html index 6a0f13f9c..28d76784e 100644 --- a/docs/installation/index.html +++ b/docs/installation/index.html @@ -13,13 +13,13 @@ - +

Installation

Install the component via npm:

npm install deep-chat

For React, install the following instead: 

npm install deep-chat-react

Access the component via CDN:

https://unpkg.com/deep-chat@1.4.1/dist/deepChat.bundle.js
- + \ No newline at end of file diff --git a/docs/interceptors/index.html b/docs/interceptors/index.html index c554d3885..d41e191e2 100644 --- a/docs/interceptors/index.html +++ b/docs/interceptors/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ headers is the outgoing requests's header contents.

responseInterceptor​

  • Type: (response: any) => determined

Triggered when a message has been received from the target service. The types for the return argument is determined by the connection variety used:

  • If you are connecting to a server via the request property - the type will be Response.
  • If you are connecting via the directConnection property - the type will be defined by the chosen service API.

This property is not enabled for server-sent stream responses.

Example​

Console:
> 
chatElementRef.responseInterceptor = (response) => {
  console.log(response); // printed above
  return response;
};

validateInput​

  • Type: (text?: string, files?: File[]) => boolean

Triggered when the user changes input text or files that are going to be sent to the target service.
The method must return a boolean value with either true or false for whether the input contents are valid.

Example​

chatElementRef.validateInput = (text, files) => {
  return text || files.length > 0;
};
- + \ No newline at end of file diff --git a/docs/introPanel/index.html b/docs/introPanel/index.html index e7e640f6e..82f00a5ab 100644 --- a/docs/introPanel/index.html +++ b/docs/introPanel/index.html @@ -13,7 +13,7 @@ - + @@ -24,7 +24,7 @@ to the CSS classes and JavaScript in your app. To get around this, we recommend using the htmlClassUtilities property which will allow you to define reusable styling and bind functions to your app's state.

Example​

// Markup

<deep-chat id="chat-element">
  <div style="display: none">
    <div class="custom-button">
      <div class="custom-button-text">"Explain quantum computing"</div>
    </div>
    <div class="custom-button" style="margin-top: 15px">
      <div class="custom-button-text">"Creative ideas for a birthday"</div>
    </div>
    <div class="custom-button" style="margin-top: 15px">
      <div class="custom-button-text">"Hello World in JavaScript"</div>
    </div>
  </div>
</deep-chat>

// using JavaScript for a simplified example

const chatElementRef = document.getElementById('chat-element');

chatElementRef.htmlClassUtilities = {
  ['custom-button']: {
    events: {
      click: (event) => {
        const text = event.target.children[0].innerText;
        chatElementRef.submitUserMessage(text.substring(1, text.length - 1));
      },
    },
    styles: {
      default: {backgroundColor: '#f2f2f2', borderRadius: '10px', padding: '10px', cursor: 'pointer', textAlign: 'center'},
      hover: {backgroundColor: '#ebebeb'},
      click: {backgroundColor: '#e4e4e4'},
    },
  },
  ['custom-button-text']: {styles: {default: {pointerEvents: 'none'}}},
};

introPanelStyle​

Controls the intro panel's parent-most element's style. This is most useful for changing the base styling of the automatically generated intro panels when using services in the directConnection property.

Example​

<deep-chat
  introPanelStyle='{"backgroundColor": "#fffeec"}'
  directConnection='{"openAI": {"audio": true, "key": "placeholder-key"}}'
></deep-chat>
tip

To remove an automatically generated panel - add empty div tags: <deep-chat><div></div></deep-chat> .

- + \ No newline at end of file diff --git a/docs/introduction/index.html b/docs/introduction/index.html index 835bc435b..11e2d3abf 100644 --- a/docs/introduction/index.html +++ b/docs/introduction/index.html @@ -13,7 +13,7 @@ - + @@ -24,7 +24,7 @@ the component you need.

Developer experience is paramount to this component's success! This is why Deep Chat is shipped in a cross-framework plug-and-play package to allow you to get started in just a few seconds no matter what platform you use! Additionally, we carefully monitor all of your feedback to help us optimise your and your users' chat experience as well as use it as a base point for helping us decide what future improvements the component will need.

Open source​

Open source is at the heart of what we do. Deep Chat is built by the community - for the community. All contributions to this project are welcome!

If you have any suggestions for enhancements, ideas on how to take the project further or have discovered a bug, do not hesitate to create a new issue ticket and we will look into it as soon as possible!

- + \ No newline at end of file diff --git a/docs/messages/HTML/index.html b/docs/messages/HTML/index.html index 3f47450dd..0920db08e 100644 --- a/docs/messages/HTML/index.html +++ b/docs/messages/HTML/index.html @@ -13,7 +13,7 @@ - + @@ -40,7 +40,7 @@ deep-chat. To note, this approach may require you to first import or use them in your app's code in order for your bundler to register them.

Example​

// This is a simple way to create web components via JavaScript, refer to all possibilities above

// JavaScript
class CustomElement extends HTMLElement {
  constructor() {
    super();
    this.textContent = 'This is a Custom Element';
  }
}

customElements.define('custom-element', CustomElement);

// HTML
<deep-chat initialMessages='[{"html": "<custom-element/>", "role": "user"}]'></deep-chat>
info

When passing values into your custom element, you need to pass them as attributes (they must be stringified). E.g. {"html": "<custom-element count="0" name="jeff"></custom-element>"}

info

If you are experiencing problems with embedding your custom elements inside the chat, you can always raise an issue on GitHub. When you do please provide us with either a sandbox example or sufficient information to enable us to replicate the problem.

Examples​

Suggestion buttons

Basic suggestion buttons using Deep Chat Classes.

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `
      <div class="deep-chat-temporary-message">
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 5px">What do shrimps eat?</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">Can a shrimp fry rice?</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">What is a pistol shrimp?</button>
      </div>`,
    role: 'ai',
  },
];

chatElementRef.messageStyles = {html: {shared: {bubble: {backgroundColor: 'unset', padding: '0px'}}}};

Controlled responses

Preset user responses which can be used to give feedback, follow a conversation path or control a service.

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `
      <div class="deep-chat-temporary-message">
        <button class="deep-chat-button deep-chat-suggestion-button" style="border: 1px solid green">Yes</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="border: 1px solid #d80000">No</button>
      </div>`,
    role: 'user',
  },
];

chatElementRef.messageStyles = {
  html: {shared: {bubble: {backgroundColor: 'unset', padding: '0px', width: '100%', textAlign: 'right'}}},
};

Feedback

Add feedback buttons to response messages.

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `<div class="feedback">
        <div class="feedback-text">The powerhouse of a cell.</div>
        <img class="feedback-icon feedback-icon-positive" src="path-to-svg.svg">
        <img class="feedback-icon feedback-icon-negative" src="path-to-svg.svg">
      </div>`,
    role: 'ai',
  },
  {
    html: `<div class="feedback">
      <div class="feedback-text">A labrador.</div>
      <img class="feedback-icon feedback-icon-positive" src="path-to-svg.svg">
      <img class="feedback-icon feedback-icon-negative" src="path-to-svg.svg">
    </div>`,
    role: 'ai',
  },
];

chatElementRef.messageStyles = {
  default: {shared: {bubble: {maxWidth: '95%', width: '100%', marginTop: '10px'}}},
};

chatElementRef.htmlClassUtilities = {
  feedback: {styles: {default: {display: 'flex'}}},
  'feedback-text': {styles: {default: {width: 'calc(100% - 42px)', paddingTop: '2px'}}},
  'feedback-icon': {
    styles: {
      default: {width: '20px', height: '20px', cursor: 'pointer', borderRadius: '5px'},
      hover: {backgroundColor: '#d1d1d1'},
    },
  },
  'feedback-icon-positive': {events: {click: () => console.log('positive response')}},
  'feedback-icon-negative': {
    events: {click: () => console.log('negative response')},
    styles: {default: {transform: 'rotate(180deg)', marginLeft: '3px'}},
  },
};

Custom Element - Chart

Add a chart component (e.g. using Google Chart). Live example for React.

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `
      <div>
        <div style="margin-bottom: 10px">Here is an example chart:</div>
        <google-chart
          style="width: 220px; height: 200px"
          data='[["Planet", "Score"], ["Earth", 50], ["Moon", 100], ["Saturn", 80]]'
          options='{"legend": "none"}'>
        </google-chart>
      </div>
      `,
    role: 'ai',
  },
];

Custom Element - Table

Add an interactive table component (e.g. using Active Table).

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `
      <div>
        <div style="margin-bottom: 10px">Here is a simple example:</div>
        <active-table
          content='[["Planet", "Mass"], ["Earth", 5.97], ["Mars", 0.642], ["Jupiter", 1898]]'
          cellStyle='{"width": "80px"}'
          displayAddNewRow="false"
          displayAddNewColumn="false">
        </active-table>
      </div>`,
    role: 'ai',
  },
];
- + \ No newline at end of file diff --git a/docs/messages/index.html b/docs/messages/index.html index 0083737d6..4cc8dd102 100644 --- a/docs/messages/index.html +++ b/docs/messages/index.html @@ -13,7 +13,7 @@ - + @@ -21,7 +21,8 @@

Messages

Properties related to messages.

initialMessages​

Messages that are pre-populated when the chat loads up. This is useful for displaying previous messages.

Example​

<deep-chat
  initialMessages='[
    {"text": "Show me a modern city", "role": "user"},
    {"files": [{"src": "path-to-file.jpeg", "type": "image"}], "role": "ai"},
    {"text": "Whats on your mind?", "role": "user"},
    {"text": "Peace and tranquility", "role": "ai"}
  ]'
></deep-chat>

introMessage​

  • Type: {text?: string, html?: string}

Initial ai message that is displayed when the chat is loaded. It is different to initialMessages as it will not trigger the onNewMessage listener, will not be part of the returned messages when the getMessages method is called and is not taken into consideration when calculating requestBodyLimits.
-html is used to render custom code - more info.

Example​

<deep-chat introMessage='{"text": "Hi I am your assistant, ask me anything!"}'></deep-chat>

avatars​

Add avatars beside messages. You can enable this by setting the value to true +html is used to render custom code and can be coupled with a deep-chat-temporary-message +class to make this message disappear after a new one is added.

Example​

<deep-chat introMessage='{"text": "Hi I am your assistant, ask me anything!"}'></deep-chat>

avatars​

Add avatars beside messages. You can enable this by setting the value to true or by defining an object with Avatar properties. The default property is applied to both roles.

Example​

<deep-chat avatars="true"></deep-chat>

Avatar​

This object is used to configure avatars that are displayed beside messages.
src is the path to an avatar image file.
@@ -51,7 +52,7 @@ however you can help it by setting the type.

Example​

<deep-chat
  initialMessages='[
    {"role": "user", "files": [
        {"src": "path-to-file.jpeg", "type": "image"},
        {"src": "data:image/gif;base64,R0lGODlh4A...", "type": "image"},
        {"src": "path-to-file.wav", "type": "audio"},
        {"name": "placeholder.exe"},
        {"src": "path-to-file", "name": "hello-world.txt", "type": "file"}
  ]}]'
></deep-chat>
info

Files with "image" or "any" types that contain a src property as a url will have their bubble set as a hyperlink.

MessageFileType​

  • Type: "image" | "audio" | "any"

Type of a file stored inside a message. "any" is the default type.

Code messages​

By default, messages containing code will be rendered with white text in a dark background. In order to highlight the code, you will need to add an external module called highligtjs. Check out external module EXAMPLES to find multiple ways of how you can add it to your project.

Example​

<deep-chat
  initialMessages='[
    {
      "text": "```java\nwhile (i < 5) {\n console.log(\"hi\");\n i+= 1;\n}\n```",
      "role": "ai"
    }
  ]'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/messages/styles/index.html b/docs/messages/styles/index.html index c433b959a..235059d90 100644 --- a/docs/messages/styles/index.html +++ b/docs/messages/styles/index.html @@ -13,7 +13,7 @@ - + @@ -38,7 +38,7 @@ bubble is the element that displays the actual message contents.
media is applied to image, audio and file type messages which contain an extra child element inside the bubble to display the file contents. 

<deep-chat
  messageStyles='{
    "default": {
      "shared": {
        "outerContainer": {"backgroundColor": "orange"},
        "innerContainer": {"backgroundColor": "yellow"},
        "bubble": {"color": "black"}
      },
      "ai": {"bubble": {"backgroundColor": "lightgreen"}},
      "user": {"bubble": {"backgroundColor": "lightblue"}}
    }
  }'
></deep-chat>

More Examples​

Files

<deep-chat
  messageStyles='{
    "image": {
      "shared": {
        "media": {"borderRadius": "0px"}
      }
    },
    "audio": {
      "shared": {
        "media": {"borderRadius": "30px", "border": "1px solid #8c8c8c", "backgroundColor": "red"}
      }
    },
    "file": {
      "shared": {
        "bubble": {"backgroundColor": "grey"}
      }
    }
  }'
></deep-chat>
info

The "audio" media player is controlled by the browser and and its styling may not be overwritable by the media property.

tip

In the Safari browser, the "audio" media player can be expanded by setting the width property in media to 200px or higher.

Intro message

<deep-chat
  messageStyles='{
    "intro": {"bubble": {"backgroundColor": "#475cc7", "color": "white", "fontSize": "16px"}}
  }'
></deep-chat>

Loading bubble

<deep-chat
  messageStyles='{
    "loading": {
      "bubble": {"backgroundColor": "#3793ff", "fontSize": "20px", "color": "white"}
    }
  }'
></deep-chat>

Error messages

<deep-chat
  messageStyles='{
    "error": {
      "bubble": {"backgroundColor": "#f98e00", "color": "white", "fontSize": "15px"}
    }
  }'
></deep-chat>
- + \ No newline at end of file diff --git a/docs/methods/index.html b/docs/methods/index.html index 375ae5acb..056066802 100644 --- a/docs/methods/index.html +++ b/docs/methods/index.html @@ -13,7 +13,7 @@ - + @@ -24,7 +24,7 @@ To reset back to automatic behaviour - call this method again with a boolean false argument.

Example​

chatElementRef.disableSubmitButton();

refreshMessages​

  • Type: () => void

If your messages contain Code and you are using the higlight.js module to highlight them (as per external module guidelines), sometimes the module may load after the messages have been rendered, leaving the code without a highlight. In such instances, you can use this method to highlight the code with the loaded module.

Example​

chatElementRef.refreshMessages();
- + \ No newline at end of file diff --git a/docs/speech/index.html b/docs/speech/index.html index 9998eb0d4..b870ec2de 100644 --- a/docs/speech/index.html +++ b/docs/speech/index.html @@ -13,7 +13,7 @@ - + @@ -82,7 +82,7 @@ It contains the same properties as the MicrophoneStyles object and an additional commandMode property which sets the button styling when the command mode is activated.

Example​

<deep-chat
  speechToText='{
    "button": {
      "commandMode": {
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(70%) sepia(70%) saturate(4438%) hue-rotate(170deg) brightness(92%) contrast(98%)"
      }}}},
      "active": {
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(7495%) hue-rotate(0deg) brightness(101%) contrast(107%))"
      }}}},
      "default": {
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(77%) sepia(9%) saturate(7093%) hue-rotate(32deg) brightness(99%) contrast(83%)"
    }}}}},
    "commands": {
      "removeAllText": "remove text",
      "commandMode": "command"
    }
  }'
></deep-chat>
tip

You can use the CSSFilterConverter tool to generate filter values for the icon color.

Demo​

This is the example used in the demo video. When replicating - make sure to add the Speech SDK to your project and add your resource properties.

<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->

<div style="display: flex">
  <deep-chat
    speechToText='{
      "azure": {
        "subscriptionKey": "resource-key",
        "region": "resource-region"
      },
      "commands": {
        "stop": "stop",
        "pause": "pause",
        "resume": "resume",
        "removeAllText": "remove text",
        "submit": "submit",
        "commandMode": "command"
    }}'
    errorMessages='{
      "overrides": {"speechToText": "Azure Speech To Text can not be used in this website as you need to set your credentials."}
    }'
    style="margin-right: 30px"
    demo="true"
  ></deep-chat>
  <deep-chat
    speechToText='{
      "commands": {
        "azure": {
          "subscriptionKey": "resource-key",
          "region": "resource-region"
        },
        "stop": "stop",
        "pause": "pause",
        "resume": "resume",
        "removeAllText": "remove text",
        "submit": "submit",
        "commandMode": "command"
    }}'
    errorMessages='{
      "overrides": {"speechToText": "Azure Speech To Text can not be used in this website as you need to set your credentials."}
    }'
    demo="true"
  ></deep-chat>
</div>
- + \ No newline at end of file diff --git a/docs/styles/index.html b/docs/styles/index.html index 06c4766f0..accde05b1 100644 --- a/docs/styles/index.html +++ b/docs/styles/index.html @@ -13,7 +13,7 @@ - + @@ -57,7 +57,7 @@ active is used when the microphone is active.
unsupported is used when recording is not supported on the user's browser.
position is the button position within the input area.

<deep-chat
  microphone='{
    "button": {
      "default": {
        "container": {
          "hover": {"backgroundColor": "#7fbded69"},
          "click": {"backgroundColor": "#4babf669"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(53%) saturate(6895%) hue-rotate(200deg) brightness(101%) contrast(101%)"
            },
            "hover": {
              "filter":
                "brightness(0) saturate(100%) invert(27%) sepia(59%) saturate(5655%) hue-rotate(203deg) brightness(101%) contrast(84%)"
            }
          }
        }
      },
      "active": {
        "container": {
          "hover": {"backgroundColor": "#ffd07c70"},
          "click": {"backgroundColor": "#ecb85c70"}
        },
        "svg": {
          "styles": {
            "default": {
              "filter":
                "brightness(0) saturate(100%) invert(49%) sepia(99%) saturate(477%) hue-rotate(343deg) brightness(100%) contrast(101%)"
            }
          }
        }
      }
    }
  }'
></deep-chat>
tip

You can use the CSSFilterConverter tool to generate filter values for the icon color.

- + \ No newline at end of file diff --git a/examples/Layout/fullScreen/index.html b/examples/Layout/fullScreen/index.html index 97573f4fa..42d3464e6 100644 --- a/examples/Layout/fullScreen/index.html +++ b/examples/Layout/fullScreen/index.html @@ -13,14 +13,14 @@ - +

Full Screen

Examples to help you expand the chat component dimensions.

Default​

This example uses the default Deep Chat theme.

View Code

ChatGPT​

This example uses a design similar to ChatGPT.

View Code

Simple​

If you want to automatically scale the inner chat's elements relative to the font-size, you can simply add the desired font-size inside the style property.

View Code
- + \ No newline at end of file diff --git a/examples/Layout/sticky/index.html b/examples/Layout/sticky/index.html index 65fa811c2..30b5e48ed 100644 --- a/examples/Layout/sticky/index.html +++ b/examples/Layout/sticky/index.html @@ -13,14 +13,14 @@ - +

Sticky

Example to help you stick the component to any side of the screen - furthering a chat-like experience to your users. The core method to achieve this is to set the style property with position: fixed and defining the side you want to component to sit on e.g. right: 7%.

Example code

<!-- This example is for Vanilla JS and should be tailored to your framework (see Frameworks) -->

<deep-chat
  style="border-radius: 10px; position: fixed; bottom: 0px; right: 7%; z-index: 1"
  initialMessages='[
    {"text": "Hey, how are you?", "role": "user"},
    {"text": "I am doing great, how about you?", "role": "ai"},
    {"text": "What is the meaning of life?", "role": "user"},
    {"text": "This completely depends on the person.", "role": "ai"}
  ]'
  demo="true"
  stream="true"
></deep-chat>
- + \ No newline at end of file diff --git a/examples/design/index.html b/examples/design/index.html index ffcb07482..674070e38 100644 --- a/examples/design/index.html +++ b/examples/design/index.html @@ -13,7 +13,7 @@ - + @@ -22,7 +22,7 @@ set the avatars property to true.

View Code

Bard​

Simulation of the styling used in Google Bard. If you are using a custom avatar - please replace the "path-to-icon.png" string to your file's path or set the avatars property to true.

View Code

Bing​

Simulation of the styling used in Bing Chat.

View Code

Blue​

A blue color theme that uses a background image.

View Code

Lo-fi​

A blue and purple theme that uses an image background.

View Code

Red​

A red color flavour. If you are using a custom avatar - please replace the "path-to-icon.png" string to your file's path or set the avatars property to true.

View Code

Violet​

A violet color theme that uses a squared border styling approach.

View Code

Dark blue​

Dark blue color variation that is suitable for a dark screen mode.

View Code

Dark Orange​

Dark orange color variation that is suitable for a dark screen mode.

View Code

Full width input​

A simple text input area that covers the full width of the chat component.

View Code
- + \ No newline at end of file diff --git a/examples/externalModules/index.html b/examples/externalModules/index.html index d0f734471..9fb3101c5 100644 --- a/examples/externalModules/index.html +++ b/examples/externalModules/index.html @@ -13,7 +13,7 @@ - + @@ -33,7 +33,7 @@ in their hands to alllow them to tailor the approach for their project.

Troubleshooting​

If you are experiencing issues for importing/exporting files, please see github issues or create a new issue ticket and we will look into it as soon as possible.

- + \ No newline at end of file diff --git a/examples/frameworks/index.html b/examples/frameworks/index.html index 874ddff6d..c67b5a1a2 100644 --- a/examples/frameworks/index.html +++ b/examples/frameworks/index.html @@ -13,7 +13,7 @@ - + @@ -30,7 +30,7 @@ the existing examples; please see github issues or create a new issue ticket and we will look into it as soon as possible.

- + \ No newline at end of file diff --git a/examples/servers/index.html b/examples/servers/index.html index d1834824c..a84d60ba9 100644 --- a/examples/servers/index.html +++ b/examples/servers/index.html @@ -13,7 +13,7 @@ - + @@ -28,7 +28,7 @@ such as Vercel:

Click for GitHub Project

Troubleshooting​

If you are experiencing issueswith any of the examples - please see github issues or create a new issue ticket and we will look into it as soon as possible.

- + \ No newline at end of file diff --git a/exploreButton/exploreButton/index.html b/exploreButton/exploreButton/index.html index dfd51e41f..27f4d5073 100644 --- a/exploreButton/exploreButton/index.html +++ b/exploreButton/exploreButton/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/features/captureFiles/captureFiles/index.html b/features/captureFiles/captureFiles/index.html index 98add371c..0481f72da 100644 --- a/features/captureFiles/captureFiles/index.html +++ b/features/captureFiles/captureFiles/index.html @@ -13,13 +13,13 @@ - +
Use Camera and Microphone
Deep Chat can be used to create new files inside the component! Click the camera button to capture photos or use the microphone button to record audio.
- + \ No newline at end of file diff --git a/features/connect/connect/index.html b/features/connect/connect/index.html index aaa02f24e..0aede9f8c 100644 --- a/features/connect/connect/index.html +++ b/features/connect/connect/index.html @@ -13,13 +13,13 @@ - +
Connect to any service
Deep Chat can connect to any API. Use it to communicate with popular AI providers directly from the browser or configure it to connect to your own servers.
- + \ No newline at end of file diff --git a/features/customize/customize/index.html b/features/customize/customize/index.html index ce760f318..fe200d267 100644 --- a/features/customize/customize/index.html +++ b/features/customize/customize/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/features/features/index.html b/features/features/index.html index e0850bb41..1d8ae431e 100644 --- a/features/features/index.html +++ b/features/features/index.html @@ -13,13 +13,13 @@ - +
Connect to any service
Deep Chat can connect to any API. Use it to communicate with popular AI providers directly from the browser or configure it to connect to your own servers.
Transfer Media and MarkDown
Send images, audio, gifs, spreadsheets and other files to and from the chat. Text messages support MarkDown to help control text layout and render code.
Use Camera and Microphone
Deep Chat can be used to create new files inside the component! Click the camera button to capture photos or use the microphone button to record audio.
Enhance chat with Speech
Input your text using real time speech to text transcription and have the responses read out to you automatically using text to speech synthesis.
- + \ No newline at end of file diff --git a/features/media/media/index.html b/features/media/media/index.html index 80e3443eb..1b6a58475 100644 --- a/features/media/media/index.html +++ b/features/media/media/index.html @@ -13,13 +13,13 @@ - +
Transfer Media and MarkDown
Send images, audio, gifs, spreadsheets and other files to and from the chat. Text messages support MarkDown to help control text layout and render code.
- + \ No newline at end of file diff --git a/features/speech/speech/index.html b/features/speech/speech/index.html index c371cb22d..2796687dd 100644 --- a/features/speech/speech/index.html +++ b/features/speech/speech/index.html @@ -13,13 +13,13 @@ - +
Enhance chat with Speech
Input your text using real time speech to text transcription and have the responses read out to you automatically using text to speech synthesis.
- + \ No newline at end of file diff --git a/footer/footer/index.html b/footer/footer/index.html index d623b29b8..ade26f127 100644 --- a/footer/footer/index.html +++ b/footer/footer/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/index.html b/index.html index 334b833ed..3080bfdc4 100644 --- a/index.html +++ b/index.html @@ -13,13 +13,13 @@ - +
Connect to any service
Deep Chat can connect to any API. Use it to communicate with popular AI providers directly from the browser or configure it to connect to your own servers.
Transfer Media and MarkDown
Send images, audio, gifs, spreadsheets and other files to and from the chat. Text messages support MarkDown to help control text layout and render code.
Use Camera and Microphone
Deep Chat can be used to create new files inside the component! Click the camera button to capture photos or use the microphone button to record audio.
Enhance chat with Speech
Input your text using real time speech to text transcription and have the responses read out to you automatically using text to speech synthesis.
- + \ No newline at end of file diff --git a/playground/chat/manipulate/playgroundAddButton/index.html b/playground/chat/manipulate/playgroundAddButton/index.html index ebefb87f9..83f12aec8 100644 --- a/playground/chat/manipulate/playgroundAddButton/index.html +++ b/playground/chat/manipulate/playgroundAddButton/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/chat/playgroundChatComponent/index.html b/playground/chat/playgroundChatComponent/index.html index 0fe9ac618..d1650b8c4 100644 --- a/playground/chat/playgroundChatComponent/index.html +++ b/playground/chat/playgroundChatComponent/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/chat/playgroundChatWrapper/index.html b/playground/chat/playgroundChatWrapper/index.html index ed325a7a8..0431a54c2 100644 --- a/playground/chat/playgroundChatWrapper/index.html +++ b/playground/chat/playgroundChatWrapper/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/chat/playgroundChatWrapperConfig/index.html b/playground/chat/playgroundChatWrapperConfig/index.html index 02e91dad0..c540cbd43 100644 --- a/playground/chat/playgroundChatWrapperConfig/index.html +++ b/playground/chat/playgroundChatWrapperConfig/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/chat/playgroundChatWrapperLogo/index.html b/playground/chat/playgroundChatWrapperLogo/index.html index beac683f8..479812b62 100644 --- a/playground/chat/playgroundChatWrapperLogo/index.html +++ b/playground/chat/playgroundChatWrapperLogo/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/chat/playgroundChatWrapperText/index.html b/playground/chat/playgroundChatWrapperText/index.html index a24292dcd..cee739003 100644 --- a/playground/chat/playgroundChatWrapperText/index.html +++ b/playground/chat/playgroundChatWrapperText/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/header/export/modal/playgroundExportModal/index.html b/playground/header/export/modal/playgroundExportModal/index.html index 989779a88..38631fcd1 100644 --- a/playground/header/export/modal/playgroundExportModal/index.html +++ b/playground/header/export/modal/playgroundExportModal/index.html @@ -13,13 +13,13 @@ - +
Export Config
Export your playground configuration to continue where you left of next time.
- + \ No newline at end of file diff --git a/playground/header/export/playgroundExportButton/index.html b/playground/header/export/playgroundExportButton/index.html index 0551a9e8f..99ffa3c1f 100644 --- a/playground/header/export/playgroundExportButton/index.html +++ b/playground/header/export/playgroundExportButton/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/header/information/modal/playgroundInformationModal/index.html b/playground/header/information/modal/playgroundInformationModal/index.html index f1dbdef24..cda364410 100644 --- a/playground/header/information/modal/playgroundInformationModal/index.html +++ b/playground/header/information/modal/playgroundInformationModal/index.html @@ -13,13 +13,13 @@ - +
Information
Create, configure and experiment with Deep Chat components without writing any code.
The playground does not record any data. All information remains in the safety of your browser.
Watch the playground tutorial video.
- + \ No newline at end of file diff --git a/playground/header/information/playgroundInformationButton/index.html b/playground/header/information/playgroundInformationButton/index.html index 22a2328b4..8798b6691 100644 --- a/playground/header/information/playgroundInformationButton/index.html +++ b/playground/header/information/playgroundInformationButton/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/header/layout/playgroundLayoutButton/index.html b/playground/header/layout/playgroundLayoutButton/index.html index 81eb469f7..d0d614d32 100644 --- a/playground/header/layout/playgroundLayoutButton/index.html +++ b/playground/header/layout/playgroundLayoutButton/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/header/playgroundCog/index.html b/playground/header/playgroundCog/index.html index d9ff6f760..78736cce0 100644 --- a/playground/header/playgroundCog/index.html +++ b/playground/header/playgroundCog/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/header/playgroundHeaderButtons/index.html b/playground/header/playgroundHeaderButtons/index.html index b704af4ed..4fcce13c4 100644 --- a/playground/header/playgroundHeaderButtons/index.html +++ b/playground/header/playgroundHeaderButtons/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/header/playgroundShield/index.html b/playground/header/playgroundShield/index.html index 407707f0d..1dd69a340 100644 --- a/playground/header/playgroundShield/index.html +++ b/playground/header/playgroundShield/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/header/upload/modal/playgroundUploadModal/index.html b/playground/header/upload/modal/playgroundUploadModal/index.html index fcd37b680..9e39caeb5 100644 --- a/playground/header/upload/modal/playgroundUploadModal/index.html +++ b/playground/header/upload/modal/playgroundUploadModal/index.html @@ -13,13 +13,13 @@ - +
Upload Config
Upload your playground configuration to create chats with your setup and continue where you left of.
- + \ No newline at end of file diff --git a/playground/header/upload/playgroundUploadButton/index.html b/playground/header/upload/playgroundUploadButton/index.html index 187ec9b02..e6716f8c3 100644 --- a/playground/header/upload/playgroundUploadButton/index.html +++ b/playground/header/upload/playgroundUploadButton/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/index.html b/playground/index.html index 00ed6ccc1..a0c155a1f 100644 --- a/playground/index.html +++ b/playground/index.html @@ -13,13 +13,13 @@ - +
Playground
- + \ No newline at end of file diff --git a/playground/playgroundSelect/index.html b/playground/playgroundSelect/index.html index 6d81a72fa..e0841956b 100644 --- a/playground/playgroundSelect/index.html +++ b/playground/playgroundSelect/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/serviceModal/close/serviceModalCloseButtons/index.html b/playground/serviceModal/close/serviceModalCloseButtons/index.html index 7d5836db2..65ce5d3d2 100644 --- a/playground/serviceModal/close/serviceModalCloseButtons/index.html +++ b/playground/serviceModal/close/serviceModalCloseButtons/index.html @@ -13,13 +13,13 @@ - +
- + \ No newline at end of file diff --git a/playground/serviceModal/code/serviceCode/index.html b/playground/serviceModal/code/serviceCode/index.html index be7472915..c3718b5b0 100644 --- a/playground/serviceModal/code/serviceCode/index.html +++ b/playground/serviceModal/code/serviceCode/index.html @@ -13,13 +13,13 @@ - + 

-
+
 
 
 
\ No newline at end of file
diff --git a/playground/serviceModal/fields/serviceConstructableObject/index.html b/playground/serviceModal/fields/serviceConstructableObject/index.html
index 5180abf0e..0e14dc967 100644
--- a/playground/serviceModal/fields/serviceConstructableObject/index.html
+++ b/playground/serviceModal/fields/serviceConstructableObject/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/playground/serviceModal/fields/serviceField/index.html b/playground/serviceModal/fields/serviceField/index.html
index 75683dfa1..4768d5b92 100644
--- a/playground/serviceModal/fields/serviceField/index.html
+++ b/playground/serviceModal/fields/serviceField/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/playground/serviceModal/fields/serviceOptionalParametersFields/index.html b/playground/serviceModal/fields/serviceOptionalParametersFields/index.html
index f299bf0dd..4e1a77ac1 100644
--- a/playground/serviceModal/fields/serviceOptionalParametersFields/index.html
+++ b/playground/serviceModal/fields/serviceOptionalParametersFields/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/playground/serviceModal/fields/serviceRequiredField/index.html b/playground/serviceModal/fields/serviceRequiredField/index.html
index b89be3d55..16a4d4d98 100644
--- a/playground/serviceModal/fields/serviceRequiredField/index.html
+++ b/playground/serviceModal/fields/serviceRequiredField/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/playground/serviceModal/fields/serviceTypeField/index.html b/playground/serviceModal/fields/serviceTypeField/index.html
index d62df035f..f60ca0eae 100644
--- a/playground/serviceModal/fields/serviceTypeField/index.html
+++ b/playground/serviceModal/fields/serviceTypeField/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/playground/serviceModal/serviceModal/index.html b/playground/serviceModal/serviceModal/index.html
index bfb854b75..393c949ec 100644
--- a/playground/serviceModal/serviceModal/index.html
+++ b/playground/serviceModal/serviceModal/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
Service Settings

-
+
 
 
 
\ No newline at end of file
diff --git a/playground/serviceModal/wrappers/collapsableSection/index.html b/playground/serviceModal/wrappers/collapsableSection/index.html
index a8d90bb2f..f53d4e713 100644
--- a/playground/serviceModal/wrappers/collapsableSection/index.html
+++ b/playground/serviceModal/wrappers/collapsableSection/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
-

-
+
 
 
 
\ No newline at end of file
diff --git a/playground/tooltip/playgroundTooltipWrapper/index.html b/playground/tooltip/playgroundTooltipWrapper/index.html
index fbf0cd81c..6721aad6c 100644
--- a/playground/tooltip/playgroundTooltipWrapper/index.html
+++ b/playground/tooltip/playgroundTooltipWrapper/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/preload/preloadImages/index.html b/preload/preloadImages/index.html
index 9ba0efe70..9627feb43 100644
--- a/preload/preloadImages/index.html
+++ b/preload/preloadImages/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/preload/preloadPlaygroundImages/index.html b/preload/preloadPlaygroundImages/index.html
index dc001895b..40270ff78 100644
--- a/preload/preloadPlaygroundImages/index.html
+++ b/preload/preloadPlaygroundImages/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/preload/preloadStartImages/index.html b/preload/preloadStartImages/index.html
index 38c42c5a9..d0e104058 100644
--- a/preload/preloadStartImages/index.html
+++ b/preload/preloadStartImages/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/search/index.html b/search/index.html
index 5876fb61e..5ce40a7f9 100644
--- a/search/index.html
+++ b/search/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
Search the documentation

-
+
 
 
 
\ No newline at end of file
diff --git a/smallScreen/deepChatLogo/index.html b/smallScreen/deepChatLogo/index.html
index 44cf41966..19e8f7b5c 100644
--- a/smallScreen/deepChatLogo/index.html
+++ b/smallScreen/deepChatLogo/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/smallScreen/smallScreen/index.html b/smallScreen/smallScreen/index.html
index 9aef40df3..ad3dd8e67 100644
--- a/smallScreen/smallScreen/index.html
+++ b/smallScreen/smallScreen/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/start/connectToCustomAPI/index.html b/start/connectToCustomAPI/index.html
index b0b0da7cb..eb7c06054 100644
--- a/start/connectToCustomAPI/index.html
+++ b/start/connectToCustomAPI/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
Configure your connection settings using the request property:
<deep-chat request='{"url":"https://service.com/chat"}'/>
The target service needs to be able to handle Deep Chat's request and response formats.
To avoid making changes to the service, use any of the following approaches:
- Add interceptor properties to augment the transferred objects.
- Use a handler function to control the request logic with your own code.
When creating a new server, use these example templates:
← Back

-
+
 
 
 
\ No newline at end of file
diff --git a/start/connectToPopularAPI/index.html b/start/connectToPopularAPI/index.html
index 86f51921c..93aa5fb36 100644
--- a/start/connectToPopularAPI/index.html
+++ b/start/connectToPopularAPI/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
Direct connection
The quickest way to connect to a popular AI API is to use the directConnection property:
Proxy service
When your application is ready to go live, use any of these example servers:
← Back
Connect to a custom service →

-
+
 
 
 
\ No newline at end of file
diff --git a/start/createComponent/index.html b/start/createComponent/index.html
index 0904e578a..75201c1c6 100644
--- a/start/createComponent/index.html
+++ b/start/createComponent/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
1. Install
Add the component via an npm dependency or a script.
2. Define it in your markup
<deep-chat></deep-chat>
All done!
Live code examples:
Connect to a service →

-
+
 
 
 
\ No newline at end of file
diff --git a/start/index.html b/start/index.html
index a75404882..2652bf170 100644
--- a/start/index.html
+++ b/start/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
Let's get started!
 
Create a chat component
Connect to a service
 
Setup the component
Connect to a popular AI API
Connect to a custom API

-
+
 
 
 
\ No newline at end of file
diff --git a/start/options/index.html b/start/options/index.html
index 4e4ef5765..020e8b489 100644
--- a/start/options/index.html
+++ b/start/options/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
 

-
+
 
 
 
\ No newline at end of file
diff --git a/start/startParticles/index.html b/start/startParticles/index.html
index 501bdbeb5..825dba9d6 100644
--- a/start/startParticles/index.html
+++ b/start/startParticles/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/start/startSmallScreen/index.html b/start/startSmallScreen/index.html
index 2a7e0df4b..f9675a7aa 100644
--- a/start/startSmallScreen/index.html
+++ b/start/startSmallScreen/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 
 
Setup the component
Connect to a popular AI API
Connect to a custom API

-
+
 
 
 
\ No newline at end of file
diff --git a/startPanel/startPanel/index.html b/startPanel/startPanel/index.html
index 484c470be..33a173224 100644
--- a/startPanel/startPanel/index.html
+++ b/startPanel/startPanel/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/startPanel/startPanelParticles/index.html b/startPanel/startPanelParticles/index.html
index f59e453e6..d7e798a02 100644
--- a/startPanel/startPanelParticles/index.html
+++ b/startPanel/startPanelParticles/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/utils/fadeInContent/index.html b/utils/fadeInContent/index.html
index be2811bb9..b73bb1314 100644
--- a/utils/fadeInContent/index.html
+++ b/utils/fadeInContent/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/utils/fadeInNav/index.html b/utils/fadeInNav/index.html
index b6b859777..d68332219 100644
--- a/utils/fadeInNav/index.html
+++ b/utils/fadeInNav/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file
diff --git a/utils/onVisibleAnimation/index.html b/utils/onVisibleAnimation/index.html
index 03d7d74f1..8eab47f3c 100644
--- a/utils/onVisibleAnimation/index.html
+++ b/utils/onVisibleAnimation/index.html
@@ -13,13 +13,13 @@
 
 
 
-
+
 
 
 
 

 

-
+
 
 
 
\ No newline at end of file