@apia/theme 3.0.21 → 3.0.23

package/dist/{index-DGezuU-i.js → index-DY2si0MO.js}

@@ -1800,8 +1800,15 @@ const menu = {
     position: "relative",
     padding: "0.375rem 1.5rem",
     paddingLeft: "2.2rem",
-    "&.withIcon": {
-      padding: "0px"
+    ".withIcon": {
+      padding: "0px",
+      display: "flex",
+      gap: "4px",
+      justifyContent: "left",
+      alignItems: "center",
+      ".icon": {
+        flexShrink: 0
+      }
     }
   },
   ".szh-menu__item--hover": (theme) => ({
@@ -4436,7 +4443,7 @@ const chat$1 = {
     borderRadius: "2px",
     px: 4,
     py: 5,
-    width: "80%",
+    maxWidth: "80%",
     wordWrap: "break-word",
     whiteSpace: "pre-wrap",
     "&.user": {
@@ -4787,42 +4794,330 @@ const boxes = {
   /* PREPEND HERE */
 };
 
-const form = {
+const form$1 = {
   /* PREPEND HERE */
-  ".search_controls": {
+  alignItems: "center",
+  justifyContent: "center",
+  display: "flex",
+  gap: 0,
+  mx: "auto",
+  background: "palette.background.paper",
+  border: "1px solid",
+  borderColor: "palette.border.section",
+  borderRadius: "panel",
+  boxShadow: "0px 2px 6px #0002",
+  width: "100%",
+  p: spacing(3),
+  "&:focus-within": focusOutline,
+  "& > *:focus[class]": {
+    outlineWidth: 0
+  },
+  ".filter_button_box": {
+    position: "relative"
+  },
+  ".applied_filters_label": {
+    position: "absolute",
+    bottom: "21px",
+    left: "20px",
+    minWidth: "10px",
+    maxHeight: "10px",
+    border: "2px solid white",
+    borderRadius: "100%",
+    display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    display: "flex",
-    gap: 0,
-    mx: "auto",
-    background: "palette.background.paper",
-    border: "1px solid",
-    borderColor: "palette.border.section",
+    backgroundColor: "palette.error.main"
+  },
+  ".searchTextArea": {
+    minHeight: "34px",
+    height: "34px",
+    resize: "none",
+    py: spacing(2),
+    background: "transparent",
+    border: "none"
+  },
+  ".ChatBarButton": {
     borderRadius: "panel",
-    boxShadow: "0px 2px 6px #0002",
-    width: "100%",
-    p: spacing(3),
-    "&:focus-within": focusOutline,
-    "& > *:focus": {
-      outline: "none"
+    height: "34px",
+    width: "34px",
+    flexShrink: 0,
+    background: "transparent",
+    border: "none",
+    color: "palette.text.primary"
+  },
+  ".isRecording": {
+    borderRadius: "panel",
+    height: "34px",
+    width: "34px",
+    flexShrink: 0,
+    background: "transparent",
+    border: "none",
+    color: "red"
+  }
+};
+
+const history$1 = {
+  /* PREPEND HERE */
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: 2,
+  p: 3,
+  ".history_message": {
+    px: 4,
+    py: 5,
+    maxWidth: "calc(100% - 50px)",
+    width: "fit-content",
+    wordWrap: "break-word",
+    whiteSpace: "pre-wrap",
+    borderRadius: "chatMessage",
+    "&.last": {
+      mb: 4
     },
-    ".filter_button_box": {
-      position: "relative"
+    "&.user": {
+      "&.first": {
+        borderTopRightRadius: "0px"
+      },
+      backgroundColor: "rgb(108 166 203)",
+      // TODO: Set the correct color, if necessary, define it in palette
+      color: "white",
+      // TODO: Set the correct color, if necessary, define it in palette
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(113 145 193)",
+      // TODO: Set the correct color, if necessary, define it in palette
+      alignSelf: "end",
+      display: "flex",
+      flexDirection: "column"
     },
-    ".applied_filters_label": {
-      position: "absolute",
-      bottom: "21px",
-      left: "20px",
-      minWidth: "10px",
-      maxHeight: "10px",
-      border: "2px solid white",
-      borderRadius: "100%",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: "palette.error.main"
+    "&.system": {
+      "&.first": {
+        borderTopLeftRadius: "0px"
+      },
+      backgroundColor: "#00bcff14",
+      // TODO: Set the correct color, if necessary, define it in palette
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
+    },
+    "&.warning": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#ffff0024",
+      // TODO: Set the correct color, if necessary, define it in palette
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
+    },
+    "&.error": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#fd84212b",
+      // TODO: Set the correct color, if necessary, define it in palette
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
+    },
+    "&.information": {
+      borderRadius: "2px 20px 20px 20px",
+      alignSelf: "start",
+      backgroundColor: "#00bcff14",
+      //'#2222cc2b',
+      width: "100%",
+      boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
+      border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
     }
   },
+  ".history_message__attachments": {
+    display: "flex",
+    justifyContent: "flex-end",
+    ".labelBox": {
+      width: "max-content",
+      background: "#fafafa",
+      color: "palette.text.primary",
+      fontSize: "14px",
+      ".labelAndIcon ": {
+        fontSize: "14px"
+      }
+    }
+  }
+};
+
+const controller$1 = {
+  /* PREPEND HERE */
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "stretch",
+  maxHeight: "50vh",
+  gap: 3,
+  flexBasis: "50vh",
+  ".autoscrollContainer": {
+    flexGrow: 1,
+    flexShrink: 1
+  },
+  ".search_controls": {
+    flexShrink: 0
+  }
+};
+
+const attachments$1 = {
+  /* PREPEND HERE */
+  alignItems: "center",
+  display: "flex",
+  flexDirection: responsive$2({ 0: "column", 3: "row" }),
+  flexWrap: "wrap",
+  gap: spacing$1(3),
+  ".attachments__more_button": {
+    border: "1px solid",
+    borderColor: "palette.border.article",
+    borderRadius: "elementBox",
+    boxShadow: "sharp",
+    p: 2
+  },
+  ".file_box": {
+    alignItems: "center",
+    border: "1px solid",
+    borderColor: "palette.border.article",
+    borderRadius: "elementBox",
+    boxShadow: "sharp",
+    display: "flex",
+    gap: spacing$1(3),
+    width: responsive$2({
+      0: "100%",
+      3: "min(90vw, 200px)"
+    }),
+    p: 2
+  },
+  ".file_box__icon": {
+    flexShrink: 0
+  },
+  ".file_box__name": {
+    boxSizing: "border-box",
+    flexGrow: 1,
+    margin: "0px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  ".file_box__remove": {
+    flexShrink: 0,
+    p: 4
+  }
+};
+
+const message$1 = {
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  ".closeButton": {
+    borderRadius: "5px",
+    right: "0px",
+    top: "-2px",
+    zIndex: "15",
+    position: "absolute",
+    variant: "buttons.icon-outline-danger"
+  },
+  genericBox: {
+    margin: "10px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px"
+  },
+  fileName: {
+    bottom: "4px",
+    right: "4px",
+    fontSize: "12px",
+    color: "#333",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    width: "inherit",
+    textAlign: "center",
+    px: "5px"
+  },
+  textBox: {
+    variant: "layout.common.components.aiMessage.genericBox",
+    width: "50px",
+    padding: "10px",
+    backgroundColor: "#fff",
+    border: "1px solid #ddd",
+    borderRadius: "4px",
+    position: "relative"
+  },
+  textSnippet: {
+    bottom: "4px",
+    right: "4px",
+    fontSize: "12px",
+    color: "#555"
+  }
+};
+
+const assistant$1 = {
+  floatingAssistant: {
+    "& div.modal__content[class]": {
+      p: 3,
+      width: "min(90vw, 500px)"
+    },
+    ".modal__main": {
+      maxWidth: "unset",
+      overflow: "hidden"
+    }
+  }
+};
+
+const chat = {
+  /* PREPEND HERE */
+  assistant: assistant$1,
+  form: form$1,
+  history: history$1,
+  controller: controller$1,
+  attachments: attachments$1,
+  message: message$1
+};
+
+const form = {
+  /* PREPEND HERE */
+  alignItems: "center",
+  justifyContent: "center",
+  display: "flex",
+  gap: 0,
+  mx: "auto",
+  background: "palette.background.paper",
+  border: "1px solid",
+  borderColor: "palette.border.section",
+  borderRadius: "panel",
+  boxShadow: "0px 2px 6px #0002",
+  width: "100%",
+  p: spacing(3),
+  "&:focus-within": focusOutline,
+  "& > *:focus[class]": {
+    outlineWidth: 0
+  },
+  ".filter_button_box": {
+    position: "relative"
+  },
+  ".applied_filters_label": {
+    position: "absolute",
+    bottom: "21px",
+    left: "20px",
+    minWidth: "10px",
+    maxHeight: "10px",
+    border: "2px solid white",
+    borderRadius: "100%",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "palette.error.main"
+  },
   ".searchTextArea": {
     minHeight: "34px",
     height: "34px",
@@ -4831,7 +5126,7 @@ const form = {
     background: "transparent",
     border: "none"
   },
-  ".SearchButton": {
+  ".ChatBarButton": {
     borderRadius: "panel",
     height: "34px",
     width: "34px",
@@ -4839,73 +5134,84 @@ const form = {
     background: "transparent",
     border: "none",
     color: "palette.text.primary"
+  },
+  ".isRecording": {
+    borderRadius: "panel",
+    height: "34px",
+    width: "34px",
+    flexShrink: 0,
+    background: "transparent",
+    border: "none",
+    color: "red"
   }
 };
 
 const history = {
   /* PREPEND HERE */
+  display: "flex",
+  flexDirection: "column",
   width: "100%",
-  flexShrink: 1,
-  height: "calc(100vh - 300px)",
-  minHeight: "25vh",
-  flexGrow: 1,
-  ".messages_box": { fontSize: "22px", minHeight: "88vh" },
-  ".history__message": {
-    borderRadius: "2px",
+  gap: 2,
+  p: 3,
+  ".history_message": {
     px: 4,
     py: 5,
-    width: "80%",
+    maxWidth: "calc(100% - 50px)",
+    width: "fit-content",
     wordWrap: "break-word",
     whiteSpace: "pre-wrap",
+    borderRadius: "chatMessage",
+    "&.last": {
+      mb: 4
+    },
     "&.user": {
-      borderRadius: "chatMessage",
-      borderTopRightRadius: "0px",
+      "&.first": {
+        borderTopRightRadius: "0px"
+      },
       backgroundColor: "rgb(108 166 203)",
-      //rgb(117 163 192)', //rgb(92, 143, 174)',
+      // TODO: Set the correct color, if necessary, define it in palette
       color: "white",
+      // TODO: Set the correct color, if necessary, define it in palette
       boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
       border: "1px solid rgb(113 145 193)",
+      // TODO: Set the correct color, if necessary, define it in palette
       alignSelf: "end",
       display: "flex",
-      flexDirection: "column",
-      // gap: '16px',
-      width: "max-content",
-      ".additionalContent_wrapper": {
-        display: "flex",
-        justifyContent: "flex-end",
-        ".labelBox": {
-          width: "max-content",
-          background: "#fafafa",
-          color: "palette.text.primary",
-          fontSize: "14px",
-          ".labelAndIcon ": {
-            fontSize: "14px"
-          }
-        }
-      }
+      flexDirection: "column"
     },
     "&.system": {
-      borderRadius: "chatMessage",
-      borderTopLeftRadius: "0px",
+      "&.first": {
+        borderTopLeftRadius: "0px"
+      },
       backgroundColor: "#00bcff14",
+      // TODO: Set the correct color, if necessary, define it in palette
       boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
       border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
     },
     "&.warning": {
       borderRadius: "2px 20px 20px 20px",
       alignSelf: "start",
       backgroundColor: "#ffff0024",
+      // TODO: Set the correct color, if necessary, define it in palette
       width: "100%",
       boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
       border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
     },
     "&.error": {
       borderRadius: "2px 20px 20px 20px",
       alignSelf: "start",
       backgroundColor: "#fd84212b",
+      // TODO: Set the correct color, if necessary, define it in palette
       width: "100%",
       boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
       border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
     },
     "&.information": {
       borderRadius: "2px 20px 20px 20px",
@@ -4914,34 +5220,158 @@ const history = {
       //'#2222cc2b',
       width: "100%",
       boxShadow: "rgba(50, 50, 93, 0.15) 1px 1px 2px 1px",
+      // TODO: Set the correct color, if necessary, define it in palette
       border: "1px solid rgb(0 28 38 / 18%)"
+      // TODO: Set the correct color, if necessary, define it in palette
     }
   },
-  ".history": {
-    animation: `${animations$1.fadeInFromBottom} 0.3s`,
-    padding: "100px 32px 80px 32px",
-    border: "none",
-    height: "unset"
+  ".history_message__attachments": {
+    display: "flex",
+    justifyContent: "flex-end",
+    ".labelBox": {
+      width: "max-content",
+      background: "#fafafa",
+      color: "palette.text.primary",
+      fontSize: "14px",
+      ".labelAndIcon ": {
+        fontSize: "14px"
+      }
+    }
+  }
+};
+
+const controller = {
+  /* PREPEND HERE */
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "stretch",
+  maxHeight: "50vh",
+  gap: 3,
+  flexBasis: "50vh",
+  ".autoscrollContainer": {
+    flexGrow: 1,
+    flexShrink: 1
   },
-  ".help__container": {
-    borderRadius: "2px 20px 20px 20px",
+  ".search_controls": {
+    flexShrink: 0
+  }
+};
+
+const attachments = {
+  /* PREPEND HERE */
+  alignItems: "center",
+  display: "flex",
+  flexDirection: responsive$2({ 0: "column", 3: "row" }),
+  flexWrap: "wrap",
+  gap: spacing$1(3),
+  ".attachments__more_button": {
+    border: "1px solid",
+    borderColor: "palette.border.article",
+    borderRadius: "elementBox",
+    boxShadow: "sharp",
+    p: 2
+  },
+  ".file_box": {
+    alignItems: "center",
+    border: "1px solid",
+    borderColor: "palette.border.article",
+    borderRadius: "elementBox",
+    boxShadow: "sharp",
     display: "flex",
-    flexDirection: "column",
-    gap: 4
+    gap: spacing$1(3),
+    width: responsive$2({
+      0: "100%",
+      3: "min(90vw, 200px)"
+    }),
+    p: 2
   },
-  ".autoscrollContainer": {
+  ".file_box__icon": {
+    flexShrink: 0
+  },
+  ".file_box__name": {
+    boxSizing: "border-box",
+    flexGrow: 1,
+    margin: "0px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  ".file_box__remove": {
+    flexShrink: 0,
+    p: 4
+  }
+};
+
+const message = {
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  ".closeButton": {
+    borderRadius: "5px",
+    right: "0px",
+    top: "-2px",
+    zIndex: "15",
+    position: "absolute",
+    variant: "buttons.icon-outline-danger"
+  },
+  genericBox: {
+    margin: "10px",
     display: "flex",
     flexDirection: "column",
-    width: "100%",
-    gap: 3,
-    p: 3
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px"
+  },
+  fileName: {
+    bottom: "4px",
+    right: "4px",
+    fontSize: "12px",
+    color: "#333",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    width: "inherit",
+    textAlign: "center",
+    px: "5px"
+  },
+  textBox: {
+    variant: "layout.common.components.aiMessage.genericBox",
+    width: "50px",
+    padding: "10px",
+    backgroundColor: "#fff",
+    border: "1px solid #ddd",
+    borderRadius: "4px",
+    position: "relative"
+  },
+  textSnippet: {
+    bottom: "4px",
+    right: "4px",
+    fontSize: "12px",
+    color: "#555"
   }
 };
 
-const chat = {
+const assistant = {
+  floatingAssistant: {
+    "& div.modal__content[class]": {
+      p: 3,
+      width: "min(90vw, 500px)"
+    },
+    ".modal__main": {
+      maxWidth: "unset",
+      overflow: "hidden"
+    }
+  }
+};
+
+const newChat = {
   /* PREPEND HERE */
+  assistant,
   form,
-  history
+  history,
+  controller,
+  attachments,
+  message
 };
 
 const common = (theme) => {
@@ -4953,7 +5383,8 @@ const common = (theme) => {
     tables: tables(theme),
     components,
     trees,
-    tooltips
+    tooltips,
+    newChat
     /* PREPEND HERE */
   };
 };
@@ -5713,7 +6144,7 @@ async function getRemarkable(extensions) {
 
 const parseMarkdown = async (options) => {
   const markdownLibrary = await getRemarkable(options.extensions);
-  const css = (await import('./styles-CHGH27gK.js')).markdownParserStyles ?? new ErrorImporting();
+  const css = (await import('./styles-aaU5Rq9Y.js')).markdownParserStyles ?? new ErrorImporting();
   if (css instanceof ErrorImporting)
     throw new Error("Could not import css, cannot continue");
   const html = options.htmlTemplate ?? (await import('./html-B-K0BIiw.js')).markdownHtml ?? new ErrorImporting();
@@ -6171,4 +6602,4 @@ class MarkdownBuilder {
 }
 
 export { ApiaThemeProvider as A, Form as F, MarkdownBlock as M, getColorStates as a, getColorsAndStatesByDefinition as b, getColorsAndStatesByPath as c, getColorsByDefinition as d, getColorsByPath as e, getOneColorState as f, getColorState as g, applyStatesGetColor as h, makeStyledComponent as i, injectStyles as j, getSpacingLayouts as k, spacing as l, markdownExtensions as m, smallButton as n, focusOutline as o, parsePalette as p, getVariant as q, responsive$1 as r, spacingLayouts as s, MarkdownBuilder as t, useMainTheme as u, parseMarkdown as v, MarkdownList as w, MarkdownParagraph as x, MarkdownTable as y, MarkdownTableOfContents as z };
-//# sourceMappingURL=index-DGezuU-i.js.map
+//# sourceMappingURL=index-DY2si0MO.js.map