Ask — UI Customization

Change the headings, the parts and the order of the Ask page, and choose when each part shows.

The quick start writes the page with the SDK's template helpers. Below we change the text they write, add a notice under every answer, and then take over the HTML. Last, visible-when decides when each part shows.

You need a working Ask page first. See Ask — Quick Start.

How the templates build the page

Two functions in MisoClient.ui.defaults.ask.templates return the HTML:

The quick start puts root() in the page. Give the SDK your version of followUp with useTemplates on client.ui.asks, the context. A change that belongs on every answer goes into both templates.

Since 1.12.5

Change the headings

Pass your own text in phrases, to both templates:

const templates = MisoClient.ui.defaults.ask.templates;
const phrases = {
  question: "Your question",
  sources: "Sources",
  followUpQuestions: "Ask next",
};

client.ui.asks.useTemplates({
  followUp: (args) => templates.followUp({ ...args, phrases }),
});

const root = document.querySelector("#miso-ask-combo");
root.innerHTML = templates.root({ phrases });

Keep ...args. It carries parentQuestionId, which ties each follow-up answer to its question.

relatedResources is in root() only.

Add or remove a part

A template returns a string, so you can change the string before it goes into the page. This adds a notice under the feedback buttons of every answer:

const templates = MisoClient.ui.defaults.ask.templates;

function addNotice(html) {
  return html.replace(
    "</miso-feedback>",
    "</miso-feedback>" +
    '<p class="my-notice">AI answers can contain mistakes. Check the sources.</p>'
  );
}

client.ui.asks.useTemplates({
  followUp: (args) => addNotice(templates.followUp(args)),
});

const root = document.querySelector("#miso-ask-combo");
root.innerHTML = addNotice(templates.root());

To remove a part, replace its element with an empty string. This removes the feedback buttons:

function removeFeedback(html) {
  return html.replace("<miso-feedback></miso-feedback>", "");
}

Pass it to both templates, the same way as addNotice.

Write the HTML yourself

To change the order, start from the HTML that root() returns. Print it in the browser console on a page that loads the SDK:

console.log(MisoClient.ui.defaults.ask.templates.root());

Put the HTML in the page, inside the container, and edit it there. Then remove the root.innerHTML line from your script. This version shows the sources above the answer, and leaves out the thoughts box and the related articles:

<div id="miso-ask-combo" class="miso-ask-combo">
  <section class="miso-ask-combo__section miso-ask-combo__question">
    <miso-ask class="miso-ask-combo__query-container miso-circled-citation-index" logo="false">
      <miso-query></miso-query>
    </miso-ask>
  </section>
  <section class="miso-ask-combo__section miso-ask-combo__answer">
    <miso-ask class="miso-ask-combo__question-container miso-circled-citation-index" visible-when="ready" logo="false">
      <div class="miso-ask-combo__phrase miso-ask-combo__question-phrase">You asked...</div>
      <miso-question></miso-question>
    </miso-ask>
    <miso-ask class="miso-ask-combo__sources-container miso-circled-citation-index" visible-when="nonempty" logo="false">
      <h3 class="miso-ask-combo__phrase miso-ask-combo__sources-phrase">Sources</h3>
      <miso-sources></miso-sources>
    </miso-ask>
    <miso-ask class="miso-ask-combo__answer-container miso-circled-citation-index" visible-when="ready" logo="false">
      <miso-answer></miso-answer>
      <miso-feedback></miso-feedback>
    </miso-ask>
    <miso-ask class="miso-ask-combo__follow-up-questions-container miso-circled-citation-index" visible-when="nonempty" logo="false">
      <h3 class="miso-ask-combo__phrase miso-ask-combo__follow-up-questions-phrase">Related questions you can explore</h3>
      <miso-follow-up-questions></miso-follow-up-questions>
    </miso-ask>
  </section>
  <miso-follow-ups id="miso-ask-combo__follow-ups" class="miso-ask-combo__follow-ups"></miso-follow-ups>
</div>

Keep these when you edit:

Follow-up answers still come from followUp(). To change their order too, give useTemplates a function that returns your HTML. Put parent-question-id="${parentQuestionId}" on each <miso-ask> in it, as followUp() does.

Show a part at the right moment

The visible-when attribute shows an element only in the states it names. Put it on a <miso-ask>, or on an element inside one. The templates use it on each part. The answer has visible-when="ready", so it stays hidden until the answer starts to arrive. The query box of a follow-up has visible-when="initial loading", so it hides when its answer arrives.

• Separate values with spaces to show the element in any of them: visible-when="initial loading".
• Join a state to empty or nonempty with + to need both: visible-when="ready+empty".
• Only the Miso elements that show data count toward empty and nonempty. The query box and the buttons do not.
• The SDK shows the element with display: block !important. To lay it out as a flex row or a grid, put visible-when on a wrapper around it.

The notice from Add or remove a part shows as soon as the answer starts. To show it only when the answer is complete, add visible-when="done":

<p class="my-notice" visible-when="done">AI answers can contain mistakes. Check the sources.</p>

To show a message when a question fails, add this to the answer section:

<miso-ask visible-when="erroneous" logo="false">
  <miso-error></miso-error>
</miso-ask>

If it does not work

Next

• Sources and Related Resources — where the links open, the date format, and the fields and layout of each list.
• Citation Links — the class, the attributes and the tooltip of each citation.
• Events — run your own code at each step of a question.