@katechat/ui 1.0.0

package/src/components/chat/message/ChatMessage.module.scss

@@ -0,0 +1,378 @@
+.messageContainer {
+  width: 100%;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: row;
+
+  .main,
+  .linked {
+    padding: var(--mantine-spacing-md);
+    flex-grow: 1;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--mantine-radius-md);
+  }
+
+  .linked {
+    margin: 0 var(--mantine-spacing-md);
+  }
+
+  .linkedToggle {
+    display: none;
+  }
+}
+
+@media (max-width: 1280px) {
+  .messageContainer {
+    flex-direction: column;
+    position: relative;
+
+    .linkedToggle {
+      position: absolute;
+      right: 0.5rem;
+      top: 0.5rem;
+      display: flex;
+      z-index: 5;
+    }
+
+    .main,
+    .linked {
+      width: 100%;
+      margin: 0;
+      border-radius: 0;
+    }
+
+    .hidden {
+      display: none;
+    }
+  }
+}
+
+.linkedMessageContainer {
+  width: 100%;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.message {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: var(--mb-padding, var(--mantine-spacing-sm));
+  border-radius: var(--mantine-radius-md);
+
+  margin-top: var(--mantine-spacing-xs);
+
+  :global p {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  :global blockquote {
+    padding: 0 var(--mb-padding, var(--mantine-spacing-sm));
+    border-left: 0.5rem solid var(--mantine-color-default-border);
+    margin: 0.25rem 0;
+  }
+
+  :global hr {
+    width: 100%;
+    margin: 0.5rem 0 0.25rem;
+    border: none;
+    border-top: 1px solid var(--mantine-color-default-border);
+  }
+
+  :global img {
+    max-width: 256px;
+    max-height: 256px;
+    align-self: center;
+    height: auto;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+
+  &.preview {
+    height: 200px;
+    padding: var(--mb-padding, var(--mantine-spacing-sm)) 0 0 0;
+    font-size: 80%;
+
+    :global img {
+      max-width: 50%;
+      height: auto;
+    }
+  }
+
+  .detailsBlock {
+    margin-top: 1rem;
+    font-size: 80%;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    :global ol,
+    :global ul {
+      margin: 0.25rem 0;
+      padding: 0 0 0 1rem;
+    }
+
+    :global .message-details-header {
+      margin-bottom: var(--mantine-spacing-md);
+      margin-left: 1rem;
+
+      :global svg {
+        color: var(--mantine-color-gray-7);
+      }
+    }
+
+    :global .message-details-content {
+      padding-left: var(--mantine-spacing-md);
+      border-left: 1px solid var(--mantine-color-gray-7);
+      margin-left: 1.5rem;
+    }
+  }
+
+  :global table {
+    margin-top: var(--mantine-spacing-md);
+    margin-bottom: var(--mantine-spacing-md);
+    border-spacing: 0;
+
+    td,
+    th {
+      padding: var(--mb-padding, var(--mantine-spacing-xs));
+      margin: 0;
+      border-top: 1px solid var(--mantine-color-default-border);
+      border-left: 1px solid var(--mantine-color-default-border);
+    }
+
+    tr td:last-child,
+    tr th:last-child {
+      border-right: 1px solid var(--mantine-color-default-border);
+    }
+    tr:last-child td {
+      border-bottom: 1px solid var(--mantine-color-default-border);
+    }
+
+    tr:nth-child(2n) {
+      background-color: var(--mantine-color-dark-5);
+    }
+
+    thead {
+      tr {
+        background-color: var(--mantine-color-dark-5);
+      }
+
+      tr:first-child th:first-child {
+        border-top-left-radius: var(--mantine-radius-md);
+      }
+      tr:first-child th:last-child {
+        border-top-right-radius: var(--mantine-radius-md);
+      }
+    }
+
+    tr:last-child td:first-child {
+      border-bottom-left-radius: var(--mantine-radius-md);
+    }
+    tr:last-child td:last-child {
+      border-bottom-right-radius: var(--mantine-radius-md);
+    }
+  }
+
+  :global pre {
+    margin: 0.5rem 0;
+    padding: 1em;
+    clip-path: none;
+    font-size: 90%;
+    transition: all var(--theme-default-time) ease;
+    font-family: var(--monospace-font-family);
+    overflow-x: auto;
+  }
+
+  :global .code-header {
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    padding: 0.25rem 1rem 0.25rem 0.5rem;
+    border-top-right-radius: 0.25em;
+    border-top-left-radius: 0.25em;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    white-space: normal;
+    gap: 0.5rem;
+
+    :global .title {
+      width: fit-content;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      cursor: pointer;
+      user-select: none;
+      min-height: 2rem;
+
+      :global .header-toggle {
+        margin-right: 0.5rem;
+        display: none;
+        display: inline-block;
+        transform: rotateZ(90deg);
+        transition: transform var(--theme-default-time) ease;
+      }
+    }
+
+    :global .code-header-actions {
+      align-content: flex-end;
+    }
+
+    :global .action-btn {
+      padding: 0.1rem;
+      line-height: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: fit-content;
+      gap: 0.25rem;
+      cursor: pointer;
+    }
+
+    &.collapsed {
+      border-bottom-right-radius: 0.25em;
+      border-bottom-left-radius: 0.25em;
+      margin-bottom: 0;
+      :global .title {
+        :global .header-toggle {
+          transform: translateY(0.2rem) rotateZ(0deg);
+        }
+      }
+
+      .code-copy-btn {
+        display: none;
+      }
+    }
+  }
+
+  :global .code-block {
+    :global pre {
+      margin: 0;
+      white-space: pre;
+    }
+
+    flex-grow: 1;
+    overflow-x: auto;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    border-bottom-right-radius: 0.25em;
+    border-bottom-left-radius: 0.25em;
+    transition:
+      clip-path 0.5s ease,
+      height 0.5s ease,
+      opacity 0.5s ease;
+
+    &.collapsed {
+      clip-path: inset(0 0 100% 0);
+      overflow-y: hidden;
+      height: 0;
+      opacity: 0;
+    }
+  }
+
+  :global .code-data {
+    display: none;
+  }
+
+  :global .code-footer {
+    font-size: 90%;
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 0.7rem;
+
+    &.collapsed {
+      display: none;
+    }
+  }
+
+  :global .katex-html {
+    display: inline-block;
+    margin: 0.5rem 0.5rem 0 0;
+  }
+}
+
+.messageFooter {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0 0.25rem;
+  opacity: 0.5;
+  transition: opacity var(--theme-default-time) ease;
+
+  :global .check-icon {
+    display: none;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+[data-mantine-color-scheme="dark"] {
+  .messageContainer {
+    :global .code-block,
+    :global pre {
+      background-color: var(--mantine-color-dark-6);
+    }
+
+    :global .code-header {
+      background-color: var(--mantine-color-dark-6);
+      &:hover {
+        background-color: var(--mantine-color-dark-5);
+      }
+    }
+
+    .message.user {
+      background-color: var(--mantine-color-dark-9);
+    }
+    .message.error {
+      color: var(--mantine-color-yellow-9);
+    }
+
+    .linked {
+      background-color: var(--mantine-color-dark-8);
+    }
+  }
+}
+
+[data-mantine-color-scheme="light"] {
+  .messageContainer {
+    :global .code-block,
+    :global pre {
+      background-color: var(--mantine-color-gray-3);
+    }
+
+    :global .code-header {
+      background-color: var(--mantine-color-gray-3);
+      &:hover {
+        background-color: var(--mantine-color-gray-4);
+      }
+    }
+
+    .message.user {
+      background-color: var(--mantine-color-blue-0);
+    }
+    .message.error {
+      color: var(--mantine-color-red-5);
+    }
+    .linked {
+      background-color: var(--mantine-color-gray-3);
+    }
+
+    tr:nth-child(2n) {
+      background-color: var(--mantine-color-blue-1);
+    }
+
+    thead tr {
+      background-color: var(--mantine-color-blue-1);
+    }
+  }
+}

package/src/components/chat/message/ChatMessage.tsx

@@ -0,0 +1,271 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { Text, Group, Avatar, Switch, Loader, Button, Collapse, Box } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { IconRobot, IconUser } from "@tabler/icons-react";
+import { MessageRole, Message } from "@/core/message";
+import { LinkedChatMessage, MessageStatus } from "@/components/chat";
+import { debounce } from "lodash";
+import { ProviderIcon } from "@/components/icons/ProviderIcon";
+import { Model } from "@/core";
+import { CopyMessageButton } from "./controls/CopyMessageButton";
+
+import classes from "./ChatMessage.module.scss";
+import carouselClasses from "./ChatMessage.Carousel.module.scss";
+
+interface ChatMessageProps {
+  message: Message;
+  index: number;
+  disabled?: boolean;
+  pluginsLoader?: (message: Message) => React.ReactNode;
+  messageDetailsLoader?: (message: Message) => React.ReactNode;
+  models?: Model[];
+}
+
+export const ChatMessage = (props: ChatMessageProps) => {
+  const { message, index, disabled = false, pluginsLoader, messageDetailsLoader, models } = props;
+
+  const {
+    role,
+    id,
+    modelName,
+    modelId,
+    content,
+    html,
+    updatedAt,
+    user,
+    streaming = false,
+    linkedMessages,
+    status,
+    statusInfo,
+  } = message;
+
+  const componentRef = useRef<HTMLDivElement>(null);
+  const disableActions = useMemo(() => disabled || streaming, [disabled, streaming]);
+  const [showMainMessage, setShowMainMessage] = React.useState(true);
+  const [showDetails, setShowDetails] = React.useState(false);
+
+  const timestamp = new Date(updatedAt).toLocaleString();
+  const isUserMessage = role === MessageRole.USER;
+  const username = isUserMessage
+    ? `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "You"
+    : modelName || "AI";
+
+  const codeHeaderTemplate = `
+        <span class="title">
+            <span class="header-toggle">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M9 6l6 6l-6 6" />
+                </svg>
+            </span>
+            <span class="language"><LANG></span>
+        </span>
+
+        <div class="code-header-actions">
+            <div type="button" class="action-btn mantine-focus-auto mantine-active code-copy-btn">
+                <div class="copy-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="icon icon-tabler icons-tabler-outline icon-tabler-copy">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path
+                            d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
+                        <path
+                            d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+                    </svg>
+                </div>
+                <div class="check-icon" style="display: none;">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="icon icon-tabler icons-tabler-outline icon-tabler-copy-check">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path stroke="none" d="M0 0h24v24H0z" />
+                        <path
+                            d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
+                        <path d="M4.012 16.737a2 2 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+                        <path d="M11 14l2 2l4 -4" />
+                    </svg>
+                </div>
+                <span>Copy</span>
+            </div>
+                </div>
+  `;
+
+  const processCodeElements = useCallback(
+    debounce(() => {
+      if (!componentRef.current) return;
+
+      componentRef.current.querySelectorAll("pre").forEach(pre => {
+        if (pre.querySelector(".code-data") && !pre?.parentElement?.classList?.contains("code-block")) {
+          const data = pre.querySelector(".code-data");
+          const block = document.createElement("div");
+          const header = document.createElement("div");
+          block.className = "code-block";
+          header.className = "code-header";
+          header.innerHTML = codeHeaderTemplate.replaceAll("<LANG>", data?.getAttribute("data-lang") || "plaintext");
+
+          pre.parentNode?.insertBefore(header, pre);
+          pre.parentNode?.insertBefore(block, pre);
+          block.appendChild(pre);
+        }
+      });
+
+      componentRef.current.querySelectorAll("img").forEach(img => {
+        if (!img?.classList?.contains("message-image")) {
+          img.classList.add("message-image");
+          const fileName = img.src.split("/").pop() || "";
+          img.setAttribute("data-file-name", fileName);
+        }
+      });
+    }, 250),
+    []
+  );
+
+  useEffect(() => {
+    if (streaming) return;
+
+    if (componentRef.current) {
+      const observer = new MutationObserver(processCodeElements);
+      observer.observe(componentRef.current, { childList: true, subtree: true });
+      processCodeElements(); // Initial call to inject code elements
+      return () => observer.disconnect();
+    }
+  }, [role, streaming]);
+
+  const toggleDetails = () => setShowDetails(s => !s);
+
+  const details = useMemo(() => {
+    return messageDetailsLoader ? messageDetailsLoader(message) : null;
+  }, [messageDetailsLoader, message]);
+
+  const mainMessage = useMemo(() => {
+    const plugins = pluginsLoader ? pluginsLoader(message) : null;
+    const model = models?.find(m => m.modelId === message?.modelId);
+
+    return (
+      <>
+        <Group align="center">
+          <Avatar color="gray" radius="xl" size="md" src={isUserMessage ? message?.user?.avatarUrl : undefined}>
+            {isUserMessage ? (
+              <IconUser />
+            ) : model ? (
+              <ProviderIcon apiProvider={model.apiProvider} provider={model.provider} />
+            ) : (
+              <IconRobot />
+            )}
+          </Avatar>
+          <Group gap="xs">
+            <Text size="sm" fw={500} c={isUserMessage ? "blue" : "teal"}>
+              {username}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {timestamp}
+            </Text>
+            {status && <MessageStatus status={status} />}
+            {statusInfo && (
+              <Text size="xs" c="dimmed">
+                {statusInfo}
+              </Text>
+            )}
+          </Group>
+        </Group>
+        <div className={`${classes.message} ${classes[role] || ""} ${streaming ? classes.streaming : ""}`}>
+          {streaming && !content && <Loader size="md" mb="md" />}
+
+          {html ? (
+            html.map((part, index) => <div key={index} dangerouslySetInnerHTML={{ __html: part }} />)
+          ) : (
+            <div>{content}</div>
+          )}
+
+          {details && (
+            <Box mt="md">
+              <Group mb={5}>
+                <Button onClick={toggleDetails} p="xs" variant="light" size="xs">
+                  Details
+                </Button>
+              </Group>
+
+              <Collapse in={showDetails}>
+                <div className={classes.detailsBlock}>{details}</div>
+              </Collapse>
+            </Box>
+          )}
+
+          <div className={classes.messageFooter}>
+            <CopyMessageButton messageId={id} messageIndex={index} />
+
+            {plugins}
+          </div>
+        </div>
+      </>
+    );
+  }, [
+    role,
+    username,
+    timestamp,
+    content,
+    html,
+    id,
+    modelName,
+    modelId,
+    models,
+    index,
+    disableActions,
+    details,
+    showDetails,
+    streaming,
+  ]);
+
+  const linkedMessagesCmp = useMemo(() => {
+    if (!linkedMessages || linkedMessages.length === 0) return null;
+
+    return (
+      <Carousel
+        withIndicators={linkedMessages.length > 1}
+        emblaOptions={{ align: "center", loop: true }}
+        slideGap="0"
+        withControls={linkedMessages.length > 1}
+        initialSlide={linkedMessages.findIndex(m => m.streaming)}
+        classNames={carouselClasses}
+      >
+        {linkedMessages.map((linkedMsg, linkedIndex) => (
+          <LinkedChatMessage
+            key={linkedMsg.id}
+            message={linkedMsg}
+            parentIndex={index}
+            index={linkedIndex}
+            models={models}
+            plugins={pluginsLoader?.(linkedMsg)}
+          />
+        ))}
+      </Carousel>
+    );
+  }, [linkedMessages, models, pluginsLoader, index]);
+
+  if (!linkedMessagesCmp) {
+    return (
+      <div className={classes.messageContainer} ref={componentRef}>
+        <div className={classes.main}>{mainMessage}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes.messageContainer} ref={componentRef}>
+      <div className={classes.linkedToggle}>
+        <Switch
+          checked={showMainMessage}
+          onChange={event => setShowMainMessage(event.currentTarget.checked)}
+          label={showMainMessage ? "Main" : "Others"}
+          size="sm"
+        />
+      </div>
+      <div className={[classes.main, showMainMessage ? "" : classes.hidden].join(" ")}>{mainMessage}</div>
+      <div className={[classes.linked, showMainMessage ? classes.hidden : ""].join(" ")}>{linkedMessagesCmp}</div>
+    </div>
+  );
+};
+ChatMessage.displayName = "ChatMessage";

package/src/components/chat/message/ChatMessagePreview.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ScrollArea } from "@mantine/core";
+
+import classes from "./ChatMessage.module.scss";
+
+export const ChatMessagePreview: React.FC<{ html?: string[]; text?: string }> = ({ html, text }) => {
+  return (
+    <ScrollArea type="hover" offsetScrollbars className={[classes.message, classes.preview].join(" ")}>
+      {text ? (
+        <>
+          {html ? (
+            html.map((part, index) => <div key={index} dangerouslySetInnerHTML={{ __html: part }} />)
+          ) : (
+            <div>{text}</div>
+          )}
+        </>
+      ) : (
+        "..."
+      )}
+    </ScrollArea>
+  );
+};