diff --git a/frontend/src/components/experimenter/experimenter_panel.scss b/frontend/src/components/experimenter/experimenter_panel.scss index 403212d9..ab23a080 100644 --- a/frontend/src/components/experimenter/experimenter_panel.scss +++ b/frontend/src/components/experimenter/experimenter_panel.scss @@ -92,5 +92,17 @@ .action-bar { @include common.flex-row; - justify-content: end; + @include typescale.label-small; + gap: common.$spacing-small; + justify-content: space-between; +} + +.checkbox-wrapper { + @include common.flex-row-align-center; + gap: common.$spacing-small; + overflow-wrap: break-word; + + md-checkbox { + flex-shrink: 0; + } } \ No newline at end of file diff --git a/frontend/src/components/experimenter/experimenter_panel.ts b/frontend/src/components/experimenter/experimenter_panel.ts index 067c0213..4326e4d6 100644 --- a/frontend/src/components/experimenter/experimenter_panel.ts +++ b/frontend/src/components/experimenter/experimenter_panel.ts @@ -5,6 +5,8 @@ import '../../pair-components/tooltip'; import "./experimenter_data_editor"; import './experimenter_manual_chat'; +import '@material/web/checkbox/checkbox.js'; + import {MobxLitElement} from '@adobe/lit-mobx'; import {CSSResultGroup, html, nothing} from 'lit'; import {customElement, state} from 'lit/decorators.js'; @@ -182,6 +184,15 @@ export class Panel extends MobxLitElement { stageId, {...mediator, prompt}, index ); }; + const updateJSON = () => { + const responseConfig = { + ...mediator.responseConfig, + isJSON: !mediator.responseConfig.isJSON, + }; + this.mediatorEditor.updateMediator( + stageId, {...mediator, responseConfig}, index + ); + }; return html`
@@ -199,6 +210,17 @@ export class Panel extends MobxLitElement { >
+
+ + +
+ Parse as JSON +
+
response)
+
+ If JSON parsing enabled: Make sure to + include appropriate instructions/examples in your prompt to + avoid parsing errors (if the specified message field is non-empty, + its contents will be turned into a chat message). + If disabled: non-empty responses will be turned into messages. +
- Parse mediator response as JSON (tip: include appropriate - instructions/examples in prompt so that valid JSON is returned) + Parse mediator response as JSON
${!config.isJSON ? nothing : html` diff --git a/frontend/src/services/mediator.editor.ts b/frontend/src/services/mediator.editor.ts index 60a40496..9555d90a 100644 --- a/frontend/src/services/mediator.editor.ts +++ b/frontend/src/services/mediator.editor.ts @@ -29,6 +29,7 @@ export class MediatorEditor extends Service { // Experiment ID @observable experimentId: string|null = null; // Stage ID to chat config + // TODO: Map from stage ID to MediatorConfig list? @observable configMap: Record = {}; setExperimentId(id: string) { diff --git a/functions/src/stages/chat.triggers.ts b/functions/src/stages/chat.triggers.ts index 2be02012..c7796865 100644 --- a/functions/src/stages/chat.triggers.ts +++ b/functions/src/stages/chat.triggers.ts @@ -66,9 +66,22 @@ export const createMediatorMessage = onDocumentCreated( const response = await getGeminiAPIResponse(apiKeys.geminiKey, prompt); // Add mediator message if non-empty - const parsed = JSON.parse(response.text); - const isJSON = mediator.responseConfig.isJSON; - const message = isJSON ? (parsed[mediator.responseConfig.messageField] ?? '') : response.text; + let message = response.text; + let parsed = ''; + + if (mediator.responseConfig.isJSON) { + // Reset message to empty before trying to fill with JSON response + message = ''; + + try { + // TODO: Hack to get rid of markdown ticks surrounding {} ? + parsed = JSON.parse(response.text); + } catch { + // Response is already logged in console during Gemini API call + console.log('Could not parse JSON!'); + } + message = parsed[mediator.responseConfig.messageField] ?? ''; + } if (message.trim() === '') break; mediatorMessages.push({ mediator, parsed, message });