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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

96
packages/design-system/src/components/CodeDiff/CodeDiff.stories.ts Normal file
View File

@@ -0,0 +1,96 @@
import CodeDiff from './CodeDiff.vue';
import type { StoryFn } from '@storybook/vue3';
export default {
title: 'Assistant/CodeDiff',
component: CodeDiff,
argTypes: {},
};
const methods = {};
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
CodeDiff,
},
template: '<div style="width:300px; height:100%"><code-diff v-bind="args" /></div>',
methods,
});
export const Example = Template.bind({});
Example.args = {
title: 'Lao Tzu example unified diff',
content:
'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
};
export const Empty = Template.bind({});
Empty.args = {};
export const Code = Template.bind({});
Code.args = {
title: "Fix reference to the node and remove unsupported 'require' statement.",
content:
"--- original.js\n+++ modified.js\n@@ -1,2 +1,2 @@\n-const SIGNING_SECRET = $input.first().json.slack_secret_signature;\n-const item = $('Webhook to call for Slack command').first();\n+const SIGNING_SECRET = items[0].json.slack_secret_signature;\n+const item = items[0];\n@@ -7,8 +7,6 @@\n}\n\n-const crypto = require('crypto');\n-\n const { binary: { data } } = item;\n\n if (\n@@ -22,7 +20,7 @@\n const rawBody = Buffer.from(data.data, 'base64').toString()\n \n // compute the ",
streaming: true,
};
export const StreamingTitleEmpty = Template.bind({});
StreamingTitleEmpty.args = {
streaming: true,
};
export const StreamingTitle = Template.bind({});
StreamingTitle.args = {
streaming: true,
title: 'Hello world',
};
export const StreamingContentWithOneLine = Template.bind({});
StreamingContentWithOneLine.args = {
streaming: true,
title: 'Hello world',
content: '@@ -1,7 +1,6 @@\n-The Way that can be told of is not th',
};
export const StreamingContentWithMultipleLines = Template.bind({});
StreamingContentWithMultipleLines.args = {
streaming: true,
title: 'Hello world',
content:
'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can b',
};
export const StreamingWithManyManyLines = Template.bind({});
StreamingWithManyManyLines.args = {
title: 'Lao Tzu example unified diff',
content:
'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
streaming: true,
};
export const Replaced = Template.bind({});
Replaced.args = {
title: 'Lao Tzu example unified diff',
content:
'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
replaced: true,
};
export const Replacing = Template.bind({});
Replacing.args = {
title: 'Lao Tzu example unified diff',
content:
'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
replacing: true,
};
export const Error = Template.bind({});
Error.args = {
title: 'Lao Tzu example unified diff',
content:
'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
error: true,
};

207
packages/design-system/src/components/CodeDiff/CodeDiff.vue Normal file
View File

@@ -0,0 +1,207 @@
<script setup lang="ts">
import parseDiff from 'parse-diff';
import { computed } from 'vue';
import { useI18n } from 'n8n-design-system/composables/useI18n';
const MIN_LINES = 4;
interface Props {
title: string;
content: string;
replacing: boolean;
replaced: boolean;
error: boolean;
streaming: boolean;
}
type Line =
| parseDiff.Change
| {
type: 'filler' | 'seperator';
content: string;
};
const props = withDefaults(defineProps<Props>(), {
title: '',
content: '',
replacing: false,
replaced: false,
error: false,
streaming: false,
});
const emit = defineEmits<{
replace: [];
undo: [];
}>();
const { t } = useI18n();
const diffs = computed(() => {
const parsed = parseDiff(props.content);
const file = parsed[0] ?? { chunks: [] };
const lines: Line[] = file.chunks.reduce((accu: Line[], chunk, i) => {
const changes: Line[] = chunk.changes.map((change) => {
let content = change.content;
if (change.type === 'add' && content.startsWith('+')) {
content = content.replace('+', '');
} else if (change.type === 'del' && content.startsWith('-')) {
content = content.replace('-', '');
}
return {
...change,
content,
};
});
if (i !== file.chunks.length - 1) {
changes.push({
type: 'seperator',
content: '...',
});
}
return [...accu, ...changes];
}, []);
const len = lines.length;
// why programmatic and not min height? to ensure numbers border goes all the way down.
if (len <= MIN_LINES) {
for (let i = 0; i < MIN_LINES - len; i++) {
lines.push({
type: 'filler',
content: '',
});
}
}
return lines;
});
</script>
<template>
<div :class="$style.container">
<div :class="$style.title">
{{ title }}
</div>
<div :class="$style.diffSection">
<div v-for="(diff, i) in diffs" :key="i" :class="$style.diff">
<div :class="$style.lineNumber">
<!-- ln1 is line number in original text -->
<!-- ln2 is line number in updated text -->
{{ diff.type === 'normal' ? diff.ln2 : diff.type === 'add' ? diff.ln : '' }}
</div>
<div :class="[$style[diff.type], $style.diffContent]">
<span v-if="diff.type === 'add'">&nbsp;+&nbsp;</span>
<span v-else-if="diff.type === 'del'">&nbsp;-&nbsp;</span>
<span v-else>&nbsp;&nbsp;&nbsp;</span>
<span>
{{ diff.content }}
</span>
</div>
</div>
</div>
<div :class="$style.actions">
<div v-if="error">
<n8n-icon icon="exclamation-triangle" color="danger" class="mr-5xs" />
<span :class="$style.infoText">{{ t('codeDiff.couldNotReplace') }}</span>
</div>
<div v-else-if="replaced">
<n8n-button type="secondary" size="mini" icon="undo" @click="() => emit('undo')">{{
t('codeDiff.undo')
}}</n8n-button>
<n8n-icon icon="check" color="success" class="ml-xs" />
<span :class="$style.infoText">{{ t('codeDiff.codeReplaced') }}</span>
</div>
<n8n-button
v-else
:type="replacing ? 'secondary' : 'primary'"
size="mini"
icon="refresh"
:disabled="!content || streaming"
:loading="replacing"
@click="() => emit('replace')"
>{{ replacing ? t('codeDiff.replacing') : t('codeDiff.replaceMyCode') }}</n8n-button
>
</div>
</div>
</template>
<style lang="scss" module>
.container {
border: var(--border-base);
background-color: var(--color-foreground-xlight);
border-radius: var(--border-radius-base);
}
.title {
padding: var(--spacing-2xs);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xs);
// ensure consistent spacing even if title is empty
min-height: 32.5px;
line-height: normal;
display: flex;
}
.lineNumber {
font-size: var(--font-size-3xs);
min-width: 18px;
max-width: 18px;
text-align: center;
border-right: var(--border-base);
}
.diffSection {
overflow: scroll;
border-top: var(--border-base);
border-bottom: var(--border-base);
max-height: 218px; // 12 lines
background-color: var(--color-background-base);
font-family: var(--font-family-monospace);
}
.diff {
display: flex;
font-size: var(--font-size-3xs);
line-height: 18px; /* 100% */
height: 18px;
max-height: 18px;
}
.diffContent {
width: auto;
text-wrap: nowrap;
display: flex;
> span {
display: flex;
}
}
.add {
color: var(--color-success);
background-color: var(--color-success-tint-2);
}
.del {
color: var(--color-danger);
background-color: var(--color-danger-tint-2);
}
.normal {
background-color: var(--color-foreground-xlight);
}
.actions {
padding: var(--spacing-2xs);
}
.infoText {
color: var(--color-text-light);
font-size: var(--font-size-xs);
margin-left: var(--spacing-4xs);
}
</style>