feat: Add Ask assistant behind feature flag (#9995)

Co-authored-by: Ricardo Espinoza <ricardo@n8n.io>
Co-authored-by: Milorad Filipovic <milorad@n8n.io>
This commit is contained in:
Mutasem Aldmour
2024-08-14 14:59:11 +02:00
committed by GitHub
parent e4c88e75f9
commit 5ed2a77740
70 changed files with 3414 additions and 60 deletions

View File

@@ -0,0 +1,98 @@
<script lang="ts" setup>
import { NEW_ASSISTANT_SESSION_MODAL } from '@/constants';
import Modal from '../Modal.vue';
import AssistantIcon from 'n8n-design-system/components/AskAssistantIcon/AssistantIcon.vue';
import AssistantText from 'n8n-design-system/components/AskAssistantText/AssistantText.vue';
import { useI18n } from '@/composables/useI18n';
import { useUIStore } from '@/stores/ui.store';
import type { ChatRequest } from '@/types/assistant.types';
import { useAssistantStore } from '@/stores/assistant.store';
import { useTelemetry } from '@/composables/useTelemetry';
import { useWorkflowsStore } from '@/stores/workflows.store';
const i18n = useI18n();
const uiStore = useUIStore();
const assistantStore = useAssistantStore();
const workflowsStore = useWorkflowsStore();
const telemetry = useTelemetry();
const props = defineProps<{
name: string;
data: {
context: ChatRequest.ErrorContext;
};
}>();
const close = () => {
uiStore.closeModal(NEW_ASSISTANT_SESSION_MODAL);
};
const startNewSession = async () => {
await assistantStore.initErrorHelper(props.data.context);
telemetry.track(
'User opened assistant',
{
source: 'error',
task: 'error',
has_existing_session: true,
workflow_id: workflowsStore.workflowId,
node_type: props.data.context.node.type,
error: props.data.context.error,
chat_session_id: assistantStore.currentSessionId,
},
{ withPostHog: true },
);
close();
};
</script>
<template>
<Modal width="460px" height="250px" :name="NEW_ASSISTANT_SESSION_MODAL" :center="true">
<template #header>
{{ i18n.baseText('aiAssistant.newSessionModal.title.part1') }}
<span :class="$style.assistantIcon"><AssistantIcon size="medium" /></span>
<AssistantText size="xlarge" :text="i18n.baseText('aiAssistant.assistant')" />
{{ i18n.baseText('aiAssistant.newSessionModal.title.part2') }}
</template>
<template #content>
<div :class="$style.container">
<p>
<n8n-text>{{ i18n.baseText('aiAssistant.newSessionModal.message') }}</n8n-text>
</p>
<p>
<n8n-text>{{ i18n.baseText('aiAssistant.newSessionModal.question') }}</n8n-text>
</p>
</div>
</template>
<template #footer>
<div :class="$style.footer">
<n8n-button :label="$locale.baseText('generic.cancel')" type="secondary" @click="close" />
<n8n-button
:label="$locale.baseText('aiAssistant.newSessionModal.confirm')"
@click="startNewSession"
/>
</div>
</template>
</Modal>
</template>
<style lang="scss" module>
.container {
p {
line-height: normal;
}
p + p {
margin-top: 10px;
}
}
.assistantIcon {
margin-right: var(--spacing-4xs);
}
.footer {
display: flex;
gap: 10px;
justify-content: flex-end;
}
</style>