@n8n/chat 0.9.0 → 0.9.1

package/{src/components → components}/Input.vue

@@ -49,45 +49,40 @@ async function onSubmitKeydown(event: KeyboardEvent) {
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .chat-input {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-
-	textarea {
-		font-family: inherit;
-		font-size: inherit;
-		width: 100%;
-		border: 0;
-		padding: var(--chat--spacing);
-		max-height: var(--chat--textarea--height);
-		resize: none;
-	}
-
-	.chat-input-send-button {
-		height: var(--chat--textarea--height);
-		width: var(--chat--textarea--height);
-		background: white;
-		cursor: pointer;
-		color: var(--chat--color-secondary);
-		border: 0;
-		font-size: 24px;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		transition: color var(--chat--transition-duration) ease;
-
-		&:hover,
-		&:focus {
-			color: var(--chat--color-secondary-shade-50);
-		}
-
-		&[disabled] {
-			cursor: default;
-			color: var(--chat--color-disabled);
-		}
-	}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.chat-input textarea {
+  font-family: inherit;
+  font-size: inherit;
+  width: 100%;
+  border: 0;
+  padding: var(--chat--spacing);
+  max-height: var(--chat--textarea--height);
+  resize: none;
+}
+.chat-input .chat-input-send-button {
+  height: var(--chat--textarea--height);
+  width: var(--chat--textarea--height);
+  background: white;
+  cursor: pointer;
+  color: var(--chat--color-secondary);
+  border: 0;
+  font-size: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--chat--transition-duration) ease;
+}
+.chat-input .chat-input-send-button:hover, .chat-input .chat-input-send-button:focus {
+  color: var(--chat--color-secondary-shade-50);
+}
+.chat-input .chat-input-send-button[disabled] {
+  cursor: default;
+  color: var(--chat--color-disabled);
 }
 </style>

package/{src/components → components}/Layout.vue

@@ -35,48 +35,32 @@ onBeforeUnmount(() => {
 	</main>
 </template>
 
-<style lang="scss">
+<style>
 .chat-layout {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	overflow-y: auto;
-	flex-direction: column;
-	font-family: var(
-		--chat--font-family,
-		(
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI',
-			Roboto,
-			Oxygen-Sans,
-			Ubuntu,
-			Cantarell,
-			'Helvetica Neue',
-			sans-serif
-		)
-	);
-
-	.chat-header {
-		padding: var(--chat--header--padding, var(--chat--spacing));
-		background: var(--chat--header--background, var(--chat--color-dark));
-		color: var(--chat--header--color, var(--chat--color-light));
-	}
-
-	.chat-body {
-		background: var(--chat--body--background, var(--chat--color-light));
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		overflow-y: auto;
-		position: relative;
-		min-height: 100px;
-	}
-
-	.chat-footer {
-		border-top: 1px solid var(--chat--color-light-shade-100);
-		background: var(--chat--footer--background, var(--chat--color-light));
-		color: var(--chat--footer--color, var(--chat--color-dark));
-	}
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  font-family: var(--chat--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
+}
+.chat-layout .chat-header {
+  padding: var(--chat--header--padding, var(--chat--spacing));
+  background: var(--chat--header--background, var(--chat--color-dark));
+  color: var(--chat--header--color, var(--chat--color-light));
+}
+.chat-layout .chat-body {
+  background: var(--chat--body--background, var(--chat--color-light));
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  position: relative;
+  min-height: 100px;
+}
+.chat-layout .chat-footer {
+  border-top: 1px solid var(--chat--color-light-shade-100);
+  background: var(--chat--footer--background, var(--chat--color-light));
+  color: var(--chat--footer--color, var(--chat--color-dark));
 }
 </style>

package/{src/components → components}/Message.vue

@@ -46,52 +46,45 @@ const markdownOptions = {
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .chat-message {
-	display: block;
-	max-width: 80%;
-	padding: var(--chat--message--padding, var(--chat--spacing));
-	border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
-
-	+ .chat-message {
-		margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
-	}
-
-	&.chat-message-from-bot {
-		background-color: var(--chat--message--bot--background);
-		color: var(--chat--message--bot--color);
-		border-bottom-left-radius: 0;
-	}
-
-	&.chat-message-from-user {
-		background-color: var(--chat--message--user--background);
-		color: var(--chat--message--user--color);
-		margin-left: auto;
-		border-bottom-right-radius: 0;
-	}
-
-	> .chat-message-markdown {
-		display: block;
-		box-sizing: border-box;
-
-		> *:first-child {
-			margin-top: 0;
-		}
-
-		> *:last-child {
-			margin-bottom: 0;
-		}
-
-		pre {
-			font-family: inherit;
-			font-size: inherit;
-			margin: 0;
-			white-space: pre-wrap;
-			box-sizing: border-box;
-			padding: var(--chat--spacing);
-			background: var(--chat--message--pre--background);
-			border-radius: var(--chat--border-radius);
-		}
-	}
+  display: block;
+  max-width: 80%;
+  padding: var(--chat--message--padding, var(--chat--spacing));
+  border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
+}
+.chat-message + .chat-message {
+  margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
+}
+.chat-message.chat-message-from-bot {
+  background-color: var(--chat--message--bot--background);
+  color: var(--chat--message--bot--color);
+  border-bottom-left-radius: 0;
+}
+.chat-message.chat-message-from-user {
+  background-color: var(--chat--message--user--background);
+  color: var(--chat--message--user--color);
+  margin-left: auto;
+  border-bottom-right-radius: 0;
+}
+.chat-message > .chat-message-markdown {
+  display: block;
+  box-sizing: border-box;
+}
+.chat-message > .chat-message-markdown > *:first-child {
+  margin-top: 0;
+}
+.chat-message > .chat-message-markdown > *:last-child {
+  margin-bottom: 0;
+}
+.chat-message > .chat-message-markdown pre {
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre-wrap;
+  box-sizing: border-box;
+  padding: var(--chat--spacing);
+  background: var(--chat--message--pre--background);
+  border-radius: var(--chat--border-radius);
 }
 </style>

package/components/MessageTyping.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { computed } from 'vue';
+import { Message } from './index';
+import type { ChatMessage } from '@n8n/chat/types';
+
+const props = defineProps({
+	animation: {
+		type: String as PropType<'bouncing' | 'scaling'>,
+		default: 'bouncing',
+	},
+});
+
+const message: ChatMessage = {
+	id: 'typing',
+	text: '',
+	sender: 'bot',
+	createdAt: '',
+};
+
+const classes = computed(() => {
+	return {
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		'chat-message-typing': true,
+		[`chat-message-typing-animation-${props.animation}`]: true,
+	};
+});
+</script>
+<template>
+	<Message :class="classes" :message="message">
+		<div class="chat-message-typing-body">
+			<span class="chat-message-typing-circle"></span>
+			<span class="chat-message-typing-circle"></span>
+			<span class="chat-message-typing-circle"></span>
+		</div>
+	</Message>
+</template>
+<style>
+.chat-message-typing {
+  max-width: 80px;
+}
+.chat-message-typing.chat-message-typing-animation-scaling .chat-message-typing-circle {
+  animation: chat-message-typing-animation-scaling 800ms ease-in-out infinite;
+  animation-delay: 3600ms;
+}
+.chat-message-typing.chat-message-typing-animation-bouncing .chat-message-typing-circle {
+  animation: chat-message-typing-animation-bouncing 800ms ease-in-out infinite;
+  animation-delay: 3600ms;
+}
+.chat-message-typing .chat-message-typing-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.chat-message-typing .chat-message-typing-circle {
+  display: block;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  background-color: var(--chat--color-typing);
+  margin: 3px;
+}
+.chat-message-typing .chat-message-typing-circle:nth-child(1) {
+  animation-delay: 0ms;
+}
+.chat-message-typing .chat-message-typing-circle:nth-child(2) {
+  animation-delay: 333ms;
+}
+.chat-message-typing .chat-message-typing-circle:nth-child(3) {
+  animation-delay: 666ms;
+}
+
+@keyframes chat-message-typing-animation-scaling {
+  0% {
+    transform: scale(1);
+  }
+  33% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.4);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes chat-message-typing-animation-bouncing {
+  0% {
+    transform: translateY(0);
+  }
+  33% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+</style>

package/{src/components → components}/MessagesList.vue

@@ -28,10 +28,10 @@ const { initialMessages, waitingForResponse } = chatStore;
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .chat-messages-list {
-	margin-top: auto;
-	display: block;
-	padding: var(--chat--messages-list--padding, var(--chat--spacing));
+  margin-top: auto;
+  display: block;
+  padding: var(--chat--messages-list--padding, var(--chat--spacing));
 }
 </style>

package/{src/components → components}/PoweredBy.vue

@@ -5,13 +5,12 @@
 	</div>
 </template>
 
-<style lang="scss">
+<style>
 .chat-powered-by {
-	text-align: center;
-
-	a {
-		color: var(--chat--color-primary);
-		text-decoration: none;
-	}
+  text-align: center;
+}
+.chat-powered-by a {
+  color: var(--chat--color-primary);
+  text-decoration: none;
 }
 </style>

package/components/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "Chat", {
+  enumerable: true,
+  get: function () {
+    return _Chat.default;
+  }
+});
+Object.defineProperty(exports, "ChatWindow", {
+  enumerable: true,
+  get: function () {
+    return _ChatWindow.default;
+  }
+});
+Object.defineProperty(exports, "GetStarted", {
+  enumerable: true,
+  get: function () {
+    return _GetStarted.default;
+  }
+});
+Object.defineProperty(exports, "GetStartedFooter", {
+  enumerable: true,
+  get: function () {
+    return _GetStartedFooter.default;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () {
+    return _Input.default;
+  }
+});
+Object.defineProperty(exports, "Layout", {
+  enumerable: true,
+  get: function () {
+    return _Layout.default;
+  }
+});
+Object.defineProperty(exports, "Message", {
+  enumerable: true,
+  get: function () {
+    return _Message.default;
+  }
+});
+Object.defineProperty(exports, "MessagesList", {
+  enumerable: true,
+  get: function () {
+    return _MessagesList.default;
+  }
+});
+Object.defineProperty(exports, "PoweredBy", {
+  enumerable: true,
+  get: function () {
+    return _PoweredBy.default;
+  }
+});
+var _Button = _interopRequireDefault(require("./Button.vue"));
+var _Chat = _interopRequireDefault(require("./Chat.vue"));
+var _ChatWindow = _interopRequireDefault(require("./ChatWindow.vue"));
+var _GetStarted = _interopRequireDefault(require("./GetStarted.vue"));
+var _GetStartedFooter = _interopRequireDefault(require("./GetStartedFooter.vue"));
+var _Input = _interopRequireDefault(require("./Input.vue"));
+var _Layout = _interopRequireDefault(require("./Layout.vue"));
+var _Message = _interopRequireDefault(require("./Message.vue"));
+var _MessagesList = _interopRequireDefault(require("./MessagesList.vue"));
+var _PoweredBy = _interopRequireDefault(require("./PoweredBy.vue"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/components/index.mjs

@@ -0,0 +1,10 @@
+export { default as Button } from "./Button.vue";
+export { default as Chat } from "./Chat.vue";
+export { default as ChatWindow } from "./ChatWindow.vue";
+export { default as GetStarted } from "./GetStarted.vue";
+export { default as GetStartedFooter } from "./GetStartedFooter.vue";
+export { default as Input } from "./Input.vue";
+export { default as Layout } from "./Layout.vue";
+export { default as Message } from "./Message.vue";
+export { default as MessagesList } from "./MessagesList.vue";
+export { default as PoweredBy } from "./PoweredBy.vue";

package/composables/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useChat = require("./useChat");
+Object.keys(_useChat).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChat[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChat[key];
+    }
+  });
+});
+var _useI18n = require("./useI18n");
+Object.keys(_useI18n).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useI18n[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useI18n[key];
+    }
+  });
+});
+var _useOptions = require("./useOptions");
+Object.keys(_useOptions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useOptions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useOptions[key];
+    }
+  });
+});

