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: update chat

Browse source
This commit is contained in:
Mutasem Aldmour 2024-07-10 17:47:34 +02:00
parent fe219c50fa
commit d9ccb5382f
No known key found for this signature in database
GPG key ID: 3DFA8122BB7FD6B8
4 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/design-system/.storybook/storybook.scss
View file

@ -11,6 +11,10 @@
margin-bottom: 10px;
}
#storybook-root {
height: 100%;
}
// #storybook-root > div:not([class]) > *,
// #storybook-root > * {
// margin: var(--spacing-5xs);

13
packages/design-system/src/components/N8nAskAssistantButton/AskAssistantButton.vue
View file

@ -4,10 +4,12 @@ import AssistantText from './AssistantText.vue';
interface Props {
size: 'small' | 'medium';
static: boolean;
}
const props = withDefaults(defineProps<Props>(), {
size: 'medium',
static: false,
});
const sizes = {
@ -26,10 +28,15 @@ const sizes = {
height: '18px',
},
};
// todo if static, disable click
// todo hoverable class not clean below
</script>
<template>
<button :class="$style.button" :style="{ height: sizes[props.size].height }">
<button
:class="[$style.button, props.static ? '' : $style.hoverable]"
:style="{ height: sizes[props.size].height }"
>
<div>
<div :style="{ padding: sizes[props.size].padding }">
<AssistantIcon :size="sizes[props.size].iconSize" :class="$style.icon" />
@ -59,7 +66,7 @@ const sizes = {
> div {
background: var(--color-background-xlight);
border-radius: inherit;
height: 100%;
height: 100%;
> div {
height: 100%;
@ -69,7 +76,9 @@ const sizes = {
line-height: unset;
}
}
}
.hoverable {
&:hover {
cursor: pointer;

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

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

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

@ -26,7 +26,7 @@ import AssistantText from '../N8nAskAssistantButton/AssistantText.vue';
<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.
<n8n-ask-assistant-button size="small" :static="true" /> button.
</p>
<p>Clicking it starts a chat session with me.</p>
</div>
@ -47,7 +47,8 @@ import AssistantText from '../N8nAskAssistantButton/AssistantText.vue';
<style lang="scss" module>
.container {
min-width: 250px;
max-width: 250px;
max-width: 425px;
height: 100%;
}
.header {
@ -73,6 +74,7 @@ import AssistantText from '../N8nAskAssistantButton/AssistantText.vue';
padding: 16px;
border: var(--border-base);
border-top: 0; // todo
height: 100%;
}
.beta {