mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): Add AI Assistant support chat (#10656)

Browse Source
This commit is contained in:
Milorad FIlipović
2024-09-05 10:54:35 +02:00
committed by GitHub
parent 899b0a19ef
commit 3a8078068e
12 changed files with 223 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/design-system/src/components/AskAssistantChat/AskAssistantChat.stories.ts
View File

@@ -247,3 +247,23 @@ AssistantThinkingChat.args = {
},
loadingMessage: 'Thinking...',
};
export const WithCodeSnippet = Template.bind({});
WithCodeSnippet.args = {
user: {
firstName: 'Max',
lastName: 'Test',
},
messages: getMessages([
{
id: '58575953',
type: 'text',
role: 'assistant',
content:
'To filter every other item in the Code node, you can use the following JavaScript code snippet. This code will iterate through the incoming items and only pass through every other item.',
codeSnippet:
"node.on('input', function(msg) {\n if (msg.seed) { dummyjson.seed = msg.seed; }\n try {\n var value = dummyjson.parse(node.template, {mockdata: msg});\n if (node.syntax === 'json') {\n try { value = JSON.parse(value); }\n catch(e) { node.error(RED._('datagen.errors.json-error')); }\n }\n if (node.fieldType === 'msg') {\n RED.util.setMessageProperty(msg,node.field,value);\n }\n else if (node.fieldType === 'flow') {\n node.context().flow.set(node.field,value);\n }\n else if (node.fieldType === 'global') {\n node.context().global.set(node.field,value);\n }\n node.send(msg);\n }\n catch(e) {",
read: true,
},
]),
};

40
packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
View File

@@ -163,11 +163,16 @@ function growInput() {
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-if="message.role === 'user'" v-html="renderMarkdown(message.content)"></span>
<!-- eslint-disable-next-line vue/no-v-html -->
<span
<div
v-else
:class="$style.assistantText"
v-html="renderMarkdown(message.content)"
></span>
></div>
<div
v-if="message?.codeSnippet"
:class="$style['code-snippet']"
v-html="renderMarkdown(message.codeSnippet).trim()"
></div>
<BlinkingCursor
v-if="streaming && i === messages?.length - 1 && message.role === 'assistant'"
/>
@@ -243,20 +248,16 @@ function growInput() {
</p>
<p>
{{ t('assistantChat.placeholder.2') }}
</p>
<p>
{{ t('assistantChat.placeholder.3') }}
<InlineAskAssistantButton size="small" :static="true" />
{{ t('assistantChat.placeholder.4') }}
{{ t('assistantChat.placeholder.3') }}
</p>
<p>
{{ t('assistantChat.placeholder.5') }}
{{ t('assistantChat.placeholder.4') }}
</p>
</div>
</div>
</div>
<div
v-if="messages?.length"
:class="{ [$style.inputWrapper]: true, [$style.disabledInput]: sessionEnded }"
data-test-id="chat-input-wrapper"
>
@@ -407,8 +408,29 @@ p {
.textMessage {
display: flex;
align-items: center;
flex-direction: column;
gap: var(--spacing-xs);
font-size: var(--font-size-2xs);
word-break: break-word;
}
.code-snippet {
border: var(--border-base);
background-color: var(--color-foreground-xlight);
border-radius: var(--border-radius-base);
padding: var(--spacing-2xs);
font-family: var(--font-family-monospace);
max-height: 218px; // 12 lines
overflow: auto;
pre {
white-space-collapse: collapse;
}
code {
background-color: transparent;
font-size: var(--font-size-3xs);
}
}
.block {

47
packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap
View File

@@ -132,7 +132,7 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
<!-- eslint-disable-next-line vue/no-v-html -->
<!-- eslint-disable-next-line vue/no-v-html -->
<span
<div
class="assistantText"
>
<p>
@@ -144,9 +144,10 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
</p>
</span>
</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>
@@ -449,6 +450,7 @@ exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
</span>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>
@@ -842,13 +844,10 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
class="info"
>
<p>
I'm your Assistant, here to guide you through your journey with n8n.
I can answer most questions about building workflows in n8n.
</p>
<p>
While I'm still learning, I'm already equipped to help you debug any errors you might encounter.
</p>
<p>
If you run into an issue with a node, you'll see the
For specific tasks, you’ll see the
<button
class="button"
style="height: 18px;"
@@ -901,15 +900,33 @@ exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
</div>
</div>
</button>
button
button in the UI.
</p>
<p>
Clicking it will start a chat with me, and I'll do my best to assist you!
How can I help?
</p>
</div>
</div>
</div>
<!--v-if-->
<div
class="inputWrapper"
data-test-id="chat-input-wrapper"
>
<textarea
data-test-id="chat-input"
placeholder="Enter your response..."
rows="1"
wrap="hard"
/>
<n8n-icon-button
class="sendButton"
data-test-id="send-message-button"
disabled="true"
icon="paper-plane"
size="large"
type="text"
/>
</div>
</div>
</div>
`;
@@ -1046,7 +1063,7 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
<!-- eslint-disable-next-line vue/no-v-html -->
<!-- eslint-disable-next-line vue/no-v-html -->
<span
<div
class="assistantText"
>
<p>
@@ -1058,9 +1075,10 @@ exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
</p>
</span>
</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>
@@ -1295,7 +1313,7 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
<!-- eslint-disable-next-line vue/no-v-html -->
<!-- eslint-disable-next-line vue/no-v-html -->
<span
<div
class="assistantText"
>
<p>
@@ -1307,9 +1325,10 @@ exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
</p>
</span>
</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>