Search/Ask AI Web Component

Overview

The ai12z Search/Ask web component allows seamless integration of AI-powered search capabilities into your HTML pages. This component is loaded from a Content Delivery Network (CDN) and can be customized through a variety of properties.

The Search Web component, that loads from the CDN using the ai12z search web component

How to Use

Add the Required Script
Insert the following script and stylesheet in the head section of your HTML:

<script
  type="module"
  src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
/>

Implement the Component
You can use the <ai12z-cta> tag to include the search component in your HTML. This tag supports customization through several attributes and slots.

Example Code

<html>
  <head>
    <script
      type="module"
      src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
    />
  </head>
  <body>
    <div>
      <ai12z-cta data-key="your_api_key_here"></ai12z-cta>
    </div>
    <!-- Style customization example, place after the `ai12z-cta tag to overide the style -->
    <style>
      ai12z-cta {
        --ai12z-font-family: "Inter", sans-serif;
        --ai12z-font-size: 16px;

        --ai12z-primary-color: rgb(165 180 252);
        --ai12z-secondary-color: #64748b;

        --ai12z-heading-color: rgb(51 65 85);
        --ai12z-heading-font-size: 1.2rem;

        --ai12z-input-placeholder-color: rgb(148 163 184);
        --ai12z-input-placeholder-font-size: 1.1rem;

        --ai12z-followup-color: rgb(107 114 128);
        --ai12z-followup-font-size: 1rem;
        --ai12z-followup-bg-color: rgb(30 64 175);

        --ai12z-category-font-color: #2a2727;
        --ai12z-category-font-size: medium;

        --ai12z-search-result-title-color: #111827;
        --ai12z-search-result-title-font-size: 0.875rem;

        --ai12z-search-result-description-color: rgb(107 114 128);
        --ai12z-search-result-description-font-size: 0.75rem;

        --ai12z-bubble-background: rgb(241 245 249);
        --ai12z-bubble-font-color: rgb(15 23 42);
        --ai12z-bubble-font-size: 1.1rem;

        --ai12z-button-font-color: rgb(51 65 85);
        --ai12z-button-font-size: 1rem;

        --ai12z-font-color: rgb(51 65 85);
        --ai12z-font-mute: #64748b;
        --ai12z-border-color: rgba(59, 130, 246, 0.5);
        --ai12z-hover-button-color: rgb(165 180 252);
        --ai12z-hover-bg-color: rgb(249 250 251);

        --ai12z-feedback-selected: rgb(55 65 81);
        --ai12z-feedback-color: rgb(107 114 128);

        --ai12z-dialog-margin: 3rem 0 0 0;
      }
    </style>
  </body>
</html>

Customization Options

The control contains following properties to customize the page.

Property	Description	Example	Default
data-key (Required)	API key from your ai12z project settings	data-key="123456"
data-mode (Optional)	Server to use `dev` or `prod` or `local`	data-mode="prod"	`prod`
heading (Optional)	Text displayed above the control.	heading="Search Here 1"	empty
button-text (Optional)	Custom text for the button.	button-text="Ask me"	`Ask AI`
help-text (Optional)	Helper text displayed in the search input.	help-text="Type your question here..."	`Enter text to get started`
no-results-text(Optional)	allows us to customize the no results found text	no-results-text="No results found..."	`No results found...`
auto-search (Optional)	If true, returns search results as you type.	auto-search="true"	`true`
placeholder (Optional)	allows us to customize the placeholder text	placeholder="Enter your question "	empty
categorize (Optional)	If true, output will be organized by category if categories are set up.	`true	`true`
follow-up-label (Optional)	Label for follow-up questions	follow-up-label="Another question "	`Do you have a follow up question?`
clear-memory (Optional)	If true, clears the search history upon closing the dialog	clear-memory="true"	`true`
image-upload (Optional)	Enable upload icon	image-upload="true"	`true`
enable-mobile-view (Optional)	If true, on mobile view, it occupies entire width of the screen	`true`	enable-mobile-view="false"

Privacy Link (Optional)

To include a privacy policy link, use the <privacy> tag with a custom slot within the <ai12z-cta> element:

<ai12z-cta data-key="your_api_key_here">
  <div slot="custom-privacy">
    Privacy Statement
    <a href="https://ai12z.com/privacy-policy/" target="_blank"
      >Click to view</a
    >
  </div>
</ai12z-cta>

CTA (Optional)

If cta tag exists the standard search control will be replaced with the html in the cta tag

