@katechat/ui 1.0.0

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

@@ -0,0 +1,64 @@
+import React, { useMemo } from "react";
+import { Text, Group, Avatar } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { IconRobot } from "@tabler/icons-react";
+
+import { Message, Model } from "@/core";
+import { ProviderIcon } from "@/components/icons/ProviderIcon";
+import { MessageStatus } from "./MessageStatus";
+import { CopyMessageButton } from "./controls/CopyMessageButton";
+
+import classes from "./ChatMessage.module.scss";
+
+interface IProps {
+  message: Message;
+  parentIndex: number;
+  index: number;
+  models?: Model[];
+  plugins?: React.ReactNode;
+}
+
+export const LinkedChatMessage = ({ message, parentIndex, index, plugins, models }: IProps) => {
+  const model = useMemo(() => {
+    return models?.find(m => m.modelId === message.modelId);
+  }, [models, message.modelId]);
+
+  return (
+    <Carousel.Slide key={message.id} className={classes.linkedMessageContainer}>
+      <Group align="center">
+        <Avatar radius="xl" size="md">
+          {model ? <ProviderIcon apiProvider={model.apiProvider} provider={model.provider} /> : <IconRobot />}
+        </Avatar>
+        <Group gap="xs">
+          <Text size="sm" fw={500} c="teal">
+            {message.modelName}
+          </Text>
+          {message.status && <MessageStatus status={message.status} />}
+          {message.statusInfo && (
+            <Text size="xs" c="dimmed">
+              {message.statusInfo}
+            </Text>
+          )}
+        </Group>
+      </Group>
+
+      <div className={classes.message}>
+        {message.html ? (
+          message.html.map((part: string, index: number) => (
+            <div key={index} dangerouslySetInnerHTML={{ __html: part }} />
+          ))
+        ) : (
+          <div>{message.content}</div>
+        )}
+
+        <div className={classes.messageFooter}>
+          <CopyMessageButton messageId={message.id} messageIndex={parentIndex} linkedMessageIndex={index} />
+
+          {plugins}
+        </div>
+      </div>
+    </Carousel.Slide>
+  );
+};
+
+LinkedChatMessage.displayName = "LinkedChatMessage";

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Badge, DefaultMantineColor } from "@mantine/core";
+import { ResponseStatus } from "@/core/message";
+
+const TITLE_MAP: Record<ResponseStatus, string> = {
+  [ResponseStatus.IN_PROGRESS]: "In Progress",
+  [ResponseStatus.COMPLETED]: "Completed",
+  [ResponseStatus.RAG_SEARCH]: "RAG Search",
+  [ResponseStatus.WEB_SEARCH]: "Web Search",
+  [ResponseStatus.CODE_INTERPRETER]: "Code Interpreter",
+  [ResponseStatus.TOOL_CALL]: "Tool Call",
+  [ResponseStatus.REASONING]: "Reasoning",
+  [ResponseStatus.ERROR]: "Error",
+  [ResponseStatus.TOOL_CALL_COMPLETED]: "Tool Call Completed",
+};
+
+const COLOR_MAP: Record<ResponseStatus, DefaultMantineColor> = {
+  [ResponseStatus.IN_PROGRESS]: "blue",
+  [ResponseStatus.COMPLETED]: "green",
+  [ResponseStatus.RAG_SEARCH]: "orange",
+  [ResponseStatus.WEB_SEARCH]: "teal",
+  [ResponseStatus.CODE_INTERPRETER]: "teal",
+  [ResponseStatus.TOOL_CALL]: "cyan",
+  [ResponseStatus.REASONING]: "yellow",
+  [ResponseStatus.ERROR]: "red",
+  [ResponseStatus.TOOL_CALL_COMPLETED]: "green",
+};
+
+export const MessageStatus = ({ status }: { status: ResponseStatus }) => {
+  const title = TITLE_MAP[status] || status;
+  const color = COLOR_MAP[status] || "indigo";
+
+  return (
+    <Badge color={color} variant="light">
+      {title}
+    </Badge>
+  );
+};

package/src/components/chat/message/controls/CopyMessageButton.tsx

@@ -0,0 +1,32 @@
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconCopy, IconCopyCheck } from "@tabler/icons-react";
+import React from "react";
+
+export const CopyMessageButton = ({
+  messageId,
+  messageIndex,
+  linkedMessageIndex,
+}: {
+  messageId: string;
+  messageIndex: number;
+  linkedMessageIndex?: number;
+}) => (
+  <>
+    <Tooltip label="Copy message" position="top" withArrow>
+      <ActionIcon
+        className="copy-message-btn"
+        data-message-id={messageId}
+        data-message-index={messageIndex}
+        data-message-linked-index={linkedMessageIndex}
+        size="sm"
+        color="gray"
+        variant="transparent"
+      >
+        <IconCopy />
+      </ActionIcon>
+    </Tooltip>
+    <ActionIcon disabled size="sm" className="check-icon">
+      <IconCopyCheck />
+    </ActionIcon>
+  </>
+);

