From 2789201a8baac7f1a32cb4a6fe4052d082c981ca Mon Sep 17 00:00:00 2001 From: sbosse Date: Mon, 21 Jul 2025 23:36:49 +0200 Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025 --- js/ui/botui/typings/index.d.ts | 318 +++++++++++++++++++++++++++++++++ 1 file changed, 318 insertions(+) create mode 100644 js/ui/botui/typings/index.d.ts diff --git a/js/ui/botui/typings/index.d.ts b/js/ui/botui/typings/index.d.ts new file mode 100644 index 0000000..1dfb2cc --- /dev/null +++ b/js/ui/botui/typings/index.d.ts @@ -0,0 +1,318 @@ +/** + * BotUI options + * + * @interface BotUIOptions + */ +interface BotUIOptions { + /** + * Set this to true if you want to debug the underlaying Vue instance + * + * @type {boolean} + * @memberof BotUIOptions + */ + debug?: boolean; + /** + * Set this to false if you already have FontAwesome in your project and don't want it to be loaded again by BotUI. + * + * @type {boolean} + * @memberof BotUIOptions + */ + fontawesome?: boolean; + /** + * Set this to vue constructor when you use module loaded system e.g CMD or AMD. + */ + vue?: any; +} + +/** + * Message method options + * + * @interface MessageOption + */ +interface MessageOption { + /** + * Set to true if you want to show a loading state '3 animated dots'. + * Available in version >= 0.3.1 + * + * @type {boolean} + * @memberof MessageOption + */ + loading?: boolean; + /** + * Wait before showing the message. in milliseconds. + * + * @type {number} + * @memberof MessageOption + */ + delay?: number; + /** + * Either 'text' or 'embed'. + * If you set this to 'embed', BotUI will create an `iframe` element and set `content` as its `src`. + * + * @type {('text' | 'embed')} + * @memberof MessageOption + */ + type: 'text' | 'embed'; + /** + * Should be a URL if type is 'embed', text otherwise. + * + * @type {string} + * @memberof MessageOption + */ + content: string; + /** + * Should be shown aligned to right side. + * + * @type {false} + * @memberof MessageOption + */ + human?: false; + /** + * A string or array of custom CSS classes you want to be added. + * + * @type {string|string[]} + * @memberof MessageOption + */ + cssClass?: string | string[]; +} + +/** + * Actions method option + * + * @interface ActionsOption + */ +interface BaseActionsOption { + /** + * Either 'text' or 'button'. + * + * @type {('text' | 'button')} + * @memberof ActionsOption + */ + type: 'text' | 'button'; + /** + * Array of 'ButtonObject' if type is 'button'. Object of 'TextObject' otherwise. + * + * @type {ButtonObject[]|TextObject} + * @memberof ActionsOption + */ + action: ButtonObject[] | TextObject; + /** + * A string or array of custom CSS classes you want to be added. + * + * @type {string|string[]} + * @memberof ActionsOption + */ + cssClass?: string | string[]; + /** + * Should the actions sections be hidden when submitted. + * + * @type {boolean} + * @memberof ActionsOption + */ + autoHide?: boolean; + /** + * Text from action is added as a message in UI from human side. + * + * @type {boolean} + * @memberof ActionsOption + */ + addMessage?: boolean; +} + +/** + * Text action option. + * + * @interface TextObject + */ +interface TextObject { + /** + * Size of the input to show. Relies on HTML size attribute for input elements. + * + * @type {number} + * @memberof TextObject + */ + size?: number; + /** + * Could be any of the valid types for HTML input elements. e.g.: number, tel, time, date, email, etc. + * + * @type {string} + * @memberof TextObject + */ + sub_type?: string; + /** + * Pre-populates the text field. Only for 'text' type. + * + * @type {string} + * @memberof TextObject + */ + value: string; + /** + * Sets the placeholder text for the input element. + * + * @type {string} + * @memberof TextObject + */ + placeholder?: string; +} + +/** + * Button object + * + * @interface ButtonObject + */ +interface ButtonObject { + /** + * Icon to show in button. + * + * @type {string} + * @memberof ButtonObject + */ + icon?: string; + /** + * Text to show in the button. be creative! + * + * @type {string} + * @memberof ButtonObject + */ + text: string; + /** + * This is how you will identify the button when result is returned. + * + * @type {string} + * @memberof ButtonObject + */ + value: string; + /** + * A string or array of custom CSS classes you want to be added. + * + * @type {string|string[]} + * @memberof ButtonObject + */ + cssClass?: string | string[]; +} + +interface TextActionOption extends BaseActionsOption { + action: TextObject; +} + +interface ButtonActionOption extends BaseActionsOption { + action: ButtonObject[]; +} + +/** + * Result object. + * + * @interface ResultObject + */ +interface ResultObject { + /** + * 'Text' or 'Button' Type of the action it was returned from. + * + * @type {('Text' | 'Button')} + * @memberof ResultObject + */ + type: 'Text' | 'Button'; + /** + * Text in the input in case type is 'text'. If type is 'button' then its the same as 'value' in button object. + * + * @type {string} + * @memberof ResultObject + */ + value: string; + /** + * Only present if type of message is 'button'. same as the 'text' in button object. + * + * @type {string} + * @memberof ResultObject + */ + text: string; +} + +declare class BotUI { + + + constructor(id: string, opts?: BotUIOptions); + + message: { + /** + * Appends a message to UI. + * + * @param {(MessageOption | string)} message + * @returns {Promise} + */ + add(message: MessageOption | string): Promise; + /** + * Appends a message to UI. Just a shorthand to `message.add`. + * + * @param {(MessageOption | string)} message + * @returns {Promise} + */ + bot(message: MessageOption | string): Promise; + /** + * Appends a message to UI and sets the `human` to `true`. + * + * @param {(MessageOption | string)} message + * @returns {Promise} + */ + human(message: MessageOption | string): Promise; + /** + * Accepts an index of message. + * + * @param {number} index + * @returns {Promise} + */ + get(index: number): Promise; + /** + * Updates a message in UI. + * "Only content and loading property of message can updated. type of a message cannot be changed." + * + * @param {number} index + * @param {MessageOption} message + * @returns {Promise} + */ + update(index: number, message: MessageOption): Promise; + /** + * Removes a message from UI. + * + * @param {number} index + * @returns {Promise} + */ + remove(index: number): Promise; + /** + * Removes all the messages from UI. + * + * @param {number} index + * @returns {Promise} + */ + removeAll(index: number): Promise; + } + + action: { + /** + * Shows the action section. + * + * @returns {Promise} + */ + show(action: BaseActionsOption): Promise; + /** + * Hides the action section. + * + * @returns {Promise} + */ + hide(): Promise; + /** + * Shows the action section and sets the action type to text. Its a shorthand to show. + * + * @param {ActionsOption} action + * @returns {Promise} + */ + text(action: TextActionOption): Promise; + /** + * Shows the action section and sets the action type to button. Its a shorthand to show. + * + * @param {ActionsOption} action + * @returns {Promise} + */ + button(action: ButtonActionOption): Promise; + } +}