<ai12z-cta data-key="your_api_key_here" heading="">
  <div slot="cta">
    <img
      style="width: 20px; cursor: pointer"
      src="https://cdn.ai12z.net/assets/web/magnifying-glass-solid.svg"
      alt="Search"
    />
  </div>
</ai12z-cta>

Custom CSS Properties

Property	Description	Default
--ai12z-font-family	Font Family	--ai12z-font-family: "Inter", sans-serif;
--ai12z-primary-color	Primary Font color	--ai12z-primary-color: rgb(165 180 252);
--ai12z-secondary-color	Secondary Font color	--ai12z-secondary-color: #64748b;
--ai12z-font-size	Primary Font size	--ai12z-font-size:16px;
--ai12z-font-mute	Font color of the custom message forexample: There is no results.	--ai12z-font-mute: #64748b;
--ai12z-heading-color	Customize the heading color like search here	--ai12z-heading-color: #64748b;
--ai12z-heading-font-size	Customize the heading font size	--ai12z-heading-font-size:1rem;
--ai12z-input-placeholder-color	Customize the placeholder test color of the input field	--ai12z-input-placeholder-color: rgb(148 163 184);
--ai12z-input-placeholder-font-size	Customize the font size of the placeholder text in the input field	--ai12z-input-placeholder-font-size:1.1rem;
--ai12z-followup-color	Customize the followup label text color	--ai12z-followup-color:rgb(107 114 128);
--ai12z-followup-font-size	Customize the font size of the followup text	--ai12z-followup-font-size: 1rem;
--ai12z-followup-bg-color	Customize the bg color of the followup checkbox color	--ai12z-followup-bg-color:rgb(30 64 175);
--ai12z-border-color	Border color of the input field	--ai12z-border-color: rgba(59, 130, 246, 0.5);
--ai12z-hover-button-color	Color of the button when hover	--ai12z-hover-button-color:rgb(165 180 252);
--ai12z-hover-bg-color	Color of the list of Search History when hover	--ai12z-hover-bg-color: rgb(249 250 251);
--ai12z-bubble-background	Background color of the bubble chat	--ai12z-bubble-background:rgb(241 245 249);
--ai12z-feedback-selected	Color of the thumbs when selected	--ai12z-feedback-selected: rgb(55 65 81);
--ai12z-feedback-color	Color of the thumbs up and down	--ai12z-feedback-color: rgb(107 114 128);
--ai12z-font-description	Font color of the description on the auto search results	--ai12z-font-description:rgb(107 114 128);
--ai12z-font-search-text	Font color of the title on the auto search results	--ai12z-font-search-text : #111827;
--ai12z-dialog-margin	Position of the modal content	--ai12z-dialog-margin:3rem 0 0 0;
--ai12z-category-font-color	Customize the color of the category text	--ai12z-category-font-color: #2a2727;
--ai12z-category-font-size	Customize the size of the category text	--ai12z-category-font-size: medium;
--ai12z-search-result-title-color	Customize the color of the title which shows in the search results	--ai12z-search-result-title-color: #111827;
--ai12z-search-result-title-font-size	Customize the size of the title which shows in the search results	--ai12z-search-result-title-font-size: 0.875rem;
--ai12z-search-result-description-color	Customize the color of the description text which shows in the search results	--ai12z-search-result-description-color: rgb(107 114 128);
--ai12z-search-result-description-font-size	Customize the size of the description text which shows in the search results	--ai12z-search-result-description-font-size: 0.75rem;
--ai12z-bubble-font-color	customize the color of the bubble text	--ai12z-bubble-font-color: rgb(15 23 42);
--ai12z-bubble-font-size	Customize the size of the bubble text	--ai12z-bubble-font-size: 1.1rem;
--ai12z-button-font-color	Customize the button font color Example: ASK AI	--ai12z-button-font-color: rgb(51 65 85);
--ai12z-button-font-size	Customize the button font size	--ai12z-button-font-size: 1rem;

Events

The following events emitted by the component. You can subscribe to these events to execute custom logic in response to specific actions or state changes within the component.

1. `errored`

Description:

Emitted when an error occurs within the component. This event provides error details that can be used for logging or displaying error messages to the user.

Usage Example:

// Assuming 'myComponent' is a reference to your component
myComponent.addEventListener("errored", (event) => {
  console.error("An error occurred:", event.detail)
})

Explanation:

Listener: Attach an event listener to the errored event.
Event Object: The callback function receives an event object.
Error Details: Access the error information via event.detail.

