@aleph-alpha/chat-kit 1.14.0 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/{CkInput.vue_vue_type_script_setup_true_lang-BVZ7FG88.js → CkInput.vue_vue_type_script_setup_true_lang-D8In_Dnl.js} +23 -17
  2. package/dist/components/base/CkAgentMessage/CkAgentMessage.vue.d.ts.map +1 -1
  3. package/dist/components/index.js +1 -1
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/base/CkAgentMessage/CkAgentMessage.spec.ts +6 -12
  7. package/src/components/base/CkAgentMessage/CkAgentMessage.vue +24 -15
  8. package/src/components/composed/CkConversation/CkConversation.spec.ts +8 -35
package/dist/{CkInput.vue_vue_type_script_setup_true_lang-BVZ7FG88.js → CkInput.vue_vue_type_script_setup_true_lang-D8In_Dnl.js} RENAMED
@@ -45,19 +45,25 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
45
45
  };
46
46
  }
47
47
  });
48
- const _hoisted_1$9 = { class: "flex w-full items-start gap-2" };
48
+ const _hoisted_1$9 = { class: "border-border-surface-default flex w-full flex-col gap-6 border-b pb-6" };
49
49
  const _hoisted_2$6 = {
50
50
  key: 0,
51
+ class: "flex items-center gap-3"
52
+ };
53
+ const _hoisted_3$5 = {
54
+ key: 0,
55
+ "data-testid": "ck-agent-message-icon",
51
56
  class: "flex flex-shrink-0 items-center justify-center"
52
57
  };
53
- const _hoisted_3$5 = { class: "text-core-content-primary flex min-w-0 flex-1 flex-col gap-2" };
54
58
  const _hoisted_4$4 = {
55
- key: 0,
56
- class: "text-sm font-bold"
59
+ key: 1,
60
+ "data-testid": "ck-agent-message-header",
61
+ class: "body-14-regular text-content-on-surface-muted min-w-0 flex-1 [word-break:break-word]"
57
62
  };
58
- const _hoisted_5$3 = {
63
+ const _hoisted_5$3 = { class: "text-content-on-surface-primary text-base leading-7" };
64
+ const _hoisted_6$2 = {
59
65
  key: 1,
60
- class: "flex items-center"
66
+ class: "flex items-center gap-4"
61
67
  };
62
68
  const _sfc_main$i = /* @__PURE__ */ defineComponent({
63
69
  ...{ name: "CkAgentMessage" },
@@ -65,20 +71,20 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
65
71
  setup(__props) {
66
72
  return (_ctx, _cache) => {
67
73
  return openBlock(), createElementBlock("div", _hoisted_1$9, [
68
- _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
69
- renderSlot(_ctx.$slots, "icon")
70
- ])) : createCommentVNode("", true),
71
- createElementVNode("div", _hoisted_3$5, [
74
+ _ctx.$slots.icon || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
75
+ _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
76
+ renderSlot(_ctx.$slots, "icon")
77
+ ])) : createCommentVNode("", true),
72
78
  _ctx.$slots.header ? (openBlock(), createElementBlock("span", _hoisted_4$4, [
73
79
  renderSlot(_ctx.$slots, "header")
74
- ])) : createCommentVNode("", true),
75
- createElementVNode("div", null, [
76
- renderSlot(_ctx.$slots, "default")
77
- ]),
78
- _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
79
- renderSlot(_ctx.$slots, "footer")
80
80
  ])) : createCommentVNode("", true)
81
- ])
81
+ ])) : createCommentVNode("", true),
82
+ createElementVNode("div", _hoisted_5$3, [
83
+ renderSlot(_ctx.$slots, "default")
84
+ ]),
85
+ _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
86
+ renderSlot(_ctx.$slots, "footer")
87
+ ])) : createCommentVNode("", true)
82
88
  ]);
83
89
  };
84
90
  }
