@katechat/ui 1.0.1 → 1.0.3

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

@@ -1,378 +0,0 @@
-.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

@@ -1,271 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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>
-  );
-};