package/composables/index.mjs

@@ -0,0 +1,3 @@
+export * from "./useChat.mjs";
+export * from "./useI18n.mjs";
+export * from "./useOptions.mjs";

package/composables/useChat.d.ts

@@ -0,0 +1 @@
+export declare function useChat(): Chat;

package/composables/useChat.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChat = useChat;
+var _vue = require("vue");
+var _constants = require("@n8n/chat/constants");
+function useChat() {
+  return (0, _vue.inject)(_constants.ChatSymbol);
+}

package/composables/useChat.mjs

@@ -0,0 +1,5 @@
+import { inject } from "vue";
+import { ChatSymbol } from "@n8n/chat/constants";
+export function useChat() {
+  return inject(ChatSymbol);
+}

package/composables/useI18n.d.ts

@@ -0,0 +1,4 @@
+export declare function useI18n(): {
+    t: (key: string) => string;
+    te: (key: string) => boolean;
+};

package/composables/useI18n.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useI18n = useI18n;
+var _useOptions = require("@n8n/chat/composables/useOptions");
+function useI18n() {
+  const {
+    options
+  } = (0, _useOptions.useOptions)();
+  const language = options?.defaultLanguage ?? "en";
+  function t(key) {
+    return options?.i18n?.[language]?.[key] ?? key;
+  }
+  function te(key) {
+    return !!options?.i18n?.[language]?.[key];
+  }
+  return {
+    t,
+    te
+  };
+}