package/dist/components/base/CkAgentMessage/CkAgentMessage.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CkAgentMessage.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkAgentMessage/CkAgentMessage.vue"],"names":[],"mappings":"AAwFA,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AACjF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"CkAgentMessage.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkAgentMessage/CkAgentMessage.vue"],"names":[],"mappings":"AA6GA,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AACjF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU,+QACd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
package/dist/components/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r } from "../CkInput.vue_vue_type_script_setup_true_lang-BVZ7FG88.js";
1
+ import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r } from "../CkInput.vue_vue_type_script_setup_true_lang-D8In_Dnl.js";
2
2
  export {
3
3
  _ as CkAgentMessage,
4
4
  a as CkConversation,
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { u } from "./useMessageHandler-CMdy-lm0.js";
2
2
  import { C, d, p, u as u2, a } from "./useChatKitLabels-BxNkTzr2.js";
3
3
  import { S, c, d as d2, a as a2, u as u3, b, e, f } from "./index-Ct5hD214.js";
4
- import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r } from "./CkInput.vue_vue_type_script_setup_true_lang-BVZ7FG88.js";
4
+ import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r } from "./CkInput.vue_vue_type_script_setup_true_lang-D8In_Dnl.js";
5
5
  export {
6
6
  C as CHAT_KIT_LABELS,
7
7
  _ as CkAgentMessage,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aleph-alpha/chat-kit",
3
- "version": "1.14.0",
3
+ "version": "1.15.0",
4
4
  "description": "Chat kit package for building chat interfaces with Vue",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/components/base/CkAgentMessage/CkAgentMessage.spec.ts CHANGED
@@ -12,12 +12,12 @@ describe('CkAgentMessage', () => {
12
12
  });
13
13
 
14
14
  it('hides the header section when no header slot is provided', () => {
15
- const { container } = render(CkAgentMessage, {
15
+ render(CkAgentMessage, {
16
16
  slots: { default: 'Some content' },
17
17
  });
18
18
 
19
19
  expect(
20
- container.querySelector('.text-sm.font-bold'),
20
+ screen.queryByTestId('ck-agent-message-header'),
21
21
  ).not.toBeInTheDocument();
22
22
  });
23
23
  });
@@ -42,26 +42,20 @@ describe('CkAgentMessage', () => {
42
42
  });
43
43
 
44
44
  it('renders the icon container only when the icon slot is provided', () => {
45
- const { container } = render(CkAgentMessage, {
45
+ render(CkAgentMessage, {
46
46
  slots: { icon: '<img src="" alt="bot-icon" />' },
47
47
  });
48
48
 
49
- expect(
50
- container.querySelector(
51
- '.flex.flex-shrink-0.items-center.justify-center',
52
- ),
53
- ).toBeInTheDocument();
49
+ expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
54
50
  });
55
51
 
56
52
  it('does not render the icon container when no icon slot is provided', () => {
57
- const { container } = render(CkAgentMessage, {
53
+ render(CkAgentMessage, {
58
54
  slots: { default: 'Some content' },
59
55
  });
60
56
 
61
57
  expect(
62
- container.querySelector(
63
- '.flex.flex-shrink-0.items-center.justify-center',
64
- ),
58
+ screen.queryByTestId('ck-agent-message-icon'),
65
59
  ).not.toBeInTheDocument();
66
60
  });
67
61
  });
package/src/components/base/CkAgentMessage/CkAgentMessage.vue CHANGED
@@ -3,23 +3,32 @@ defineOptions({ name: 'CkAgentMessage' });
3
3
  </script>
4
4
 
5
5
  <template>
6
- <div class="flex w-full items-start gap-2">
7
- <div
8
- v-if="$slots.icon"
9
- class="flex flex-shrink-0 items-center justify-center"
10
- >
11
- <slot name="icon" />
12
- </div>
13
- <div class="text-core-content-primary flex min-w-0 flex-1 flex-col gap-2">
14
- <span v-if="$slots.header" class="text-sm font-bold">
6
+ <div
7
+ class="border-border-surface-default flex w-full flex-col gap-6 border-b pb-6"
8
+ >
9
+ <div v-if="$slots.icon || $slots.header" class="flex items-center gap-3">
10
+ <div
11
+ v-if="$slots.icon"
12
+ data-testid="ck-agent-message-icon"
13
+ class="flex flex-shrink-0 items-center justify-center"
14
+ >
15
+ <slot name="icon" />
16
+ </div>
17
+ <span
18
+ v-if="$slots.header"
19
+ data-testid="ck-agent-message-header"
20
+ class="body-14-regular text-content-on-surface-muted min-w-0 flex-1 [word-break:break-word]"
21
+ >
15
22
  <slot name="header" />
16
23
  </span>
17
- <div>
18
- <slot />
19
- </div>
20
- <div v-if="$slots.footer" class="flex items-center">
21
- <slot name="footer" />
22
- </div>
24
+ </div>
25
+
26
+ <div class="text-content-on-surface-primary text-base leading-7">
27
+ <slot />
28
+ </div>
29
+
30
+ <div v-if="$slots.footer" class="flex items-center gap-4">
31
+ <slot name="footer" />
23
32
  </div>
24
33
  </div>
25
34
  </template>
package/src/components/composed/CkConversation/CkConversation.spec.ts CHANGED
@@ -132,56 +132,36 @@ describe('CkConversation', () => {
132
132
  });
133
133
 
134
134
  it('hides the icon area when no agentAvatarImage, no agentAvatarFallback, and no agent-message-icon slot', () => {
135
- const { container } = render(CkConversation, {
135
+ render(CkConversation, {
136
136
  props: { messages: [agentMessage()] },
137
137
  });
138
138
 
139
- const agentMessageEl = container.querySelector(
140
- '.flex.w-full.items-start.gap-2',
141
- );
142
- expect(agentMessageEl).toBeInTheDocument();
143
139
  expect(
144
- agentMessageEl?.querySelector(
145
- '.flex.flex-shrink-0.items-center.justify-center',
146
- ),
140
+ screen.queryByTestId('ck-agent-message-icon'),
147
141
  ).not.toBeInTheDocument();
148
142
  });
149
143
 
150
144
  it('shows the icon area when agentAvatarFallback is provided', () => {
151
- const { container } = render(CkConversation, {
145
+ render(CkConversation, {
152
146
  props: { messages: [agentMessage()], agentAvatarFallback: 'AI' },
153
147
  });
154
148
 
155
- const agentMessageEl = container.querySelector(
156
- '.flex.w-full.items-start.gap-2',
157
- );
158
- expect(
159
- agentMessageEl?.querySelector(
160
- '.flex.flex-shrink-0.items-center.justify-center',
161
- ),
162
- ).toBeInTheDocument();
149
+ expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
163
150
  });
164
151
 
165
152
  it('shows the icon area when agentAvatarImage URL is provided', () => {
166
- const { container } = render(CkConversation, {
153
+ render(CkConversation, {
167
154
  props: {
168
155
  messages: [agentMessage()],
169
156
  agentAvatarImage: 'https://example.com/icon.png',
170
157
  },
171
158
  });
172
159
 
173
- const agentMessageEl = container.querySelector(
174
- '.flex.w-full.items-start.gap-2',
175
- );
176
- expect(
177
- agentMessageEl?.querySelector(
178
- '.flex.flex-shrink-0.items-center.justify-center',
179
- ),
180
- ).toBeInTheDocument();
160
+ expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
181
161
  });
182
162
 
183
163
  it('shows the icon area when agent-message-icon slot is provided', () => {
184
- const { container } = render(CkConversation, {
164
+ render(CkConversation, {
185
165
  props: { messages: [agentMessage()] },
186
166
  slots: {
187
167
  'agent-message-icon': '<span data-testid="custom-icon">🤖</span>',
@@ -189,14 +169,7 @@ describe('CkConversation', () => {
189
169
  });
190
170
 
191
171
  expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
192
- const agentMessageEl = container.querySelector(
193
- '.flex.w-full.items-start.gap-2',
194
- );
195
- expect(
196
- agentMessageEl?.querySelector(
197
- '.flex.flex-shrink-0.items-center.justify-center',
198
- ),
199
- ).toBeInTheDocument();
172
+ expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
200
173
  });
201
174
  });
202
175