feat: Allow customizing the responses, flows in Captain (#11385)
- Ability to provide custom instructions to captain <img width="1107" alt="Screenshot 2025-04-28 at 6 11 43 PM" src="https://github.com/user-attachments/assets/f94cbccc-b4d8-48fd-b6b9-55524129bc50" />
This commit is contained in:
Pranav
@@ -76,9 +76,12 @@ const handleAction = ({ action, value }) => {
|
||||
<template>
|
||||
<CardLayout>
|
||||
<div class="flex justify-between w-full gap-1">
|
||||
<span class="text-base text-n-slate-12 line-clamp-1">
|
||||
<router-link
|
||||
:to="{ name: 'captain_assistants_edit', params: { assistantId: id } }"
|
||||
class="text-base text-n-slate-12 line-clamp-1 hover:underline transition-colors"
|
||||
>
|
||||
{{ name }}
|
||||
</span>
|
||||
</router-link>
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
v-on-clickaway="() => toggleDropdown(false)"
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
import { ref } 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 => ({
|
||||
role: message.sender,
|
||||
content: message.content,
|
||||
}));
|
||||
};
|
||||
|
||||
const resetConversation = () => {
|
||||
messages.value = [];
|
||||
newMessage.value = '';
|
||||
};
|
||||
|
||||
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',
|
||||
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-lg p-4 border border-n-slate-4 text-n-slate-11"
|
||||
>
|
||||
<div class="mb-4">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h3 class="text-lg font-medium">
|
||||
{{ t('CAPTAIN.PLAYGROUND.HEADER') }}
|
||||
</h3>
|
||||
<NextButton
|
||||
ghost
|
||||
size="small"
|
||||
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 bg-n-solid-1 outline outline-n-container rounded-lg p-3"
|
||||
>
|
||||
<input
|
||||
v-model="newMessage"
|
||||
class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0"
|
||||
:placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
|
||||
@keyup.enter="sendMessage"
|
||||
/>
|
||||
<NextButton
|
||||
ghost
|
||||
size="small"
|
||||
: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>
|
||||
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, watch, nextTick } from 'vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
|
||||
const props = defineProps({
|
||||
messages: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const messageContainer = ref(null);
|
||||
|
||||
const { t } = useI18n();
|
||||
const { formatMessage } = useMessageFormatter();
|
||||
|
||||
const isUserMessage = sender => sender === 'user';
|
||||
|
||||
const getMessageAlignment = sender =>
|
||||
isUserMessage(sender) ? 'justify-end' : 'justify-start';
|
||||
|
||||
const getMessageDirection = sender =>
|
||||
isUserMessage(sender) ? 'flex-row-reverse' : 'flex-row';
|
||||
|
||||
const getAvatarName = sender =>
|
||||
isUserMessage(sender)
|
||||
? t('CAPTAIN.PLAYGROUND.USER')
|
||||
: t('CAPTAIN.PLAYGROUND.ASSISTANT');
|
||||
|
||||
const getMessageStyle = sender =>
|
||||
isUserMessage(sender)
|
||||
? 'bg-n-strong text-n-white'
|
||||
: 'bg-n-solid-iris text-n-slate-12';
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick();
|
||||
if (messageContainer.value) {
|
||||
messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.messages.length, scrollToBottom);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="messageContainer" class="flex-1 overflow-y-auto mb-4 space-y-2">
|
||||
<div
|
||||
v-for="(message, index) in messages"
|
||||
:key="index"
|
||||
class="flex"
|
||||
:class="getMessageAlignment(message.sender)"
|
||||
>
|
||||
<div
|
||||
class="flex items-start gap-1.5"
|
||||
:class="getMessageDirection(message.sender)"
|
||||
>
|
||||
<Avatar :name="getAvatarName(message.sender)" rounded-full :size="24" />
|
||||
<div
|
||||
class="max-w-[80%] rounded-lg p-3 text-sm"
|
||||
:class="getMessageStyle(message.sender)"
|
||||
>
|
||||
<div v-html="formatMessage(message.content)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isLoading" class="flex justify-start">
|
||||
<div class="flex items-start gap-1.5">
|
||||
<Avatar :name="getAvatarName('assistant')" rounded-full :size="24" />
|
||||
<div
|
||||
class="max-w-sm rounded-lg p-3 text-sm bg-n-solid-iris text-n-slate-12"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<div class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce" />
|
||||
<div
|
||||
class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce [animation-delay:0.2s]"
|
||||
/>
|
||||
<div
|
||||
class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce [animation-delay:0.4s]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user