2. `buttonClicked`

Description:

Emitted when a button within the component is clicked. Useful for triggering actions in response to user interactions.

Usage Example:

myComponent.addEventListener("buttonClicked", (event) => {
  console.log("Button was clicked:", event.detail)
  // You can access additional data from event.detail if provided
})

Explanation:

User Interaction: Respond to button clicks inside the component.
Custom Data: event.detail contains information about which button was clicked.

3. `messageSent`

Description:

Emitted when the component sends a message. This can be used to track outgoing messages or to update the UI accordingly.

Usage Example:

myComponent.addEventListener("messageSent", (event) => {
  console.log("Message sent:", event.detail)
  // Update message list or notify other components
})

Explanation:

Messaging Logic: Useful in chat applications or components that handle communication.
Event Data: event.detail contains the message content or metadata.

4. `messageReceived`

Description:

Emitted when the component receives a message. Allows you to handle incoming messages and update the interface or state.

Usage Example:

myComponent.addEventListener("messageReceived", (event) => {
  console.log("Message received:", event.detail)
  // Display the message or process it as needed
})

Explanation:

Incoming Messages: Essential for handling data received from external sources or services.
Processing Data: Utilize event.detail to access message content.

5. `open`

Description:

Emitted when the component is opened. Ideal for setting up resources or initializing state when the component becomes active.

Usage Example:

myComponent.addEventListener("open", () => {
  console.log("Component has been opened.")
  // Initialize data or start animations
})

Explanation:

Lifecycle Event: Signifies that the component is ready for interaction.
Initialization: Perform setup tasks when the component opens.

6. `close`

Description:

Emitted when the component is closed or destroyed. Use this event to perform cleanup tasks or save the component's state.

Usage Example:

myComponent.addEventListener("close", () => {
  console.log("Component has been closed.")
  // Save state or release resources
})

Explanation:

Cleanup: Ideal for removing event listeners or stopping timers.
Resource Management: Ensure there are no memory leaks by cleaning up.

General Usage Notes

Event Subscription: Use the addEventListener method to subscribe to events emitted by the component.
Event Object: The event listener callback receives an event object, which may contain additional data in event.detail.
Component Reference: Replace myComponent with the actual reference to your component instance.

Example: Subscribing to Multiple Events

// Reference to your component
const myComponent = document.querySelector("my-component")

// onErrored
myComponent.addEventListener("errored", (event) => {
  console.error("Error:", event.detail)
})

// onButtonClicked
myComponent.addEventListener("buttonClicked", (event) => {
  console.log("Button clicked:", event.detail)
})

// onMessageSent
myComponent.addEventListener("messageSent", (event) => {
  console.log("Sent message:", event.detail)
})

// onMessageReceived
myComponent.addEventListener("messageReceived", (event) => {
  console.log("Received message:", event.detail)
})

// onOpen
myComponent.addEventListener("open", () => {
  console.log("Component opened")
})

// onClose
myComponent.addEventListener("close", () => {
  console.log("Component closed")
})

Tips for Handling Events

Error Handling: Always check if event.detail exists to avoid undefined errors.
Asynchronous Operations: If you're performing asynchronous tasks within the event handlers, consider using async/await or .then() for Promises.
Unsubscribing Events: If necessary, remove event listeners using removeEventListener to prevent memory leaks.

// Removing an event listener
const onOpenHandler = () => {
  console.log("Component opened")
}

myComponent.addEventListener("open", onOpenHandler)

// Later in your code
myComponent.removeEventListener("open", onOpenHandler)

Conclusion

By subscribing to these events, you can effectively interact with the component and respond to its internal actions. This enables a more dynamic and responsive user experience.

Overview​

How to Use​

Example Code​

Customization Options​

Privacy Link (Optional)​

CTA (Optional)​

Custom CSS Properties​

Events​

1. errored​

2. buttonClicked​

3. messageSent​

4. messageReceived​

5. open​

6. close​

General Usage Notes​

Example: Subscribing to Multiple Events​

Tips for Handling Events​

Conclusion​

Overview

How to Use

Example Code

Customization Options

Privacy Link (Optional)

CTA (Optional)

Custom CSS Properties

Events

1. `errored`

2. `buttonClicked`

3. `messageSent`

4. `messageReceived`

5. `open`

6. `close`

General Usage Notes

Example: Subscribing to Multiple Events

Tips for Handling Events

Conclusion