@axos-web-dev/shared-components 2.2.15 → 2.2.16

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 (2) hide show
  1. package/dist/Chatbot/ChatWindow.js +98 -87
  2. package/package.json +1 -1
package/dist/Chatbot/ChatWindow.js CHANGED
@@ -11,7 +11,7 @@ import React, { useRef, useState, useEffect } from "react";
11
11
  import { useNetworkState, useMount } from "react-use";
12
12
  import { focusAnimation, gradientFocus } from "./AnimatedGradientBorder.css.js";
13
13
  import { ChatbotMessage } from "./ChatbotMessage.js";
14
- import { windowBarStyle, left_bar_section, chat_title, button_bar, chatbotMenuItem, chatbotMenu, chatEndDialogOverlay, chatFinishDialog, chatEndCircle, endChatButtonStyle, noAnswerButton, arrowFill, button_reset, buttonss_section, chatNetworkStatus, shimmerText, messagesContainerStyle, formTextButton, inputStyle, autoResize, sendButtonStyle, windowStyle, windowOpenStyle, windowExpandedStyle } from "./ChatWindow.css.js";
14
+ import { windowBarStyle, left_bar_section, chat_title, button_bar, chatbotMenuItem, chatbotMenu, chatEndDialogOverlay, chatFinishDialog, chatEndCircle, endChatButtonStyle, noAnswerButton, arrowFill, button_reset, buttonss_section, chatNetworkStatus, shimmerText, messagesContainerStyle, formTextButton, inputStyle, autoResize, sendButtonStyle, chatAiDisclaimer, windowStyle, windowOpenStyle, windowExpandedStyle } from "./ChatWindow.css.js";
15
15
  import { EllipsisIcon } from "./EllipsisIcon.js";
16
16
  import { ExpandChatToggle } from "./ExpandChatToggle.js";
17
17
  import { useOpenChat } from "./store/chat.js";
