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.
Follow these steps to integrate Chit-Chat into your application effortlessly.
+Install the Chit-Chat React package:
+npm install chit-chat-react
To set up Chit-Chat via Docker, use the following command:
+docker pull apurvjha123/chit-chat
Run the container:
+docker run -d -p 8080:80 apurvjha123/chit-chat
Access the service at http://localhost:8080.
This guide explains how to integrate a chatbot into your webpage. The chatbot will be powered by a model called Gemini or OpenAI. The configuration requires an API key, which can be obtained through the dashboard. route of your application.
Don't Expose API Key to Anything.
dashboard route.Include the CSS file in the <head> of your HTML document:
<link rel="stylesheet" href="https://chit-chat.fun/style.css">
Insert the chatbot's container where you want it to appear in <Body> :
<div id="chatbot"></div>
Place the following script before the closing </body> tag or between the </body> and </html>:
<script src="https://chit-chat.fun/script.js"></script>
Set up your chatbot using the following script:
+chatbot.setChatBotConfiguration({
apiKey: "your-api-key-here", <!-- Replace with your actual API key -->
chatbotTitle: "Chat Bot",
LLM: "Gemini",
initialMessage: "Hello! How Can I Assist You?",
brandImage: "https://cdn.jsdelivr.net/gh/Lake-ai/cdn-interface/chatbot.png",
suggestions: [],
rateLimitDuration: 5000
});
Below is the HTML template you can use to integrate the chatbot into your webpage:
+<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://chit-chat.fun/style.css">
<title>Chat Bot</title>
</head>
<body>
<div id="chatbot"></div>
</body>
<script src="https://chit-chat.fun/script.js"></script>
<script>
chatbot.setChatBotConfiguration({
apiKey: "your-api-key-here", <!-- Replace with your actual API key -->
chatbotTitle: "Chat Bot",
LLM: "Gemini",
initialMessage: "Hello! How Can I Assist You?",
brandImage: "https://cdn.jsdelivr.net/gh/Lake-ai/cdn-interface/chatbot.png",
suggestions: [],
rateLimitDuration: 5000
});
</script>
</html>
This guide demonstrates how to fetch information from the Chit-Chat API using different programming languages. The API allows querying by providing a prompt (user question) and a llm type (e.g., Gemini).
Don't Expose API Key to Anything.
dashboard route.The API endpoint to fetch the answer is:
+https://chit-chat.fun/api/v1/QnARetrieval?key=YOUR_API_KEY
Where YOUR_API_KEY should be replaced with your actual API key.
{
"prompt": "userQuestion",
"llm": "Gemini"
}
To call the API in Bash using cURL, use the following command:
+curl -X POST "https://chit-chat.fun/api/v1/QnARetrieval?key=YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{"prompt": "userQuestion", "llm": "Gemini"}'
Replace YOUR_API_KEY with your actual API key and userQuestion with the question you want to ask.
+In JavaScript, you can use the fetch() function to make the request:
+async function generateAnswer(userQuestion) {
const response = await fetch("https://chit-chat.fun/api/v1/QnARetrieval?key=YOUR_API_KEY", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
prompt: userQuestion,
llm: "Gemini"
})
});
const data = await response.json();
console.log(data);
}
Make sure to replace YOUR_API_KEY and userQuestion with appropriate values.
+In Java, you can use the HttpClient to make the request:
+import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.net.http.HttpHeaders;
import java.nio.charset.StandardCharsets;
public class ChatbotAPI {
public static void main(String[] args) throws Exception {
String apiKey = "YOUR_API_KEY";
String userQuestion = "What is the weather today?";
String jsonPayload = String.format("{\"prompt\": \"%s\", \"llm\": \"Gemini\"}", userQuestion);
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create("https://chit-chat.fun/api/v1/QnARetrieval?key=" + apiKey))
.header("Content-Type", "application/json")
.POST(HttpRequest.BodyPublishers.ofString(jsonPayload, StandardCharsets.UTF_8))
.build();
HttpClient client = HttpClient.newHttpClient();
HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
System.out.println(response.body());
}
}
In Python, you can use the requests library to make the request:
+import requests
import json
def generate_answer(user_question):
url = "https://chit-chat.fun/api/v1/QnARetrieval?key=YOUR_API_KEY"
payload = {
"prompt": user_question,
"llm": "Gemini"
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
return response.json()
# Example usage:
user_question = "How does weather work?"
response = generate_answer(user_question)
print(response)
Ensure to replace YOUR_API_KEY and user_question accordingly.
+If you are working in a Node.js environment, you can use the axios library:
+const axios = require('axios');
async function generateAnswer(userQuestion) {
const response = await axios.post("https://chit-chat.fun/api/v1/QnARetrieval?key=YOUR_API_KEY", {
prompt: userQuestion,
llm: "Gemini"
});
console.log(response.data);
}
// Example usage:
generateAnswer("What is AI?");
To run this code, you need to install the axios package first:
+npm install axios
In PHP, you can use cURL to make the request:
+<?php
function generateAnswer($userQuestion) {
$apiKey = "YOUR_API_KEY";
$url = "https://chit-chat.fun/api/v1/QnARetrieval?key=$apiKey";
$payload = json_encode(array(
"prompt" => $userQuestion,
"llm" => "Gemini"
));
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json'
));
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
$response = curl_exec($ch);
curl_close($ch);
return json_decode($response, true);
}
// Example usage:
$response = generateAnswer("How does gravity work?");
print_r($response);
?>
This guide demonstrates how to integrate the Chit-Chat bot into your React application.
+Don't Expose API Key to Anything.
dashboard route.To get started, you need to install the chit-chat-react package. Run the following command:
npm install chit-chat-react
This will install the required library to integrate the chatbot into your React app.
+Once the dependency is installed, you can use the ChatBot component in your React app.
+import React from 'react';
import ChatBot from 'chit-chat-react';
const page = () => {
return (
<ChatBot
apiKey="YOUR_API_KEY" // Replace with your actual API key
chatbotTitle="Chat bot"
LLM="Gemini"
initialMessage="Hello! How Can I Assist You?"
brandImage="https://cdn.jsdelivr.net/gh/Lake-ai/cdn-interface/chatbot.png"
suggestions={[]} // Add any suggestions if needed
rateLimitDuration={5000} // Set the rate limit duration
/>
);
}
export default page;
This guide demonstrates how to integrate the Chit-Chat bot into your React application.
+Don't Expose API Key to Anything.
dashboard route.To get started, you need to install the chit-chat-react package. Run the following command:
npm install chit-chat-react
This will install the required library to integrate the chatbot into your React app.
+Once the dependency is installed, you can use the ChatBot component in your React app.
+import React from 'react';
import ChatBot from 'chit-chat-react';
const Chatbot = () => {
return (
<ChatBot
apiKey="YOUR_API_KEY" // Replace with your actual API key
chatbotTitle="Chat bot"
LLM="Gemini"
initialMessage="Hello! How Can I Assist You?"
brandImage="https://cdn.jsdelivr.net/gh/Lake-ai/cdn-interface/chatbot.png"
suggestions={[]} // Add any suggestions if needed
rateLimitDuration={5000} // Set the rate limit duration
/>
);
}
export default Chatbot;
["'])(?.*?)\1/,ve=/\{(?<range>[\d,-]+)\}/,Ne={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},Ae={...Ne,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},Ce=Object.keys(Ne);function ye(e,t){const n=e.map((e=>{const{start:n,end:s}=Ae[e];return`(?:${n}\\s*(${t.flatMap((e=>[e.line,e.block?.start,e.block?.end].filter(Boolean))).join("|")})\\s*${s})`})).join("|");return new RegExp(`^\\s*(?:${n})\\s*$`)}function ke(e,t){let n=e.replace(/\n$/,"");const{language:s,magicComments:a,metastring:o}=t;if(o&&ve.test(o)){const e=o.match(ve).groups.range;if(0===a.length)throw new Error(`A highlight range has been given in code block's metastring (\`\`\` ${o}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);const t=a[0].className,s=ge()(e).filter((e=>e>0)).map((e=>[e-1,[t]]));return{lineClassNames:Object.fromEntries(s),code:n}}if(void 0===s)return{lineClassNames:{},code:n};const i=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return ye(["js","jsBlock"],t);case"jsx":case"tsx":return ye(["js","jsBlock","jsx"],t);case"html":return ye(["js","jsBlock","html"],t);case"python":case"py":case"bash":return ye(["bash"],t);case"markdown":case"md":return ye(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return ye(["tex"],t);case"lua":case"haskell":case"sql":return ye(["lua"],t);case"wasm":return ye(["wasm"],t);case"vb":case"vba":case"visual-basic":return ye(["vb","rem"],t);case"vbnet":return ye(["vbnet","rem"],t);case"batch":return ye(["rem"],t);case"basic":return ye(["rem","f90"],t);case"fsharp":return ye(["js","ml"],t);case"ocaml":case"sml":return ye(["ml"],t);case"fortran":return ye(["f90"],t);case"cobol":return ye(["cobol"],t);default:return ye(Ce,t)}}(s,a),c=n.split("\n"),l=Object.fromEntries(a.map((e=>[e.className,{start:0,range:""}]))),r=Object.fromEntries(a.filter((e=>e.line)).map((e=>{let{className:t,line:n}=e;return[n,t]}))),d=Object.fromEntries(a.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.start,t]}))),u=Object.fromEntries(a.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.end,t]})));for(let h=0;h<c.length;){const e=c[h].match(i);if(!e){h+=1;continue}const t=e.slice(1).find((e=>void 0!==e));r[t]?l[r[t]].range+=`${h},`:d[t]?l[d[t]].start=h:u[t]&&(l[u[t]].range+=`${l[u[t]].start}-${h-1},`),c.splice(h,1)}n=c.join("\n");const m={};return Object.entries(l).forEach((e=>{let[t,{range:n}]=e;ge()(n).forEach((e=>{m[e]??=[],m[e].push(t)}))})),{lineClassNames:m,code:n}}const Le="codeBlockContainer_Ckt0";function _e(e){let{as:t,...n}=e;const s=function(e){const t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach((e=>{let[s,a]=e;const o=t[s];o&&"string"==typeof a&&(n[o]=a)})),n}(xe());return(0,i.jsx)(t,{...n,style:s,className:(0,u.A)(n.className,Le,v.G.common.codeBlock)})}const Be={codeBlockContent:"codeBlockContent_biex",codeBlockTitle:"codeBlockTitle_Ktv7",codeBlock:"codeBlock_bY9V",codeBlockStandalone:"codeBlockStandalone_MEMb",codeBlockLines:"codeBlockLines_e6Vv",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_o6Pm",buttonGroup:"buttonGroup__atx"};function Te(e){let{children:t,className:n}=e;return(0,i.jsx)(_e,{as:"pre",tabIndex:0,className:(0,u.A)(Be.codeBlockStandalone,"thin-scrollbar",n),children:(0,i.jsx)("code",{className:Be.codeBlockLines,children:t})})}const we={attributes:!0,characterData:!0,childList:!0,subtree:!0};function Ee(e,t){const[n,a]=(0,s.useState)(),i=(0,s.useCallback)((()=>{a(e.current?.closest("[role=tabpanel][hidden]"))}),[e,a]);(0,s.useEffect)((()=>{i()}),[i]),function(e,t,n){void 0===n&&(n=we);const a=(0,o._q)(t),i=(0,o.Be)(n);(0,s.useEffect)((()=>{const t=new MutationObserver(a);return e&&t.observe(e,i),()=>t.disconnect()}),[e,a,i])}(n,(e=>{e.forEach((e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),i())}))}),{attributes:!0,characterData:!1,childList:!1,subtree:!1})}var He=n(1765);const Me="codeLine_lJS_",Ie="codeLineNumber_Tfdd",Se="codeLineContent_feaV";function Ue(e){let{line:t,classNames:n,showLineNumbers:s,getLineProps:a,getTokenProps:o}=e;1===t.length&&"\n"===t[0].content&&(t[0].content="");const c=a({line:t,className:(0,u.A)(n,s&&Me)}),l=t.map(((e,t)=>(0,i.jsx)("span",{...o({token:e})},t)));return(0,i.jsxs)("span",{...c,children:[s?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("span",{className:Ie}),(0,i.jsx)("span",{className:Se,children:l})]}):l,(0,i.jsx)("br",{})]})}function Ve(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function Re(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}const ze={copyButtonCopied:"copyButtonCopied_obH4",copyButtonIcons:"copyButtonIcons_eSgA",copyButtonIcon:"copyButtonIcon_y97N",copyButtonSuccessIcon:"copyButtonSuccessIcon_LjdS"};function Oe(e){let{code:t,className:n}=e;const[a,o]=(0,s.useState)(!1),c=(0,s.useRef)(void 0),l=(0,s.useCallback)((()=>{!function(e,{target:t=document.body}={}){if("string"!=typeof e)throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);const n=document.createElement("textarea"),s=document.activeElement;n.value=e,n.setAttribute("readonly",""),n.style.contain="strict",n.style.position="absolute",n.style.left="-9999px",n.style.fontSize="12pt";const a=document.getSelection(),o=a.rangeCount>0&&a.getRangeAt(0);t.append(n),n.select(),n.selectionStart=0,n.selectionEnd=e.length;let i=!1;try{i=document.execCommand("copy")}catch{}n.remove(),o&&(a.removeAllRanges(),a.addRange(o)),s&&s.focus()}(t),o(!0),c.current=window.setTimeout((()=>{o(!1)}),1e3)}),[t]);return(0,s.useEffect)((()=>()=>window.clearTimeout(c.current)),[]),(0,i.jsx)("button",{type:"button","aria-label":a?(0,h.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,h.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,h.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,u.A)("clean-btn",n,ze.copyButton,a&&ze.copyButtonCopied),onClick:l,children:(0,i.jsxs)("span",{className:ze.copyButtonIcons,"aria-hidden":"true",children:[(0,i.jsx)(Ve,{className:ze.copyButtonIcon}),(0,i.jsx)(Re,{className:ze.copyButtonSuccessIcon})]})})}function Pe(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}const Ge="wordWrapButtonIcon_Bwma",De="wordWrapButtonEnabled_EoeP";function $e(e){let{className:t,onClick:n,isEnabled:s}=e;const a=(0,h.T)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,i.jsx)("button",{type:"button",onClick:n,className:(0,u.A)("clean-btn",t,s&&De),"aria-label":a,title:a,children:(0,i.jsx)(Pe,{className:Ge,"aria-hidden":"true"})})}function Fe(e){let{children:t,className:n="",metastring:a,title:o,showLineNumbers:c,language:l}=e;const{prism:{defaultLanguage:r,magicComments:d}}=(0,$.p)(),m=function(e){return e?.toLowerCase()}(l??function(e){const t=e.split(" ").find((e=>e.startsWith("language-")));return t?.replace(/language-/,"")}(n)??r),h=xe(),p=function(){const[e,t]=(0,s.useState)(!1),[n,a]=(0,s.useState)(!1),o=(0,s.useRef)(null),i=(0,s.useCallback)((()=>{const n=o.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t((e=>!e))}),[o,e]),c=(0,s.useCallback)((()=>{const{scrollWidth:e,clientWidth:t}=o.current,n=e>t||o.current.querySelector("code").hasAttribute("style");a(n)}),[o]);return Ee(o,c),(0,s.useEffect)((()=>{c()}),[e,c]),(0,s.useEffect)((()=>(window.addEventListener("resize",c,{passive:!0}),()=>{window.removeEventListener("resize",c)})),[c]),{codeBlockRef:o,isEnabled:e,isCodeScrollable:n,toggle:i}}(),f=function(e){return e?.match(je)?.groups.title??""}(a)||o,{lineClassNames:x,code:b}=ke(t,{metastring:a,language:m,magicComments:d}),g=c??function(e){return Boolean(e?.includes("showLineNumbers"))}(a);return(0,i.jsxs)(_e,{as:"div",className:(0,u.A)(n,m&&!n.includes(`language-${m}`)&&`language-${m}`),children:[f&&(0,i.jsx)("div",{className:Be.codeBlockTitle,children:f}),(0,i.jsxs)("div",{className:Be.codeBlockContent,children:[(0,i.jsx)(He.f4,{theme:h,code:b,language:m??"text",children:e=>{let{className:t,style:n,tokens:s,getLineProps:a,getTokenProps:o}=e;return(0,i.jsx)("pre",{tabIndex:0,ref:p.codeBlockRef,className:(0,u.A)(t,Be.codeBlock,"thin-scrollbar"),style:n,children:(0,i.jsx)("code",{className:(0,u.A)(Be.codeBlockLines,g&&Be.codeBlockLinesWithNumbering),children:s.map(((e,t)=>(0,i.jsx)(Ue,{line:e,getLineProps:a,getTokenProps:o,classNames:x[t],showLineNumbers:g},t)))})})}}),(0,i.jsxs)("div",{className:Be.buttonGroup,children:[(p.isEnabled||p.isCodeScrollable)&&(0,i.jsx)($e,{className:Be.codeButton,onClick:()=>p.toggle(),isEnabled:p.isEnabled}),(0,i.jsx)(Oe,{className:Be.codeButton,code:b})]})]})]})}function We(e){let{children:t,...n}=e;const a=(0,pe.A)(),o=function(e){return s.Children.toArray(e).some((e=>(0,s.isValidElement)(e)))?e:Array.isArray(e)?e.join(""):e}(t),c="string"==typeof o?Fe:Te;return(0,i.jsx)(c,{...n,children:o},String(a))}function qe(e){return(0,i.jsx)("code",{...e})}var Ze=n(3427);const Je="details_lb9f",Ye="isBrowser_bmU9",Ke="collapsibleContent_i85q";function Qe(e){return!!e&&("SUMMARY"===e.tagName||Qe(e.parentElement))}function Xe(e,t){return!!e&&(e===t||Xe(e.parentElement,t))}function et(e){let{summary:t,children:n,...a}=e;(0,Ze.A)().collectAnchor(a.id);const o=(0,pe.A)(),c=(0,s.useRef)(null),{collapsed:l,setCollapsed:r}=(0,D.u)({initialState:!a.open}),[d,m]=(0,s.useState)(a.open),h=s.isValidElement(t)?t:(0,i.jsx)("summary",{children:t??"Details"});return(0,i.jsxs)("details",{...a,ref:c,open:d,"data-collapsed":l,className:(0,u.A)(Je,o&&Ye,a.className),onMouseDown:e=>{Qe(e.target)&&e.detail>1&&e.preventDefault()},onClick:e=>{e.stopPropagation();const t=e.target;Qe(t)&&Xe(t,c.current)&&(e.preventDefault(),l?(r(!1),m(!0)):r(!0))},children:[h,(0,i.jsx)(D.N,{lazy:!1,collapsed:l,disableSSRStyle:!0,onCollapseTransitionEnd:e=>{r(e),m(!e)},children:(0,i.jsx)("div",{className:Ke,children:n})})]})}const tt="details_b_Ee";function nt(e){let{...t}=e;return(0,i.jsx)(et,{...t,className:(0,u.A)("alert alert--info",tt,t.className)})}function st(e){const t=s.Children.toArray(e.children),n=t.find((e=>s.isValidElement(e)&&"summary"===e.type)),a=(0,i.jsx)(i.Fragment,{children:t.filter((e=>e!==n))});return(0,i.jsx)(nt,{...e,summary:n,children:a})}function at(e){return(0,i.jsx)(ue.A,{...e})}const ot="containsTaskList_mC6p";function it(e){if(void 0!==e)return(0,u.A)(e,e?.includes("contains-task-list")&&ot)}const ct="img_ev3q";function lt(e){const{mdxAdmonitionTitle:t,rest:n}=function(e){const t=s.Children.toArray(e),n=t.find((e=>s.isValidElement(e)&&"mdxAdmonitionTitle"===e.type)),a=t.filter((e=>e!==n)),o=n?.props.children;return{mdxAdmonitionTitle:o,rest:a.length>0?(0,i.jsx)(i.Fragment,{children:a}):null}}(e.children),a=e.title??t;return{...e,...a&&{title:a},children:n}}const rt="admonition_xJq3",dt="admonitionHeading_Gvgb",ut="admonitionIcon_Rf37",mt="admonitionContent_BuS1";function ht(e){let{type:t,className:n,children:s}=e;return(0,i.jsx)("div",{className:(0,u.A)(v.G.common.admonition,v.G.common.admonitionType(t),rt,n),children:s})}function pt(e){let{icon:t,title:n}=e;return(0,i.jsxs)("div",{className:dt,children:[(0,i.jsx)("span",{className:ut,children:t}),n]})}function ft(e){let{children:t}=e;return t?(0,i.jsx)("div",{className:mt,children:t}):null}function xt(e){const{type:t,icon:n,title:s,children:a,className:o}=e;return(0,i.jsxs)(ht,{type:t,className:o,children:[s||n?(0,i.jsx)(pt,{title:s,icon:n}):null,(0,i.jsx)(ft,{children:a})]})}function bt(e){return(0,i.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})})}const gt={icon:(0,i.jsx)(bt,{}),title:(0,i.jsx)(h.A,{id:"theme.admonition.note",description:"The default label used for the Note admonition (:::note)",children:"note"})};function jt(e){return(0,i.jsx)(xt,{...gt,...e,className:(0,u.A)("alert alert--secondary",e.className),children:e.children})}function vt(e){return(0,i.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})})}const Nt={icon:(0,i.jsx)(vt,{}),title:(0,i.jsx)(h.A,{id:"theme.admonition.tip",description:"The default label used for the Tip admonition (:::tip)",children:"tip"})};function At(e){return(0,i.jsx)(xt,{...Nt,...e,className:(0,u.A)("alert alert--success",e.className),children:e.children})}function Ct(e){return(0,i.jsx)("svg",{viewBox:"0 0 14 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"})})}const yt={icon:(0,i.jsx)(Ct,{}),title:(0,i.jsx)(h.A,{id:"theme.admonition.info",description:"The default label used for the Info admonition (:::info)",children:"info"})};function kt(e){return(0,i.jsx)(xt,{...yt,...e,className:(0,u.A)("alert alert--info",e.className),children:e.children})}function Lt(e){return(0,i.jsx)("svg",{viewBox:"0 0 16 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})})}const _t={icon:(0,i.jsx)(Lt,{}),title:(0,i.jsx)(h.A,{id:"theme.admonition.warning",description:"The default label used for the Warning admonition (:::warning)",children:"warning"})};function Bt(e){return(0,i.jsx)("svg",{viewBox:"0 0 12 16",...e,children:(0,i.jsx)("path",{fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"})})}const Tt={icon:(0,i.jsx)(Bt,{}),title:(0,i.jsx)(h.A,{id:"theme.admonition.danger",description:"The default label used for the Danger admonition (:::danger)",children:"danger"})};const wt={icon:(0,i.jsx)(Lt,{}),title:(0,i.jsx)(h.A,{id:"theme.admonition.caution",description:"The default label used for the Caution admonition (:::caution)",children:"caution"})};const Et={...{note:jt,tip:At,info:kt,warning:function(e){return(0,i.jsx)(xt,{..._t,...e,className:(0,u.A)("alert alert--warning",e.className),children:e.children})},danger:function(e){return(0,i.jsx)(xt,{...Tt,...e,className:(0,u.A)("alert alert--danger",e.className),children:e.children})}},...{secondary:e=>(0,i.jsx)(jt,{title:"secondary",...e}),important:e=>(0,i.jsx)(kt,{title:"important",...e}),success:e=>(0,i.jsx)(At,{title:"success",...e}),caution:function(e){return(0,i.jsx)(xt,{...wt,...e,className:(0,u.A)("alert alert--warning",e.className),children:e.children})}}};function Ht(e){const t=lt(e),n=(s=t.type,Et[s]||(console.warn(`No admonition component found for admonition type "${s}". Using Info as fallback.`),Et.info));var s;return(0,i.jsx)(n,{...t})}var Mt=n(418);const It={Head:he.A,details:st,Details:st,code:function(e){return function(e){return void 0!==e.children&&s.Children.toArray(e.children).every((e=>"string"==typeof e&&!e.includes("\n")))}(e)?(0,i.jsx)(qe,{...e}):(0,i.jsx)(We,{...e})},a:function(e){return(0,i.jsx)(p.A,{...e})},pre:function(e){return(0,i.jsx)(i.Fragment,{children:e.children})},ul:function(e){return(0,i.jsx)("ul",{...e,className:it(e.className)})},li:function(e){return(0,Ze.A)().collectAnchor(e.id),(0,i.jsx)("li",{...e})},img:function(e){return(0,i.jsx)("img",{decoding:"async",loading:"lazy",...e,className:(t=e.className,(0,u.A)(t,ct))});var t},h1:e=>(0,i.jsx)(at,{as:"h1",...e}),h2:e=>(0,i.jsx)(at,{as:"h2",...e}),h3:e=>(0,i.jsx)(at,{as:"h3",...e}),h4:e=>(0,i.jsx)(at,{as:"h4",...e}),h5:e=>(0,i.jsx)(at,{as:"h5",...e}),h6:e=>(0,i.jsx)(at,{as:"h6",...e}),admonition:Ht,mermaid:Mt.A};function St(e){let{children:t}=e;return(0,i.jsx)(me.x,{components:It,children:t})}function Ut(e){let{children:t}=e;const n=function(){const{metadata:e,frontMatter:t,contentTitle:n}=r();return t.hide_title||void 0!==n?null:e.title}();return(0,i.jsxs)("div",{className:(0,u.A)(v.G.docs.docMarkdown,"markdown"),children:[n&&(0,i.jsx)("header",{children:(0,i.jsx)(ue.A,{as:"h1",children:n})}),(0,i.jsx)(St,{children:t})]})}var Vt=n(4718),Rt=n(9169),zt=n(6025);function Ot(e){return(0,i.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,i.jsx)("path",{d:"M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z",fill:"currentColor"})})}const Pt={breadcrumbHomeIcon:"breadcrumbHomeIcon_YNFT"};function Gt(){const e=(0,zt.Ay)("/");return(0,i.jsx)("li",{className:"breadcrumbs__item",children:(0,i.jsx)(p.A,{"aria-label":(0,h.T)({id:"theme.docs.breadcrumbs.home",message:"Home page",description:"The ARIA label for the home page in the breadcrumbs"}),className:"breadcrumbs__link",href:e,children:(0,i.jsx)(Ot,{className:Pt.breadcrumbHomeIcon})})})}const Dt={breadcrumbsContainer:"breadcrumbsContainer_Z_bl"};function $t(e){let{children:t,href:n,isLast:s}=e;const a="breadcrumbs__link";return s?(0,i.jsx)("span",{className:a,itemProp:"name",children:t}):n?(0,i.jsx)(p.A,{className:a,href:n,itemProp:"item",children:(0,i.jsx)("span",{itemProp:"name",children:t})}):(0,i.jsx)("span",{className:a,children:t})}function Ft(e){let{children:t,active:n,index:s,addMicrodata:a}=e;return(0,i.jsxs)("li",{...a&&{itemScope:!0,itemProp:"itemListElement",itemType:"https://schema.org/ListItem"},className:(0,u.A)("breadcrumbs__item",{"breadcrumbs__item--active":n}),children:[t,(0,i.jsx)("meta",{itemProp:"position",content:String(s+1)})]})}function Wt(){const e=(0,Vt.OF)(),t=(0,Rt.Dt)();return e?(0,i.jsx)("nav",{className:(0,u.A)(v.G.docs.docBreadcrumbs,Dt.breadcrumbsContainer),"aria-label":(0,h.T)({id:"theme.docs.breadcrumbs.navAriaLabel",message:"Breadcrumbs",description:"The ARIA label for the breadcrumbs"}),children:(0,i.jsxs)("ul",{className:"breadcrumbs",itemScope:!0,itemType:"https://schema.org/BreadcrumbList",children:[t&&(0,i.jsx)(Gt,{}),e.map(((t,n)=>{const s=n===e.length-1,a="category"===t.type&&t.linkUnlisted?void 0:t.href;return(0,i.jsx)(Ft,{active:s,index:n,addMicrodata:!!a,children:(0,i.jsx)($t,{href:a,isLast:s,children:t.label})},n)}))]})}):null}function qt(){return(0,i.jsx)(h.A,{id:"theme.contentVisibility.unlistedBanner.title",description:"The unlisted content banner title",children:"Unlisted page"})}function Zt(){return(0,i.jsx)(h.A,{id:"theme.contentVisibility.unlistedBanner.message",description:"The unlisted content banner message",children:"This page is unlisted. Search engines will not index it, and only users having a direct link can access it."})}function Jt(){return(0,i.jsx)(he.A,{children:(0,i.jsx)("meta",{name:"robots",content:"noindex, nofollow"})})}function Yt(){return(0,i.jsx)(h.A,{id:"theme.contentVisibility.draftBanner.title",description:"The draft content banner title",children:"Draft page"})}function Kt(){return(0,i.jsx)(h.A,{id:"theme.contentVisibility.draftBanner.message",description:"The draft content banner message",children:"This page is a draft. It will only be visible in dev and be excluded from the production build."})}function Qt(e){let{className:t}=e;return(0,i.jsx)(Ht,{type:"caution",title:(0,i.jsx)(Yt,{}),className:(0,u.A)(t,v.G.common.draftBanner),children:(0,i.jsx)(Kt,{})})}function Xt(e){let{className:t}=e;return(0,i.jsx)(Ht,{type:"caution",title:(0,i.jsx)(qt,{}),className:(0,u.A)(t,v.G.common.unlistedBanner),children:(0,i.jsx)(Zt,{})})}function en(e){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(Jt,{}),(0,i.jsx)(Xt,{...e})]})}function tn(e){let{metadata:t}=e;const{unlisted:n,frontMatter:s}=t;return(0,i.jsxs)(i.Fragment,{children:[(n||s.unlisted)&&(0,i.jsx)(en,{}),s.draft&&(0,i.jsx)(Qt,{})]})}const nn={docItemContainer:"docItemContainer_Djhp",docItemCol:"docItemCol_VOVn"};function sn(e){let{children:t}=e;const n=function(){const{frontMatter:e,toc:t}=r(),n=(0,m.l)(),s=e.hide_table_of_contents,a=!s&&t.length>0;return{hidden:s,mobile:a?(0,i.jsx)(oe,{}):void 0,desktop:!a||"desktop"!==n&&"ssr"!==n?void 0:(0,i.jsx)(de,{})}}(),{metadata:s}=r();return(0,i.jsxs)("div",{className:"row",children:[(0,i.jsxs)("div",{className:(0,u.A)("col",!n.hidden&&nn.docItemCol),children:[(0,i.jsx)(tn,{metadata:s}),(0,i.jsx)(_,{}),(0,i.jsxs)("div",{className:nn.docItemContainer,children:[(0,i.jsxs)("article",{children:[(0,i.jsx)(Wt,{}),(0,i.jsx)(B,{}),n.mobile,(0,i.jsx)(Ut,{children:t}),(0,i.jsx)(G,{})]}),(0,i.jsx)(b,{})]})]}),n.desktop&&(0,i.jsx)("div",{className:"col col--3",children:n.desktop})]})}function an(e){const t=`docs-doc-id-${e.content.metadata.id}`,n=e.content;return(0,i.jsx)(l,{content:e.content,children:(0,i.jsxs)(a.e3,{className:t,children:[(0,i.jsx)(d,{}),(0,i.jsx)(sn,{children:(0,i.jsx)(n,{})})]})})}},8426:(e,t)=>{function n(e){let t,n=[];for(let s of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(s))n.push(parseInt(s,10));else if(t=s.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,s,a,o]=t;if(s&&o){s=parseInt(s),o=parseInt(o);const e=s<o?1:-1;"-"!==a&&".."!==a&&"\u2025"!==a||(o+=e);for(let t=s;t!==o;t+=e)n.push(t)}}return n}t.default=n,e.exports=n},8453:(e,t,n)=>{"use strict";n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const a={},o=s.createContext(a);function i(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/public/docs/assets/js/237.feb2cd25.js b/public/docs/assets/js/237.feb2cd25.js new file mode 100644 index 0000000..d505438 --- /dev/null +++ b/public/docs/assets/js/237.feb2cd25.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkchit_chat_docs=self.webpackChunkchit_chat_docs||[]).push([[237],{3363:(e,t,i)=>{i.d(t,{A:()=>h});i(6540);var n=i(4164),o=i(1312),s=i(1107),a=i(4848);function h(e){let{className:t}=e;return(0,a.jsx)("main",{className:(0,n.A)("container margin-vert--xl",t),children:(0,a.jsx)("div",{className:"row",children:(0,a.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,a.jsx)(s.A,{as:"h1",className:"hero__title",children:(0,a.jsx)(o.A,{id:"theme.NotFound.title",description:"The title of the 404 page",children:"Page Not Found"})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.A,{id:"theme.NotFound.p1",description:"The first paragraph of the 404 page",children:"We could not find what you were looking for."})}),(0,a.jsx)("p",{children:(0,a.jsx)(o.A,{id:"theme.NotFound.p2",description:"The 2nd paragraph of the 404 page",children:"Please contact the owner of the site that linked you to the original URL and let them know their link is broken."})})]})})})}},2237:(e,t,i)=>{i.r(t),i.d(t,{default:()=>r});i(6540);var n=i(1312),o=i(1003),s=i(781),a=i(3363),h=i(4848);function r(){const e=(0,n.T)({id:"theme.NotFound.title",message:"Page Not Found"});return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(o.be,{title:e}),(0,h.jsx)(s.A,{children:(0,h.jsx)(a.A,{})})]})}}}]); \ No newline at end of file diff --git a/public/docs/assets/js/35dbe881.a2da11f0.js b/public/docs/assets/js/35dbe881.a2da11f0.js new file mode 100644 index 0000000..69c86de --- /dev/null +++ b/public/docs/assets/js/35dbe881.a2da11f0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkchit_chat_docs=self.webpackChunkchit_chat_docs||[]).push([[931],{1734:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>h,contentTitle:()=>s,default:()=>d,frontMatter:()=>o,metadata:()=>i,toc:()=>l});const i=JSON.parse('{"id":"Integration/HTML","title":"CDN Integration Guide","description":"Overview","source":"@site/docs/Integration/HTML.md","sourceDirName":"Integration","slug":"/Integration/HTML","permalink":"/docs/Integration/HTML","draft":false,"unlisted":false,"editUrl":"https://github.com/Chit-Chat-Org/docs-chit-chat/edit/main/docs/Integration/HTML.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Installation Guide","permalink":"/docs/Getting Started/installation"},"next":{"title":"API Integration Guide","permalink":"/docs/Integration/api"}}');var r=n(4848),a=n(8453);const o={},s="CDN Integration Guide",h={},l=[{value:"Overview",id:"overview",level:2},{value:"Steps to Obtain Your API Key",id:"steps-to-obtain-your-api-key",level:2},{value:"Integration",id:"integration",level:2},{value:"1. Add CSS CDN",id:"1-add-css-cdn",level:3},{value:"2. Add Chatbot Interface",id:"2-add-chatbot-interface",level:3},{value:"3. Add JavaScript CDN",id:"3-add-javascript-cdn",level:3},{value:"4. Configure the Chatbot",id:"4-configure-the-chatbot",level:3},{value:"HTML Template",id:"html-template",level:2},{value:"Key Props:",id:"key-props",level:3}];function c(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"cdn-integration-guide",children:"CDN Integration Guide"})}),"\n",(0,r.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,r.jsxs)(t.p,{children:["This guide explains how to integrate a chatbot into your webpage. The chatbot will be powered by a model called ",(0,r.jsx)(t.strong,{children:"Gemini"})," or ",(0,r.jsx)(t.strong,{children:"OpenAI"}),". The configuration requires an API key, which can be obtained through the ",(0,r.jsx)(t.a,{href:"http://chit-chat.fun/dashboard",children:(0,r.jsx)(t.code,{children:"dashboard"})}),". route of your application."]}),"\n",(0,r.jsx)(t.admonition,{title:"Api KEY",type:"danger",children:(0,r.jsx)(t.p,{children:"Don't Expose API Key to Anything."})}),"\n",(0,r.jsx)(t.h2,{id:"steps-to-obtain-your-api-key",children:"Steps to Obtain Your API Key"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsx)(t.li,{children:"Log into your application."}),"\n",(0,r.jsxs)(t.li,{children:["Go to the ",(0,r.jsx)(t.a,{href:"http://chit-chat.fun/dashboard",children:(0,r.jsx)(t.code,{children:"dashboard"})})," route."]}),"\n",(0,r.jsx)(t.li,{children:"Train AI Model, it requires information file."}),"\n",(0,r.jsx)(t.li,{children:"Copy the API key for use in the next steps."}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"integration",children:"Integration"}),"\n",(0,r.jsx)(t.h3,{id:"1-add-css-cdn",children:"1. Add CSS CDN"}),"\n",(0,r.jsxs)(t.p,{children:["Include the CSS file in the ",(0,r.jsx)(t.code,{children:"<head>"})," of your HTML document:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-html",children:'<link rel="stylesheet" href="https://chit-chat.fun/style.css">\n'})}),"\n",(0,r.jsx)(t.h3,{id:"2-add-chatbot-interface",children:"2. Add Chatbot Interface"}),"\n",(0,r.jsxs)(t.p,{children:["Insert the chatbot's container where you want it to appear in ",(0,r.jsx)(t.code,{children:"<Body>"})," :"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-html",children:'<div id="chatbot"></div>\n'})}),"\n",(0,r.jsx)(t.h3,{id:"3-add-javascript-cdn",children:"3. Add JavaScript CDN"}),"\n",(0,r.jsxs)(t.p,{children:["Place the following script before the closing ",(0,r.jsx)(t.code,{children:"</body>"})," tag or between the ",(0,r.jsx)(t.code,{children:"</body>"})," and ",(0,r.jsx)(t.code,{children:"</html>"}),":"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-html",children:'<script src="https://chit-chat.fun/script.js"><\/script>\n'})}),"\n",(0,r.jsx)(t.h3,{id:"4-configure-the-chatbot",children:"4. Configure the Chatbot"}),"\n",(0,r.jsx)(t.p,{children:"Set up your chatbot using the following script:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-javascript",children:'chatbot.setChatBotConfiguration({\r\n apiKey: "your-api-key-here", \x3c!-- Replace with your actual API key --\x3e\r\n chatbotTitle: "Chat Bot",\r\n LLM: "Gemini",\r\n initialMessage: "Hello! How Can I Assist You?",\r\n brandImage: "https://cdn.jsdelivr.net/gh/Lake-ai/cdn-interface/chatbot.png",\r\n suggestions: [],\r\n rateLimitDuration: 5000\r\n});\n'})}),"\n",(0,r.jsx)(t.h2,{id:"html-template",children:"HTML Template"}),"\n",(0,r.jsx)(t.p,{children:"Below is the HTML template you can use to integrate the chatbot into your webpage:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-html",metastring:'title="index.html"',children:'<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n <meta charset="UTF-8">\r\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n // highlight-start\r\n <link rel="stylesheet" href="https://chit-chat.fun/style.css">\r\n // highlight-end\r\n <title>Chat Bot \r\n\r\n\r\n // highlight-start\r\n \r\n // highlight-end\r\n\r\n// highlight-start\r\n + + + ++ ++ 🎉 Congratulations! 🎉
You’ve successfully integrated the Chit-Chat bot into your application! 🚀
+Your application is now equipped with a smart and customizable chatbot, ready to enhance user engagement and provide a seamless conversational experience.
+What’s Next?
+Here are some ideas to make the most of your Chit-Chat integration:
+✅ Customize the Bot
++
+- Brand It: Update the
+brandImageandchatbotTitleprops to reflect your application’s identity.- Add Suggestions: Use the
+suggestionsprop to provide quick replies for common queries.✅ Optimize the Experience
++
+- Adjust the Initial Message: Personalize the
+initialMessageto match your app’s tone.- Leverage the Power of LLMs: Choose the best language model (
+Gemini,OpenAI, etc.) for your chatbot.✅ Monitor and Scale
++
+- Handle Rate Limits: Use the
+rateLimitDurationprop to manage API usage efficiently.- Enhance Functionality: Explore advanced features like dynamic suggestions and custom APIs.
+Need Help?
+If you have questions or run into any issues, feel free to reach out:
++
+- 📚 Check our Documentation.
+- 💬 Join our Community Forum.
+- 📧 Email us at support@chit-chat.fun.
+
+We’re excited to see what you build with Chit-Chat! 🎉
+Happy Coding,
+The Chit-Chat Team