package/src/components/chat/message/index.ts

@@ -0,0 +1,4 @@
+export * from "./MessageStatus";
+export * from "./ChatMessage";
+export * from "./ChatMessagePreview";
+export * from "./LinkedChatMessage";

package/src/components/icons/ProviderIcon.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  IconBrandOpenai,
+  IconBrandAws,
+  IconServer,
+  IconBrandYandex,
+  IconMessageChatbot,
+  IconAi,
+  IconBrandMeta,
+  IconBrandMedium,
+  IconBrandGoogle,
+} from "@tabler/icons-react";
+import { ApiProvider } from "@/core/ai";
+
+export const ProviderIcon = ({
+  apiProvider,
+  provider,
+  size = 24,
+}: {
+  apiProvider: ApiProvider;
+  provider?: string;
+  size?: number;
+}) => {
+  switch (apiProvider) {
+    case "open_ai":
+      return <IconBrandOpenai size={size} />;
+    case "aws_bedrock":
+      switch (provider?.toLowerCase()) {
+        case "amazon":
+          return <IconBrandAws size={size} />;
+        case "anthropic":
+          return <IconAi size={size} />;
+        case "mistral ai":
+          return <IconBrandMedium size={size} />;
+        case "meta":
+          return <IconBrandMeta size={size} />;
+
+        default:
+          return <IconBrandAws size={size} />;
+      }
+    case "yandex_fm":
+      return <IconBrandYandex size={size} />;
+    case "google_vertex_ai":
+      return <IconBrandGoogle size={size} />;
+
+    default:
+      return <IconMessageChatbot size={size} />;
+  }
+};

package/src/components/icons/index.ts

@@ -0,0 +1 @@
+export * from "./ProviderIcon";

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./chat";
+export * from "./modal";
+export * from "./icons";

package/src/components/modal/ImagePopup.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useCallback } from "react";
+import { Image, Text, Group, Stack, ActionIcon, Modal, Tooltip } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { useNavigate } from "react-router-dom";
+import { IconExternalLink } from "@tabler/icons-react";
+import { ok } from "@/lib/assert";
+
+interface IProps {
+  fileName: string;
+  fileUrl: string;
+  mimeType?: string;
+  createdAt?: string;
+  sourceUrl?: string;
+  sourceTitle?: string;
+  onClose: () => void;
+}
+
+export const ImagePopup: React.FC<IProps> = ({
+  fileName,
+  fileUrl,
+  mimeType,
+  createdAt,
+  sourceUrl,
+  sourceTitle,
+  onClose,
+}) => {
+  const navigate = useNavigate();
+  const [opened, { open, close }] = useDisclosure(false);
+
+  useEffect(() => {
+    if (fileUrl) {
+      open();
+    }
+  }, [fileUrl, open]);
+
+  const handleClose = useCallback(() => {
+    onClose();
+    close();
+  }, [onClose, close]);
+
+  const navigateToChat = useCallback(() => {
+    ok(sourceUrl);
+    navigate(sourceUrl);
+    handleClose();
+  }, [navigate, sourceUrl, handleClose]);
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  // Image Preview Modal
+  return (
+    <Modal opened={opened} onClose={handleClose} size="xl" title="Image Preview" centered>
+      {fileUrl && (
+        <Stack gap="md">
+          <Image src={fileUrl} alt={fileName} fit="contain" mah="70vh" />
+
+          <Group justify="space-between">
+            <div>
+              <Text size="sm" fw={500}>
+                {fileName}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {createdAt ? formatDate(createdAt) + " •" : ""} {mimeType}
+              </Text>
+            </div>
+
+            {sourceUrl && (
+              <Group gap="xs">
+                <Tooltip label="Open source">
+                  <ActionIcon variant="light" onClick={navigateToChat}>
+                    <IconExternalLink size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+            )}
+          </Group>
+
+          {sourceUrl && (
+            <Text size="sm" c="dimmed">
+              From:{" "}
+              <Text span c="blue" style={{ cursor: "pointer" }} onClick={navigateToChat}>
+                {sourceTitle || sourceUrl}
+              </Text>
+            </Text>
+          )}
+        </Stack>
+      )}
+    </Modal>
+  );
+};

