mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: rework chat

Browse source
This commit is contained in:
Mutasem Aldmour 2024-07-10 16:14:07 +02:00
parent 487bb73b9e
commit 4dcc7c985a
No known key found for this signature in database
GPG key ID: 3DFA8122BB7FD6B8
3 changed files with 32 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nAskAssistantChat/AskAssistantChat.stories.ts
View file

@ -15,7 +15,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
components: {
AskAssistantChat,
},
template: '<ask-assistant-chat v-bind="args" />',
template: '<div style="width:275px"><ask-assistant-chat v-bind="args" /></div>',
methods,
});

37
packages/design-system/src/components/N8nAskAssistantChat/AskAssistantChat.vue
View file

@ -4,18 +4,29 @@ import AssistantText from '../N8nAskAssistantButton/AssistantText.vue';
</script>
<template>
<div>
<div :class="$style.container">
<div :class="$style.header">
<AssistantIcon :size="18" :class="$style.icon" />
<AssistantText :class="$style.name" font-size="14px" line-height="18px" text="AI Assistant" />
<div :class="$style.beta">beta</div>
<div>
<AssistantIcon :size="18" :class="$style.icon" />
<AssistantText
:class="$style.name"
font-size="14px"
line-height="18px"
text="AI Assistant"
/>
<div :class="$style.beta">beta</div>
</div>
<div>
<n8n-icon icon="arrow-right" color="text-base" />
</div>
</div>
<div :class="$style.body">
<div :class="$style.greeting">Hi Max 👋</div>
<div :class="$style.info">
<p>I'm here to assist you with building workflows.</p>
<p>
Whenever you encounter a task that I can help with, you'll see the <n8n-ask-assistant-button size="small" /> button.
Whenever you encounter a task that I can help with, you'll see the
<n8n-ask-assistant-button size="small" /> button.
</p>
<p>Clicking it starts a chat session with me.</p>
</div>
@ -34,12 +45,24 @@ import AssistantText from '../N8nAskAssistantButton/AssistantText.vue';
</template>
<style lang="scss" module>
.container {
min-width: 250px;
max-width: 250px;
}
.header {
padding: 12px 23px;
background-color: var(--color-background-xlight);
display: flex;
align-items: center;
border: var(--border-base);
div {
display: flex;
align-items: center;
}
> div:last-of-type {
float: right;
}
}
.name {
margin-right: 6px;

1
packages/design-system/src/components/index.ts
View file

@ -1,4 +1,5 @@
export { default as N8nAskAssistantButton } from './N8nAskAssistantButton';
export { default as N8nAskAssistantChat } from './N8nAskAssistantChat';
export { default as N8nActionBox } from './N8nActionBox';
export { default as N8nActionDropdown } from './N8nActionDropdown';
export { default as N8nActionToggle } from './N8nActionToggle';