@katechat/ui 1.0.2 → 1.0.3

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

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

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

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

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

package/src/components/icons/ProviderIcon.tsx

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

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

package/src/components/index.ts

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

package/src/components/modal/ImagePopup.tsx

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

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

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

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

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

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

package/src/core/ai.ts

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

package/src/core/index.ts

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

package/src/core/message.ts

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

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

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

package/src/hooks/index.ts

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

package/src/hooks/useIntersectionObserver.ts

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

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

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