package/composables/useI18n.mjs

@@ -0,0 +1,12 @@
+import { useOptions } from "@n8n/chat/composables/useOptions";
+export function useI18n() {
+  const { options } = useOptions();
+  const language = options?.defaultLanguage ?? "en";
+  function t(key) {
+    return options?.i18n?.[language]?.[key] ?? key;
+  }
+  function te(key) {
+    return !!options?.i18n?.[language]?.[key];
+  }
+  return { t, te };
+}

package/composables/useOptions.d.ts

@@ -0,0 +1,3 @@
+export declare function useOptions(): {
+    options: ChatOptions;
+};

package/composables/useOptions.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOptions = useOptions;
+var _vue = require("vue");
+var _constants = require("@n8n/chat/constants");
+function useOptions() {
+  const options = (0, _vue.inject)(_constants.ChatOptionsSymbol);
+  return {
+    options
+  };
+}

package/composables/useOptions.mjs

@@ -0,0 +1,8 @@
+import { inject } from "vue";
+import { ChatOptionsSymbol } from "@n8n/chat/constants";
+export function useOptions() {
+  const options = inject(ChatOptionsSymbol);
+  return {
+    options
+  };
+}

package/constants/defaults.d.ts

@@ -0,0 +1,3 @@
+import type { ChatOptions } from '@n8n/chat/types';
+export declare const defaultOptions: ChatOptions;
+export declare const defaultMountingTarget = "#n8n-chat";

package/constants/defaults.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = exports.defaultMountingTarget = void 0;
+const defaultOptions = exports.defaultOptions = {
+  webhookUrl: "http://localhost:5678",
+  webhookConfig: {
+    method: "POST",
+    headers: {}
+  },
+  target: "#n8n-chat",
+  mode: "window",
+  loadPreviousSession: true,
+  chatInputKey: "chatInput",
+  chatSessionKey: "sessionId",
+  defaultLanguage: "en",
+  showWelcomeScreen: false,
+  initialMessages: ["Hi there! \u{1F44B}", "My name is Nathan. How can I assist you today?"],
+  i18n: {
+    en: {
+      title: "Hi there! \u{1F44B}",
+      subtitle: "Start a chat. We're here to help you 24/7.",
+      footer: "",
+      getStarted: "New Conversation",
+      inputPlaceholder: "Type your question.."
+    }
+  },
+  theme: {}
+};
+const defaultMountingTarget = exports.defaultMountingTarget = "#n8n-chat";