@tixae-labs/web-sdk/dist/src/app/Types/uiEngineMessageSchemas.js

Javascript Web SDK for doing WebRTC AI Voice Calls with TIXAE Agents.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FinalUIEngineResponseSchema = exports.MessageSchema = exports.MessageTypeSchema = exports.iFramePayloadSchema = exports.CarouselPayloadSchema = exports.CardPayloadSchema = exports.VisualPayloadSchema = exports.ChoicePayloadSchema = exports.ButtonModelSchema = exports.TextPayloadSchema = void 0;
exports.createUiEnginePrompt = createUiEnginePrompt;
const zod_1 = require("zod");
const zod_to_ts_1 = require("zod-to-ts");
// TextPayload Schema
const TextPayloadSchema = zod_1.z.object({
    message: zod_1.z.string().optional().describe("Message content, supports Markdown"),
});
exports.TextPayloadSchema = TextPayloadSchema;
// Button Model Schemas
const ButtonUrlPayloadSchema = zod_1.z.object({
    url: zod_1.z
        .string()
        .describe("URL to open when the button is clicked (ONLY USE URLs from the KB SEARCH TOOL NEVER MAKE UP URLs IF WHAT YOU NEED IS NOT IN THE KB SEARCH TOOL THEN DO NOT USE THIS.)"),
});
const ButtonTextPayloadSchema = zod_1.z.object({
    message: zod_1.z
        .string()
        .describe("The suggestion message to send BY THE USER when the button is clicked"),
});
const ButtonRequestSchema = zod_1.z.discriminatedUnion("type", [
    zod_1.z.object({
        type: zod_1.z.literal("open_url"),
        payload: ButtonUrlPayloadSchema,
    }),
    zod_1.z.object({
        type: zod_1.z.literal("text"),
        payload: ButtonTextPayloadSchema,
    }),
]);
const ButtonModelSchema = zod_1.z.object({
    name: zod_1.z.string().describe("Label of the button"),
    request: ButtonRequestSchema,
});
exports.ButtonModelSchema = ButtonModelSchema;
// ChoicePayload Schema
const ChoicePayloadSchema = zod_1.z.object({
    buttons: zod_1.z.array(ButtonModelSchema),
});
exports.ChoicePayloadSchema = ChoicePayloadSchema;
// VisualPayload Schema
const VisualPayloadSchema = zod_1.z.object({
    image: zod_1.z.string().describe("URL of the image"),
});
exports.VisualPayloadSchema = VisualPayloadSchema;
// Card Payload Schema
const CardPayloadSchema = zod_1.z.object({
    imageUrl: zod_1.z
        .string()
        .optional()
        .describe("(Optional) URL of the image MUST END WITH .png/.jpg/.jpeg/.webp/.gif/etc.."),
    title: zod_1.z
        .string()
        .describe("(Required) Title of the card (supports markdown)"),
    description: zod_1.z
        .object({
        text: zod_1.z.string().describe("Description of the card (supports markdown)"),
    })
        .optional(),
    buttons: zod_1.z
        .array(ButtonModelSchema)
        .optional()
        .describe("(Optional) Array of buttons for the card"),
});
exports.CardPayloadSchema = CardPayloadSchema;
// Carousel Payload Schema
const CarouselPayloadSchema = zod_1.z.object({
    cards: zod_1.z.array(CardPayloadSchema).describe("Array of card messages"),
});
exports.CarouselPayloadSchema = CarouselPayloadSchema;
// iFrame Payload Schema
const iFramePayloadSchema = zod_1.z.object({
    layout: zod_1.z
        .enum(["vertical", "horizontal"])
        .describe("whether the iframe should be adjusted to be vertical or horizontal (vertical is for videos/youtube, horizontal is for anything else)"),
    url: zod_1.z
        .string()
        .describe("URL of the iframe OR the iframe html (If its a video iframe like youtube only the URL is needed, if its a custom iframe then the whole iframe html is needed)"),
});
exports.iFramePayloadSchema = iFramePayloadSchema;
// Message Type Schema
const MessageTypeSchema = zod_1.z.enum([
    "text",
    "choice",
    "visual",
    "cardV2",
    "carousel",
    "iFrame",
]);
exports.MessageTypeSchema = MessageTypeSchema;
// Message Schema
const MessageSchema = zod_1.z.object({
    type: MessageTypeSchema.describe("Type of the message"),
    payload: zod_1.z
        .union([
        TextPayloadSchema,
        ChoicePayloadSchema,
        VisualPayloadSchema,
        CardPayloadSchema,
        CarouselPayloadSchema,
        iFramePayloadSchema,
    ])
        .describe("Payload of the message"),
});
exports.MessageSchema = MessageSchema;
// Final Response Schema
const FinalUIEngineResponseSchema = zod_1.z
    .array(MessageSchema)
    .describe("ARRAY OF MESSAGE OBJECTS AS A JSON STRING.");
