@makebot.it/js 1.0.2 → 1.1.0

package/README.md

@@ -0,0 +1,170 @@
+# Biblioteca Makebot JS
+
+Biblioteca frontend para incorporar makebots do [Makebot](https://www.makebot.it/).
+
+## Instalação
+
+### Usando npm
+
+Para instalar, basta executar:
+
+```bash
+npm install @makebot.it/js
+```
+
+### Diretamente no seu HTML
+
+```
+<script type="module">
+  import Makebot from 'https://cdn.jsdelivr.net/npm/@makebot.it/js@0/dist/web.js'
+
+  Makebot.initStandard({
+    makebot: 'meu-makebot',
+  })
+</script>
+
+<makebot-standard style="width: 100%; height: 600px; "></makebot-standard>
+```
+
+## Padrão
+
+Você pode obter o código HTML e Javascript padrão clicando no botão "HTML e Javascript" na aba "Compartilhar" do seu makebot.
+
+Lá, você pode alterar as dimensões do contêiner. Aqui está um exemplo de código:
+
+```html
+<script type="module">
+  import Makebot from "https://cdn.jsdelivr.net/npm/@makebot.it/js@0/dist/web.js";
+
+  Makebot.initStandard({
+    makebot: "meu-makebot",
+  });
+</script>
+
+<makebot-standard style="width: 100%; height: 600px; "></makebot-standard>
+```
+
+Este código está criando um contêiner com largura de 100% (corresponderá à largura herdada) e 600px de altura.
+
+## Popup
+
+Você pode obter o código HTML e Javascript do popup clicando no botão "HTML e Javascript" na aba "Compartilhar" do seu makebot.
+
+Aqui está um exemplo:
+
+```html
+<script type="module">
+  import Makebot from "https://cdn.jsdelivr.net/npm/@makebot.it/js@0/dist/web.js";
+
+  Makebot.initPopup({
+    makebot: "meu-makebot",
+    apiHost: "http://localhost:3001",
+    autoShowDelay: 3000,
+  });
+</script>
+```
+
+Este código acionará automaticamente a janela popup após 3 segundos.
+
+### Abrir ou fechar um popup
+
+Você pode usar estes comandos:
+
+```js
+Makebot.open();
+```
+
+```js
+Makebot.close();
+```
+
+```js
+Makebot.toggle();
+```
+
+Você pode vincular esses comandos a um elemento de botão, por exemplo:
+
+```html
+<button onclick="Makebot.open()">Contate-nos</button>
+```
+
+## Balão
+
+Você pode obter o código HTML e Javascript do balão clicando no botão "HTML e Javascript" na aba "Compartilhar" do seu makebot.
+
+Aqui está um exemplo:
+
+```html
+<script type="module">
+  import Makebot from "https://cdn.jsdelivr.net/npm/@makebot.it/js@0/dist/web.js";
+
+  Makebot.initBubble({
+    makebot: "meu-makebot",
+    previewMessage: {
+      message: "Tenho uma pergunta para você!",
+      autoShowDelay: 5000,
+      avatarUrl: "https://avatars.githubusercontent.com/u/10166337?v=4",
+    },
+    theme: {
+      button: { backgroundColor: "#0042DA", iconColor: "#FFFFFF" },
+      previewMessage: { backgroundColor: "#ffffff", textColor: "black" },
+      chatWindow: { backgroundColor: "#ffffff" },
+    },
+  });
+</script>
+```
+
+Este código mostrará o balão e deixará uma mensagem de pré-visualização aparecer após 5 segundos.
+
+### Abra ou feche a mensagem de pré-visualização
+
+Você pode usar estes comandos:
+
+```js
+Makebot.showPreviewMessage();
+```
+
+```js
+Makebot.hidePreviewMessage();
+```
+
+### Abra ou feche o makebot
+
+Você pode usar estes comandos:
+
+```js
+Makebot.open();
+```
+
+```js
+Makebot.close();
+```
+
+```js
+Makebot.toggle();
+```
+
+Você pode vincular esses comandos a um elemento de botão, por exemplo:
+
+```html
+<button onclick="Makebot.open()">Contate-nos</button>
+```
+
+## Configuração adicional
+
+Você pode preencher previamente os valores das variáveis ​​do bot no seu código de incorporação adicionando a opção `prefilledVariables`. Aqui está um exemplo:
+
+```js
+Makebot.initStandard({
+  makebot: "meu-makebot",
+  prefilledVariables: {
+    "URL Site": "https://meusite.com.br/conta",
+    "Nome": "Paulo Silva",
+  },
+});
+```
+
+Ele preencherá previamente a variável `URL Site` com "https://meu-site/conta" e a variável `Nome` com "Paulo Silva".
+Observe que, se a URL do seu site contiver parâmetros de consulta (por exemplo, https://bot.makebot.it/meu-makebot?URL%20Site=https://meusite.com.br/conta&Nome=Paulo%20Silva), (Observe que os espaços nos nomes das variáveis ​​devem ser substituídos por %20), as variáveis ​​serão injetadas automaticamente no makebot. Portanto, você não precisa transferir manualmente os parâmetros de consulta para a configuração de incorporação do bot.
+
+Mais informações sobre variáveis: [aqui](https://docs.makebot.it/editor/variables).

package/dist/index.d.ts

@@ -1,18 +1,143 @@
-export * from "./features/commands/utils/close";
-export * from "./features/commands/utils/open";
-export * from "./features/commands/utils/showPreviewMessage";
-export * from "./features/commands/utils/toggle";
-export * from "./features/commands/utils/setInputValue";
-export * from "./features/commands/utils/unmount";
-export * from "./features/commands/utils/setPrefilledVariables";
-export * from "./features/commands/utils/hidePreviewMessage";
-export * from "./features/commands/utils/sendCommand";
-export * from "./features/commands/utils/reload";
-export * from "./features/commands/types";
-export type { BotProps } from "./components/Bot";
-export type { PopupProps } from "./features/popup/components/Popup";
-export type { BubbleProps } from "./features/bubble/components/Bubble";
-export type * from "./features/bubble/types";
-export type * from "./features/popup/types";
-export { resolveButtonSize } from "./utils/resolveBubbleButtonSize";
-//# sourceMappingURL=index.d.ts.map
+import { InputBlock } from '@makebot.it/blocks-inputs/schema';
+import { StartMakebot, StartFrom } from '@makebot.it/chat-api/schemas';
+import { LogInSession } from '@makebot.it/logs/schemas';
+import { Font } from '@makebot.it/theme/schemas';
+
+type BubbleParams = {
+    theme?: BubbleTheme;
+    previewMessage?: PreviewMessageParams;
+    autoShowDelay?: number;
+};
+type BubbleTheme = {
+    chatWindow?: ChatWindowTheme;
+    button?: ButtonTheme;
+    previewMessage?: PreviewMessageTheme;
+    placement?: "left" | "right";
+    position?: "fixed" | "static";
+};
+type ChatWindowTheme = {
+    backgroundColor?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+};
+type ButtonTheme = {
+    isHidden?: boolean;
+    size?: "medium" | "large" | `${number}px`;
+    backgroundColor?: string;
+    iconColor?: string;
+    customIconSrc?: string;
+    customCloseIconSrc?: string;
+};
+type PreviewMessageParams = {
+    avatarUrl?: string;
+    message: string;
+    autoShowDelay?: number;
+};
+type PreviewMessageTheme = {
+    backgroundColor?: string;
+    textColor?: string;
+    closeButtonBackgroundColor?: string;
+    closeButtonIconColor?: string;
+};
+
+type CommandArgs = {
+    id?: string;
+};
+type CommandData = CommandArgs & {
+    isFromMakebot: boolean;
+} & ({
+    command: "open" | "toggle" | "close" | "hidePreviewMessage" | "unmount" | "reload";
+} | ShowMessageCommandData | SetPrefilledVariablesCommandData | SetInputValueCommandData | SendCommandCommandData);
+type ShowMessageCommandData = {
+    command: "showPreviewMessage";
+    message?: Pick<PreviewMessageParams, "avatarUrl" | "message">;
+};
+type SetPrefilledVariablesCommandData = {
+    command: "setPrefilledVariables";
+    variables: Record<string, string | number | boolean>;
+};
+type SetInputValueCommandData = {
+    command: "setInputValue";
+    value: string;
+};
+type SendCommandCommandData = {
+    command: "sendCommand";
+    text: string;
+};
+
+declare const close: ({ id }?: CommandArgs) => void;
+
+declare const open: ({ id }?: CommandArgs) => void;
+
+declare const showPreviewMessage: (proactiveMessage: ShowMessageCommandData["message"] | undefined, { id }?: CommandArgs) => void;
+
+declare const toggle: ({ id }?: CommandArgs) => void;
+
+declare const setInputValue: (value: string, { id }?: CommandArgs) => void;
+
+declare const unmount: ({ id }?: CommandArgs) => void;
+
+declare const setPrefilledVariables: (variables: Record<string, string | number | boolean>, { id }?: CommandArgs) => void;
+
+declare const hidePreviewMessage: ({ id }?: CommandArgs) => void;
+
+declare const sendCommand: (text: string, { id }?: CommandArgs) => void;
+
+declare const reload: ({ id }?: CommandArgs) => void;
+
+type BotProps = {
+    id?: string;
+    makebot: string | StartMakebot | undefined;
+    isPreview?: boolean;
+    resultId?: string;
+    prefilledVariables?: Record<string, unknown>;
+    apiHost?: string;
+    wsHost?: string;
+    font?: Font;
+    progressBarRef?: HTMLDivElement;
+    startFrom?: StartFrom;
+    sessionId?: string;
+    onNewInputBlock?: (inputBlock: InputBlock) => void;
+    onAnswer?: (answer: {
+        message: string;
+        blockId: string;
+    }) => void;
+    onInit?: () => void;
+    onEnd?: () => void;
+    onNewLogs?: (logs: LogInSession[]) => void;
+    onChatStatePersisted?: (isEnabled: boolean) => void;
+    onScriptExecutionSuccess?: (message: string) => void;
+};
+
+type PopupParams = {
+    autoShowDelay?: number;
+    theme?: {
+        width?: string;
+        backgroundColor?: string;
+        zIndex?: number;
+    };
+};
+
+type PopupProps = BotProps & PopupParams & {
+    defaultOpen?: boolean;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+
+type BubbleProps = BotProps & BubbleParams & {
+    inlineStyle?: {
+        [key: string]: string;
+    };
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onPreviewMessageClick?: () => void;
+    onPreviewMessageDismissed?: () => void;
+};
+
+declare const resolveButtonSize: (size: NonNullable<NonNullable<BubbleProps["theme"]>["button"]>["size"], { isHidden }?: {
+    isHidden?: boolean;
+}) => `${number}px`;
+
+export { type BotProps, type BubbleParams, type BubbleProps, type BubbleTheme, type ButtonTheme, type ChatWindowTheme, type CommandArgs, type CommandData, type PopupParams, type PopupProps, type PreviewMessageParams, type PreviewMessageTheme, type SendCommandCommandData, type SetInputValueCommandData, type SetPrefilledVariablesCommandData, type ShowMessageCommandData, close, hidePreviewMessage, open, reload, resolveButtonSize, sendCommand, setInputValue, setPrefilledVariables, showPreviewMessage, toggle, unmount };

package/dist/index.js

@@ -1,2 +1 @@
-// v0.9.11
 var s=({id:o}={})=>{let e={isFromMakebot:!0,command:"close",id:o};window.postMessage(e)};var r=({id:o}={})=>{let e={isFromMakebot:!0,command:"open",id:o};window.postMessage(e)};var p=(o,{id:e}={})=>{let m={isFromMakebot:!0,command:"showPreviewMessage",message:o,id:e};window.postMessage(m)};var g=({id:o}={})=>{let e={isFromMakebot:!0,command:"toggle",id:o};window.postMessage(e)};var u=(o,{id:e}={})=>{let m={isFromMakebot:!0,command:"setInputValue",value:o,id:e};window.postMessage(m)};var f=({id:o}={})=>{let e={isFromMakebot:!0,command:"unmount",id:o};window.postMessage(e)};var c=(o,{id:e}={})=>{let m={isFromMakebot:!0,command:"setPrefilledVariables",variables:o,id:e};window.postMessage(m)};var l=({id:o}={})=>{let e={isFromMakebot:!0,command:"hidePreviewMessage",id:o};window.postMessage(e)};var y=(o,{id:e}={})=>{let m={isFromMakebot:!0,command:"sendCommand",text:o,id:e};window.postMessage(m)};var D=({id:o}={})=>{let e={isFromMakebot:!0,command:"reload",id:o};window.postMessage(e)};var t=(o,{isHidden:e=!1}={})=>e?"0px":o==="large"?"64px":o==="medium"||!o?"48px":typeof o=="string"&&/^\d+px$/.test(o.trim())?o.trim():(console.warn("[Makebot] Tamanho de bot\xE3o inv\xE1lido. Use 'm\xE9dio', 'grande' ou um valor em pixels expl\xEDcita (ex.: '52px')."),"48px");export{s as close,l as hidePreviewMessage,r as open,D as reload,t as resolveButtonSize,y as sendCommand,u as setInputValue,c as setPrefilledVariables,p as showPreviewMessage,g as toggle,f as unmount};