discourse-ai/assets/javascripts/discourse/components/modal/ai-tool-test-modal.gjs
Jarek Radosz a5a39dd2ee
DEV: Clean up after #677 (#694)
Follow up to b863ddc94b

Ruby:
* Validate `summary` (the column is `not null`)
* Fix `name` validation (the column has `max_length` 100)
* Fix table annotations
* Accept missing `parameter` attributes (`required, `enum`, `enum_values`)

JS:
* Use native classes
* Don't use ember's array extensions
* Add explicit service injections
* Correct class names
* Use `||=` operator
* Use `store` service to create records
* Remove unused service injections
* Extract consts
* Group actions together
* Use `async`/`await`
* Use `withEventValue`
* Sort html attributes
* Use DButtons `@label` arg
* Use `input` elements instead of Ember's `Input` component (same w/ textarea)
* Remove `btn-default` class (automatically applied by DButton)
* Don't mix `I18n.t` and `i18n` in the same template
* Don't track props that aren't used in a template
* Correct invalid `target.value` code
* Remove unused/invalid `this.parameter`/`onChange` code
* Whitespace
* Use the new service import `inject as service` -> `service`
* Use `Object.entries()`
* Add missing i18n strings
* Fix an error in `addEnumValue` (calling `pushObject` on `undefined`)
* Use `TrackedArray`/`TrackedObject`
* Transform tool `parameters` keys (`enumValues` -> `enum_values`)
2024-06-28 08:59:51 +10:00

83 lines
2.3 KiB
Text

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { fn } from "@ember/helper";
import { on } from "@ember/modifier";
import { action } from "@ember/object";
import DButton from "discourse/components/d-button";
import DModal from "discourse/components/d-modal";
import { ajax } from "discourse/lib/ajax";
import { popupAjaxError } from "discourse/lib/ajax-error";
import I18n from "discourse-i18n";
import { jsonToHtml } from "../../lib/utilities";
export default class AiToolTestModal extends Component {
@tracked testResult;
@tracked isLoading = false;
parameterValues = {};
@action
updateParameter(name, event) {
this.parameterValues[name] = event.target.value;
}
@action
async runTest() {
this.isLoading = true;
try {
const response = await ajax(
"/admin/plugins/discourse-ai/ai-tools/test.json",
{
type: "POST",
data: JSON.stringify({
ai_tool: this.args.model.tool,
parameters: this.parameterValues,
}),
contentType: "application/json",
}
);
this.testResult = jsonToHtml(response.output);
} catch (error) {
popupAjaxError(error);
} finally {
this.isLoading = false;
}
}
<template>
<DModal
@title={{I18n.t "discourse_ai.tools.test_modal.title"}}
@closeModal={{@closeModal}}
@bodyClass="ai-tool-test-modal__body"
class="ai-tool-test-modal"
>
<:body>
{{#each @model.tool.parameters as |param|}}
<div class="control-group">
<label>{{param.name}}</label>
<input
{{on "input" (fn this.updateParameter param.name)}}
name={{param.name}}
type="text"
/>
</div>
{{/each}}
{{#if this.testResult}}
<div class="ai-tool-test-modal__test-result">
<h3>{{I18n.t "discourse_ai.tools.test_modal.result"}}</h3>
<div>{{this.testResult}}</div>
</div>
{{/if}}
</:body>
<:footer>
<DButton
@action={{this.runTest}}
@label="discourse_ai.tools.test_modal.run"
@disabled={{this.isLoading}}
class="btn-primary ai-tool-test-modal__run-button"
/>
</:footer>
</DModal>
</template>
}