package/src/components/modal/index.ts

@@ -0,0 +1 @@
+export * from "./ImagePopup";

package/src/controls/FileDropzone/FileDropzone.module.scss

@@ -0,0 +1,15 @@
+.dropzone {
+  cursor: pointer;
+  &:hover {
+    color: var(--mantine-color-brand-6);
+  }
+}
+
+.dragging {
+  color: var(--mantine-color-brand-6);
+}
+
+.disabled {
+  color: var(--mantine-color-gray-4);
+  cursor: not-allowed;
+}

package/src/controls/FileDropzone/FileDropzone.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Group, Tooltip, Box } from "@mantine/core";
+import { IconFileUpload } from "@tabler/icons-react";
+import { notEmpty } from "@/lib/assert";
+import classes from "./FileDropzone.module.scss";
+
+interface IProps {
+  disabled?: boolean;
+  uploadFormats?: string[];
+  onFilesAdd: (images: File[]) => void;
+}
+
+export const IMAGE_UPLOAD_FORMATS = ["image/jpeg", "image/png", "image/webp"];
+
+export const FileDropzone: React.FC<IProps> = ({ onFilesAdd, disabled, uploadFormats = IMAGE_UPLOAD_FORMATS }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const dropzoneRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Handle paste events for clipboard images
+  useEffect(() => {
+    const handlePaste = (e: ClipboardEvent) => {
+      if (disabled) return;
+      if (e.clipboardData && e.clipboardData.items) {
+        const files = Array.from(e.clipboardData.items)
+          .map(f => f.getAsFile())
+          .filter(notEmpty);
+
+        if (files.length > 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          onFilesAdd(files);
+        }
+      }
+    };
+
+    document.addEventListener("paste", handlePaste);
+    return () => {
+      document.removeEventListener("paste", handlePaste);
+    };
+  }, [onFilesAdd, disabled]);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      if (disabled) return;
+
+      const files =
+        e.dataTransfer.files && e.dataTransfer.files.length > 0
+          ? Array.from(e.dataTransfer.files).filter(f => f.size > 0)
+          : [];
+
+      onFilesAdd(files);
+    },
+    [onFilesAdd]
+  );
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        const files = Array.from(e.target.files).filter(f => f.size > 0);
+        if (files.length) {
+          onFilesAdd(files);
+        }
+        if (fileInputRef.current) {
+          fileInputRef.current.value = ""; // Reset file input value
+        }
+      }
+    },
+    [onFilesAdd]
+  );
+
+  const openFileDialog = () => {
+    if (disabled) return;
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <>
+      <Box
+        ref={dropzoneRef}
+        className={`drop-zone ${classes.dropzone} ${isDragging ? classes.dragging : ""} ${disabled ? classes.disabled : ""}`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={openFileDialog}
+      >
+        <Group justify="center" gap="md" className="drop-zone-control">
+          <Tooltip label="Click or drop an image/document here" position="top">
+            <IconFileUpload size={32} stroke={1.5} />
+          </Tooltip>
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            accept={uploadFormats?.join(",")}
+            onChange={handleFileSelect}
+            className={classes.fileInput}
+            style={{ display: "none" }}
+            disabled={disabled}
+          />
+        </Group>
+      </Box>
+    </>
+  );
+};

package/src/controls/index.ts

@@ -0,0 +1 @@
+export * from "./FileDropzone/FileDropzone";

package/src/core/ai.ts

@@ -0,0 +1 @@
+export type ApiProvider = "AWS_BEDROCK" | "OPEN_AI" | "YANDEX_FM" | "GOOGLE_VERTEX_AI" | "DEEPSEEK" | "ANTHROPIC";

package/src/core/index.ts

@@ -0,0 +1,4 @@
+export * from "./message";
+export * from "./model";
+export * from "./user";
+export * from "./ai";

package/src/core/message.ts

