AIAnswer

<a-i-answer 
    componentId="AIAnswerComponent" 
    :react="{
        and: ['SearchBox']
    }"
/>

<template>
  <a-i-answer
    componentId="AIAnswerComponent"
    title="AI Answer"
    placeholder="Ask something..."
    :react="{
      and: ['AIAnswer'],
    }"
    :onData="handleData"
    :renderError="renderError"
    :showVoiceInput="true"
    :showIcon="true"
    iconPosition="left"
    :enterButton="true"
    :showFeedback="true"
    :a-i-config="{
        docTemplate: '${source.text} is ${source.summary} with url as ${source.url}',
        queryTemplate: 'Answer the following: ${value}',
        topDocsForContext: 7,
        maxTokens: 4000,
        systemPrompt: "You're a helpful assistant.",
      }"
    :showSourceDocuments="true"
    :renderSourceDocument="function (obj){
        return obj.original_title;
    }"
	:onSourceClick="function(sourceObj){
        // perform any side effects
    }"
	triggerOn="question"      // or "question", "manual" (default is always)
    :renderTriggerMessage="End your query with a question mark (?)"
  >
    <template #render"{ loading, data, error }">
        // return custom html
    </template>  
    <template #icon>
        <span>🚀</span>
    </template>
    <template #renderError="error, handleRetry">
       // your custom html       
    </template>
    <template #renderEnterButton="onEnterButtonClick">
        return <button onClick={onEnterButtonClick}>Ask me!</button>
    </template>    
  </a-i-answer>
</template>

    <AIAnswer            
        id="ai-component"
        enterButton={true}
    />

<AIAnswer
    id="ai-component"
    :showSourceDocuments="true"
    renderSourceDocument={(obj) => {
            return obj.original_title;
        }
    }  
    onSourceClick={function (srcObj){
        // perform any side effects
    }}         
>
    <template #renderSourceDocument="obj">
        <div>{{obj.original_title}} 🔍</div>
    </template>
</AIAnswer>

### onSourceClick
| Type | Optional |
|------|----------|
|  `Function` |   Yes   |
callback to handle side-effects when a source button is clicked. Accepts a `sourceObj` param associated with the source button clicked.
```jsx
    <AIAnswer
        id="ai-component"
        :showSourceDocuments="true"
        renderSourceDocument={(obj) => {
                return obj.original_title;
            }
        }  
        onSourceClick={function (srcObj){
            // perform any side effects
        }}         
    />

- `manual` - AI answer is shown when triggered using the `askButton` or clicking the first suggestion item(`renderTriggerMessage`).
- `question` - AI answer is shown when the user searches for a question.
- `always` - AI answer is always shown for every query.

    <AIAnswer
        id="ai-component"
        triggerOn="manual"      
    />

<AIAnswer
    id="ai-component"
    triggerOn="manual"     
    :renderTriggerMessage={End your query with a question mark (?)} // string or slot-scope
>
    <template #renderTriggerMessage>
        ⁇ End your query with a question mark (?) 🚨
    </template>
</Answer>

### getMicInstance

| Type | Optional |
|------|----------|
|  `Function` |   Yes   |

You can pass a callback function to get the instance of `SpeechRecognition` object, which can be used to override the default configurations.


### onData

| Type | Optional |
|------|----------|
|  `Function` |   Yes   |

You can pass a callback function to listen for the changes in suggestions. The function receives `data`, `rawData`, `loading` and `error` as a single parameter object.

```jsx
    <a-i-answer
        componentId="AIAnswerComponent"
        // ... other props ...
        onData = "({
            data,
            rawData,        
            loading,
            error
        }) =>{
                // do something with the updated properties
        }"
    />

<a-i-answer
	componentId="a-i-answer"
>
  <template #render="{ loading, data, error }"
  >
	<div v-if="loading">loading...</div>
	<pre v-else-if="error">{{ JSON.stringify(error) }}</pre>
	<div
		v-else-if="data && Array.isArray(data)"
		style="width: 80%; margin: 0 auto; padding: 20px"
	>
		<div
			v-for="(message, index) in data"
			:key="index"
			:style="{
				display: 'flex',
				justifyContent: message.role === 'user' ? 'flex-end' : 'flex-start',
			}"
		>
			<div :style="getMessageStyle(message)">
				{{ message.content }}
			</div>
		</div>
	</div>
  </template>
</a-i-answer>

<template>
	<a-i-answer :render="render" />
</template>
<script>
	export default {
		name: 'app',
		methods: {
			render({
				error,
				loading,
				data
			}) {...},
		},
	};
</script>

<a-i-answer>
    <template #icon>
        <span>🚀</span>
    </template>
</a-i-answer>

  <template #renderMic="{ handleClick, status }">
      <div v-if="status === `ACTIVE`">
          <img src="/active_mic.png" onClick={handleClick} />
      </div>
      <div v-if="status === `DENIED`">
          <img src="/denied_mic.png" onClick={handleClick} />
      </div>
      <div v-if="status === `STOPPED`">
          <img src="/mute_mic.png" onClick={handleClick} />
      </div>
      <div v-if="typeof status === `undefined`">
          <img src="/inactive_mic.png" onClick={handleClick} />
      </div>
  </template>

<template v-slot:renderError="errorParam, handleRetry">
	<div>{{ JSON.stringify(errorParam) }}</div>
	<button v-on:click="handleRetry">fff</button>
</template> 

    <a-i-answer
        componentId="AIAnswer"
    >
        <template #renderEnterButton="onClickCB">
            <button onClick={onClickCb}>Ask me!</button>
        </template>
    </a-i-answer>