87f5af4caa
# Pull Request Template ## Description Playground now uses v2. It was only wired to use v1. Traces get `source: playground` on langfuse when playground has been used. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. locally and specs <img width="1806" height="1276" alt="image" src="https://github.com/user-attachments/assets/41ef4eb3-52b1-4b8e-9a4f-e8510c90cb39" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published in downstream modules
132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import NextButton from 'dashboard/components-next/button/Button.vue';
|
|
import MessageList from './MessageList.vue';
|
|
import CaptainAssistant from 'dashboard/api/captain/assistant';
|
|
|
|
const { assistantId } = defineProps({
|
|
assistantId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
const messages = ref([]);
|
|
const newMessage = ref('');
|
|
const isLoading = ref(false);
|
|
|
|
const formatMessagesForApi = () => {
|
|
return messages.value.map(message => {
|
|
const payload = {
|
|
role: message.sender,
|
|
content: message.content,
|
|
};
|
|
|
|
if (message.sender === 'assistant' && message.agentName) {
|
|
payload.agent_name = message.agentName;
|
|
}
|
|
|
|
return payload;
|
|
});
|
|
};
|
|
|
|
const resetConversation = () => {
|
|
messages.value = [];
|
|
newMessage.value = '';
|
|
};
|
|
|
|
// Watch for assistant ID changes and reset conversation
|
|
watch(
|
|
() => assistantId,
|
|
(newId, oldId) => {
|
|
if (oldId && newId !== oldId) {
|
|
resetConversation();
|
|
}
|
|
}
|
|
);
|
|
|
|
const sendMessage = async () => {
|
|
if (!newMessage.value.trim() || isLoading.value) return;
|
|
|
|
const userMessage = {
|
|
content: newMessage.value,
|
|
sender: 'user',
|
|
timestamp: new Date().toISOString(),
|
|
};
|
|
messages.value.push(userMessage);
|
|
const currentMessage = newMessage.value;
|
|
newMessage.value = '';
|
|
|
|
try {
|
|
isLoading.value = true;
|
|
const { data } = await CaptainAssistant.playground({
|
|
assistantId,
|
|
messageContent: currentMessage,
|
|
messageHistory: formatMessagesForApi(),
|
|
});
|
|
|
|
messages.value.push({
|
|
content: data.response,
|
|
sender: 'assistant',
|
|
agentName: data.agent_name,
|
|
timestamp: new Date().toISOString(),
|
|
});
|
|
} catch (error) {
|
|
// eslint-disable-next-line no-console
|
|
console.error('Error getting assistant response:', error);
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col h-full rounded-xl border py-6 border-n-weak text-n-slate-11"
|
|
>
|
|
<div class="mb-8 px-6">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h3 class="text-lg font-medium">
|
|
{{ t('CAPTAIN.PLAYGROUND.HEADER') }}
|
|
</h3>
|
|
<NextButton
|
|
ghost
|
|
sm
|
|
slate
|
|
icon="i-lucide-rotate-ccw"
|
|
@click="resetConversation"
|
|
/>
|
|
</div>
|
|
<p class="text-sm text-n-slate-11">
|
|
{{ t('CAPTAIN.PLAYGROUND.DESCRIPTION') }}
|
|
</p>
|
|
</div>
|
|
|
|
<MessageList :messages="messages" :is-loading="isLoading" />
|
|
|
|
<div
|
|
class="flex items-center mx-6 bg-n-background outline outline-1 outline-n-weak rounded-xl p-3"
|
|
>
|
|
<input
|
|
v-model="newMessage"
|
|
class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0 text-n-slate-12 placeholder:text-n-slate-10"
|
|
:placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
|
|
@keyup.enter="sendMessage"
|
|
/>
|
|
<NextButton
|
|
ghost
|
|
sm
|
|
:disabled="!newMessage.trim()"
|
|
icon="i-lucide-send"
|
|
@click="sendMessage"
|
|
/>
|
|
</div>
|
|
|
|
<p class="text-xs text-n-slate-11 pt-2 text-center">
|
|
{{ t('CAPTAIN.PLAYGROUND.CREDIT_NOTE') }}
|
|
</p>
|
|
</div>
|
|
</template>
|