@@ -0,0 +1,59 @@
+import { User } from "./user";
+
+export enum MessageType {
+  MESSAGE = "message",
+  SYSTEM = "system",
+}
+
+export enum MessageRole {
+  USER = "user",
+  ASSISTANT = "assistant",
+  ERROR = "error",
+  SYSTEM = "system",
+}
+
+export enum ResponseStatus {
+  IN_PROGRESS = "in_progress",
+  RAG_SEARCH = "rag_search",
+  WEB_SEARCH = "web_search",
+  CODE_INTERPRETER = "code_interpreter",
+  TOOL_CALL = "tool_call",
+  TOOL_CALL_COMPLETED = "tool_call_completed",
+  REASONING = "reasoning",
+  COMPLETED = "completed",
+  ERROR = "error",
+}
+
+export interface Message<TUser = User, TMetadata = Record<string, unknown>> {
+  id: string;
+  chatId: string;
+  content: string;
+  html?: string[];
+  role: MessageRole;
+  modelId?: string;
+  modelName?: string;
+  user?: TUser;
+  createdAt: string;
+  updatedAt: string;
+  streaming?: boolean;
+  linkedToMessageId?: string;
+  linkedMessages?: Message<TUser, TMetadata>[];
+  metadata?: TMetadata;
+  status?: ResponseStatus;
+  statusInfo?: string;
+}
+
+export interface PluginProps<TMessage = Message> {
+  message: TMessage;
+  disabled?: boolean;
+  onAddMessage?: (message: TMessage) => void;
+  onAction?: (messageId: string) => void;
+  onActionEnd?: (messageId: string) => void;
+  onMessageDeleted?: (args: { messagesToDelete?: TMessage[]; deleteAfter?: TMessage }) => void;
+}
+
+export interface ImageInput {
+  fileName: string;
+  mimeType: string;
+  bytesBase64: string;
+}

package/src/core/model.ts

@@ -0,0 +1,23 @@
+import { ApiProvider } from "./ai";
+import { User } from "./user";
+
+export enum ModelType {
+  CHAT = "CHAT",
+  EMBEDDING = "EMBEDDING",
+  IMAGE_GENERATION = "IMAGE_GENERATION",
+  AUDIO_GENERATION = "AUDIO_GENERATION",
+  OTHER = "OTHER",
+}
+
+export interface Model<TUser = User> {
+  id: string;
+  name: string;
+  modelId: string;
+  apiProvider: ApiProvider;
+  type: ModelType;
+  provider: string;
+  isActive: boolean;
+  imageInput?: boolean;
+  maxInputTokens?: number;
+  user?: TUser;
+}

package/src/core/user.ts

@@ -0,0 +1,8 @@
+export interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  avatarUrl?: string;
+  defaultModelId?: string;
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useIntersectionObserver } from "./useIntersectionObserver";
+export * from "./useTheme";

package/src/hooks/useIntersectionObserver.ts

@@ -0,0 +1,24 @@
+import { DependencyList, useEffect, useRef } from "react";
+
+export function useIntersectionObserver<T extends HTMLElement>(callback: () => void, deps: DependencyList, delay = 0) {
+  const observer = useRef<IntersectionObserver | null>(null);
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    observer.current?.disconnect();
+    const timeoutId = setTimeout(() => {
+      observer.current = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting) callback();
+      });
+
+      if (ref.current) observer.current.observe(ref.current);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeoutId);
+      observer.current?.disconnect();
+    };
+  }, [deps, callback]);
+
+  return ref;
+}

package/src/hooks/useTheme.tsx

@@ -0,0 +1,66 @@
+import React, { createContext, useContext, useEffect } from "react";
+import { useLocalStorage } from "@mantine/hooks";
+
+type ColorScheme = "light" | "dark" | "auto";
+
+// Define the ThemeContext type
+interface ThemeContextType {
+  colorScheme: ColorScheme;
+  setColorScheme: (value: ColorScheme) => void;
+  toggleColorScheme: () => void;
+}
+
+// Create the context
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// Theme provider component
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // Use localStorage to store theme preference
+  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
+    key: "ui-theme",
+    defaultValue: "light",
+  });
+
+  // Apply theme changes to document
+  useEffect(() => {
+    if (colorScheme === "auto") {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      document.documentElement.dataset.mantine = prefersDark ? "dark" : "light";
+    } else {
+      document.documentElement.dataset.mantine = colorScheme;
+    }
+  }, [colorScheme]);
+
+  // Toggle between light and dark themes
+  const toggleColorScheme = () => {
+    const newColorScheme = colorScheme === "dark" ? "light" : "dark";
+    setColorScheme(newColorScheme);
+    document.documentElement.dataset.mantine = newColorScheme;
+  };
+
+  // Listen for system color scheme changes if set to 'auto'
+  useEffect(() => {
+    if (colorScheme === "auto") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const handleChange = (e: MediaQueryListEvent) => {
+        document.documentElement.dataset.mantine = e.matches ? "dark" : "light";
+      };
+
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+  }, [colorScheme]);
+
+  return (
+    <ThemeContext.Provider value={{ colorScheme, setColorScheme, toggleColorScheme }}>{children}</ThemeContext.Provider>
+  );
+};
+
+// Custom hook to use the theme context
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./core";
+export * from "./components";
+export * from "./controls";
+export * from "./hooks";
+export * from "./lib/markdown.parser";