@@ -136,6 +136,7 @@ const ChatWindow = ({
136
136
  height: "17",
137
137
  viewBox: "0 0 20 17",
138
138
  fill: "none",
139
+ "aria-hidden": "true",
139
140
  children: [
140
141
  /* @__PURE__ */ jsx(
141
142
  "path",
@@ -182,6 +183,8 @@ const ChatWindow = ({
182
183
  alignContent: "center",
183
184
  background: menuOpen ? "#0000000f" : void 0
184
185
  },
186
+ "aria-label": "end chat with evo ai",
187
+ title: "end chat",
185
188
  children: /* @__PURE__ */ jsx(EllipsisIcon, { color: vars.chatbot.window.headerText })
186
189
  }
187
190
  ),
@@ -208,6 +211,7 @@ const ChatWindow = ({
208
211
  height: "16",
209
212
  viewBox: "0 0 16 16",
210
213
  fill: "none",
214
+ "aria-hidden": true,
211
215
  children: [
212
216
  /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_92_1389)", children: [
213
217
  /* @__PURE__ */ jsx(
@@ -399,12 +403,12 @@ const ChatWindow = ({
399
403
  height: "24",
400
404
  viewBox: "0 0 24 24",
401
405
  fill: "none",
406
+ "aria-hidden": "true",
402
407
  children: /* @__PURE__ */ jsx(
403
408
  "path",
404
409
  {
405
410
  className: arrowFill,
406
- d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z",
407
- color: vars.chatbot.window.headerText
411
+ d: "M2.46875 7.76574L11.9991 17.2961L21.5294 7.76574L20.4687 6.70508L11.9991 15.1749L3.52941 6.70508L2.46875 7.76574Z"
408
412
  }
409
413
  )
410
414
  }
@@ -417,6 +421,7 @@ const ChatWindow = ({
417
421
  viewBox: "0 0 15 15",
418
422
  fill: "none",
419
423
  xmlns: "http://www.w3.org/2000/svg",
424
+ "aria-hidden": "true",
420
425
  children: /* @__PURE__ */ jsx(
421
426
  "path",
422
427
  {
@@ -515,91 +520,97 @@ const ChatWindow = ({
515
520
  ),
516
521
  /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
517
522
  ] }),
518
- /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 24px 16px" }, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSend, className: clsx(gradientFocus), children: [
519
- /* @__PURE__ */ jsx(
520
- "div",
521
- {
522
- className: clsx(
523
- focused && !inputDisabled && !isBlockedInput ? focusAnimation : ""
524
- ),
525
- style: {
526
- position: "absolute",
527
- left: "10%",
528
- width: "80%",
529
- height: "40px",
530
- zIndex: "-1"
531
- }
532
- }
533
- ),
534
- /* @__PURE__ */ jsxs(
535
- "div",
536
- {
537
- className: formTextButton,
538
- style: {
539
- display: "flex",
540
- padding: "12px 16px",
541
- background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
542
- borderRadius: 12
543
- },
544
- children: [
545
- /* @__PURE__ */ jsx(
546
- "textarea",
547
- {
548
- ref: inputRef,
549
- value: input,
550
- onChange: (e) => setInput(e.target.value),
551
- onKeyDown: (e) => {
552
- if (hasEscalated) {
553
- previewTyping(e.target?.value);
554
- }
555
- if (e.key === "Enter" && !e.shiftKey) {
556
- handleSend(e);
557
- }
558
- },
559
- onFocus: () => setFocused(() => true),
560
- onBlur: () => setFocused(() => false),
561
- placeholder: "Ask anything...",
562
- className: clsx(inputStyle, autoResize),
563
- autoFocus: true,
564
- disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
565
- rows: 1
566
- }
523
+ /* @__PURE__ */ jsxs("div", { style: { padding: "16px 16px 24px 16px" }, children: [
524
+ /* @__PURE__ */ jsxs("form", { onSubmit: handleSend, className: clsx(gradientFocus), children: [
525
+ /* @__PURE__ */ jsx(
526
+ "div",
527
+ {
528
+ className: clsx(
529
+ focused && !inputDisabled && !isBlockedInput ? focusAnimation : ""
567
530
  ),
568
- /* @__PURE__ */ jsx(
569
- "button",
570
- {
571
- className: clsx(
572
- sendButtonStyle,
573
- input.trim().length > 0 && "active"
574
- ),
575
- type: "submit",
576
- title: "Send message",
577
- disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
578
- children: /* @__PURE__ */ jsx(
579
- "svg",
580
- {
581
- xmlns: "http://www.w3.org/2000/svg",
582
- width: "20",
583
- height: "20",
584
- viewBox: "0 0 16 16",
585
- fill: "none",
586
- children: /* @__PURE__ */ jsx(
587
- "path",
588
- {
589
- fillRule: "evenodd",
590
- clipRule: "evenodd",
591
- d: "M0.0030533 5.42479C0.0273417 5.1795 0.193529 4.9714 0.427369 4.89345L15.0114 0.0320896C15.236 -0.0427712 15.4836 0.0156801 15.651 0.183075C15.8184 0.35047 15.8769 0.598075 15.802 0.822659L10.9407 15.4067C10.8627 15.6406 10.6546 15.8068 10.4093 15.8311C10.164 15.8553 9.92737 15.7332 9.80508 15.5192L6.35411 9.47999L0.314925 6.02903C0.100912 5.90673 -0.0212351 5.67008 0.0030533 5.42479ZM7.59169 9.1263L9.64202 12.7144C9.85645 13.0896 10.4138 13.0344 10.5505 12.6244L13.9046 2.56191C14.0349 2.17103 13.6631 1.79916 13.2722 1.92946L3.20969 5.28362C2.79967 5.4203 2.74448 5.97766 3.11973 6.19209L6.70781 8.24242L9.90579 5.04443C10.1499 4.80036 10.5456 4.80036 10.7897 5.04443C11.0337 5.28851 11.0337 5.68424 10.7897 5.92832L7.59169 9.1263Z",
592
- fill: "#435164"
593
- }
594
- )
595
- }
596
- )
597
- }
598
- )
599
- ]
600
- }
601
- )
602
- ] }) })
531
+ style: {
532
+ position: "absolute",
533
+ left: "10%",
534
+ width: "80%",
535
+ height: "40px",
536
+ zIndex: "-1"
537
+ }
538
+ }
539
+ ),
540
+ /* @__PURE__ */ jsxs(
541
+ "div",
542
+ {
543
+ className: formTextButton,
544
+ style: {
545
+ display: "flex",
546
+ padding: "12px 16px",
547
+ background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
548
+ borderRadius: 12
549
+ },
550
+ children: [
551
+ /* @__PURE__ */ jsx(
552
+ "textarea",
553
+ {
554
+ ref: inputRef,
555
+ value: input,
556
+ onChange: (e) => setInput(e.target.value),
557
+ onKeyDown: (e) => {
558
+ if (hasEscalated) {
559
+ previewTyping(e.target?.value);
560
+ }
561
+ if (e.key === "Enter" && !e.shiftKey) {
562
+ handleSend(e);
563
+ }
564
+ },
565
+ onFocus: () => setFocused(() => true),
566
+ onBlur: () => setFocused(() => false),
567
+ placeholder: "Ask anything...",
568
+ "aria-label": "Ask anything...",
569
+ className: clsx(inputStyle, autoResize),
570
+ autoFocus: true,
571
+ disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
572
+ rows: 1
573
+ }
574
+ ),
575
+ /* @__PURE__ */ jsx(
576
+ "button",
577
+ {
578
+ className: clsx(
579
+ sendButtonStyle,
580
+ input.trim().length > 0 && "active"
581
+ ),
582
+ type: "submit",
583
+ title: "Send message",
584
+ "aria-label": "Send message",
585
+ disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
586
+ children: /* @__PURE__ */ jsx(
587
+ "svg",
588
+ {
589
+ xmlns: "http://www.w3.org/2000/svg",
590
+ width: "20",
591
+ height: "20",
592
+ viewBox: "0 0 16 16",
593
+ fill: "none",
594
+ "aria-hidden": true,
595
+ children: /* @__PURE__ */ jsx(
596
+ "path",
597
+ {
598
+ fillRule: "evenodd",
599
+ clipRule: "evenodd",
600
+ d: "M0.0030533 5.42479C0.0273417 5.1795 0.193529 4.9714 0.427369 4.89345L15.0114 0.0320896C15.236 -0.0427712 15.4836 0.0156801 15.651 0.183075C15.8184 0.35047 15.8769 0.598075 15.802 0.822659L10.9407 15.4067C10.8627 15.6406 10.6546 15.8068 10.4093 15.8311C10.164 15.8553 9.92737 15.7332 9.80508 15.5192L6.35411 9.47999L0.314925 6.02903C0.100912 5.90673 -0.0212351 5.67008 0.0030533 5.42479ZM7.59169 9.1263L9.64202 12.7144C9.85645 13.0896 10.4138 13.0344 10.5505 12.6244L13.9046 2.56191C14.0349 2.17103 13.6631 1.79916 13.2722 1.92946L3.20969 5.28362C2.79967 5.4203 2.74448 5.97766 3.11973 6.19209L6.70781 8.24242L9.90579 5.04443C10.1499 4.80036 10.5456 4.80036 10.7897 5.04443C11.0337 5.28851 11.0337 5.68424 10.7897 5.92832L7.59169 9.1263Z",
601
+ fill: "#435164"
602
+ }
603
+ )
604
+ }
605
+ )
606
+ }
607
+ )
608
+ ]
609
+ }
610
+ )
611
+ ] }),
612
+ /* @__PURE__ */ jsx("p", { className: chatAiDisclaimer, children: "Evo is AI and can make mistakes. Verify important details." })
613
+ ] })
603
614
  ]
604
615
  }
605
616
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@axos-web-dev/shared-components",
3
3
  "description": "Axos shared components library for web.",
4
- "version": "2.2.15",
4
+ "version": "2.2.16",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "module": "dist/main.js",