exports.FinalUIEngineResponseSchema = FinalUIEngineResponseSchema;
function createUiEnginePrompt() {
    const { node } = (0, zod_to_ts_1.zodToTs)(FinalUIEngineResponseSchema, "FinalResponseSchema");
    const uiEngineTSInterfaceString = (0, zod_to_ts_1.printNode)(node);
    const uiEnginePrompt = `!! I AM YOU DEVELOPER AND YOUR OUTPUT MUST AND I REPEAT MUST BE A JSON ARRAY ACCODRING TO THE FOLLOWING OR EVERYTHING WILL BREAK !!
  --- START UI ENGINE PROMPT --- 
  ## Instructions on How to Create Dynamic UI Elements Based on Context
  
  ### Guidelines:
  1. **Output Requirements**:
      - Output must be a JSON array of objects.
      - The output **must** adhere strictly to the TypeScript schema provided.
      - Start the JSON array with "[" and end with "]".
  
  2. **General Rules**:
      - Output only JSON eliding any pre-text, post-text or explanations or any line breaks (\n) or markdown starters (\`\`\`json \`\`\`) MUST NOT BE USED. Extraneous output will cause error.
      - **URLs used within the JSON output must exclusively derive from the KB context.** If a required URL is absent from the KB, mention its unavailability explicitly.
      - **Preferred Structure**:
          - Start with a text message to initiate the conversation.
          - Follow with a card or collection of cards to showcase visuals or important points with potential call-to-action buttons. This visually anchors the conversation.
          - Include an iframe or image message, especially if you have a video URL from the search tool, to enhance engagement.
          - End with buttons or a choice message to guide the user's next steps based on the context retrieved from the KB search tool.
      - When using links for images in cards/image messages, always ensure they start with "https://" and end with a valid image extension like ".png/.jpg/.jpeg/.webp/.gif/etc.."
               
  THE FOLLOWING IS THE TYPESCRIPT SCHEMA:
  --- START TYPESCRIPT SCHEMA ---
  
  /**
  * Final response interface
  * This should be your FINAL output: AN ARRAY OF Message OBJECTS
  * @type
  */
  type FinalResponse = ${uiEngineTSInterfaceString} // ARRAY OF MESSAGE OBJECTS AS A JSON STRING.
  --- END TYPESCRIPT SCHEMA ---
  
  ### Example JSON OUTPUTS FROM YOU:
  #### Example 1:
  [{
   "type": "text",
   "payload": {
       "message": "Hello there! How can I help you today?"
   }
  }]
   
  #### Example 2:
  [{
   "type": "text",
   "payload": {
      "message": "Sure! Here's a showcase of our services in brief details:"
   }
  },
  {
   "type": "carousel",
   "payload": {
      "cards": [
          {
          "title": "Service 1",
              "description": {
                  "text": "Service 1 is a great service that helps you with your needs."
              }
          }
  ]  
  --- END UI ENGINE PROMPT ---
  ACCODRING TO THE ABOVE OBVIOUSLY THE FIRST CHARACTER OF YOUR OUTPUT MUST BE "[".`;
    return uiEnginePrompt;
}