@katechat/ui 1.0.0

package/src/components/chat/input/ChatInput.module.scss

@@ -0,0 +1,113 @@
+[data-mantine-color-scheme="light"] {
+  .chatControlsContainer {
+    .chatControls {
+      border: 1px solid var(--app-shell-border-color);
+    }
+
+    .headerRow {
+      background-color: var(--mantine-color-gray-4);
+    }
+
+    .chatInputGroup .chatInput :global(textarea) {
+      border: 1px solid var(--app-shell-border-color);
+    }
+  }
+}
+
+.chatControlsContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+
+  &.hidden {
+    display: none;
+  }
+
+  &.fullHeight {
+    flex-grow: 1;
+    padding-bottom: 15rem;
+  }
+
+  .chatControls {
+    border: 1px solid var(--app-shell-border-color);
+    border-radius: var(--mantine-radius-default);
+    background-color: var(--app-shell-border-color);
+  }
+
+  .headerRow {
+    padding: 0.33rem;
+    border-top-left-radius: var(--mantine-radius-default);
+    border-top-right-radius: var(--mantine-radius-default);
+  }
+}
+
+.chatInputContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0.5rem;
+  gap: 0.5rem;
+
+  background-color: var(--mantine-color-body);
+  border-radius: var(--mantine-radius-default);
+
+  .documentsInput {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+    align-items: stretch;
+  }
+
+  &.columned {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-items: stretch;
+
+    .chatInputGroup {
+      align-self: stretch;
+    }
+  }
+
+  .filesList {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+
+    .previewImage {
+      position: relative;
+      background-color: var(--input-bg);
+      height: 64px;
+      border-radius: var(--mantine-radius-default);
+
+      :global img {
+        max-width: 64px;
+        max-height: 64px;
+        object-fit: cover;
+        border-radius: var(--mantine-radius-default);
+      }
+
+      .removeButton {
+        position: absolute;
+        top: 0.1rem;
+        right: 0.1rem;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .chatInputGroup {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+
+    .chatInput {
+      flex-grow: 1;
+
+      :global(textarea) {
+        border: 1px solid var(--app-shell-border-color);
+      }
+    }
+  }
+}

package/src/components/chat/input/ChatInput.tsx

@@ -0,0 +1,259 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Text, Textarea, Button, Group, ActionIcon, Stack } from "@mantine/core";
+import { IconSend, IconX } from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+import { ImageInput } from "@/core";
+import { FileDropzone } from "@/controls";
+
+import classes from "./ChatInput.module.scss";
+
+interface IProps {
+  chatId?: string;
+  loadCompleted?: boolean;
+  disabled?: boolean;
+  fullHeight?: boolean;
+  uploadAllowed?: boolean;
+  streaming: boolean;
+  setSending: (value: boolean) => void;
+  previousMessages?: string[];
+  header?: React.ReactNode;
+  inputPlugins?: React.ReactNode;
+
+  uploadFormats?: string[];
+  maxUploadFileSize?: number;
+  maxImagesCount?: number;
+
+  onSendMessage: (message: string, images?: ImageInput[]) => Promise<void>;
+  onDocumentsUpload?: (documents: File[]) => void;
+}
+
+export const ChatInput = ({
+  loadCompleted = false,
+  disabled = false,
+  fullHeight = false,
+  uploadAllowed = true,
+  streaming,
+  setSending,
+  previousMessages = [],
+  header,
+  inputPlugins,
+  uploadFormats,
+  maxUploadFileSize = 64 * 1024 * 1024,
+  maxImagesCount = 5,
+  onSendMessage,
+  onDocumentsUpload,
+}: IProps) => {
+  const [userMessage, setUserMessage] = useState("");
+  const [selectedImages, setSelectedImages] = useState<ImageInput[]>([]);
+  const [prevImageNdx, setPrevImageNdx] = useState<number>(0);
+  const [isImagesSeek, setIsImagesSeek] = useState<boolean>(false);
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    setPrevImageNdx(previousMessages?.length ? previousMessages.length : 0);
+  }, [loadCompleted, previousMessages]);
+
+  const handleSendMessage = async () => {
+    if (!userMessage?.trim() && !selectedImages.length) return;
+    setSending(true);
+
+    try {
+      setUserMessage("");
+      setSelectedImages([]);
+      await onSendMessage(userMessage, selectedImages);
+    } catch (error) {
+      notifications.show({
+        title: "Error",
+        message: error instanceof Error ? error.message : "Failed to send message",
+        color: "red",
+      });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const handleInputKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      const isEmpty = !userMessage?.trim();
+      if (event.key === "Enter" && !event.shiftKey && !event.altKey) {
+        event.preventDefault();
+        handleSendMessage();
+        setIsImagesSeek(false);
+      } else if (event.key === "ArrowUp" && (isEmpty || isImagesSeek)) {
+        const ndx = Math.max(0, prevImageNdx - 1);
+        setUserMessage(previousMessages[ndx]);
+        setPrevImageNdx(ndx);
+        setIsImagesSeek(true);
+      } else if (event.key === "ArrowDown" && (isEmpty || isImagesSeek)) {
+        const ndx = Math.min(previousMessages.length - 1, prevImageNdx + 1);
+        setUserMessage(previousMessages[ndx]);
+        setPrevImageNdx(ndx);
+        setIsImagesSeek(true);
+      } else {
+        setIsImagesSeek(false);
+      }
+    },
+    [handleSendMessage, userMessage, previousMessages, prevImageNdx]
+  );
+
+  const handleInputChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setUserMessage(event.currentTarget.value);
+  }, []);
+
+  const sendMessageNotAllowed = useMemo(() => {
+    return disabled || streaming || (!userMessage?.trim() && !selectedImages.length);
+  }, [userMessage, selectedImages, streaming, disabled]);
+
+  const handleAddFiles = useCallback(
+    (files: File[]) => {
+      const filesToAdd = files.filter(f => f.size < maxUploadFileSize);
+      if (filesToAdd.length < files.length) {
+        notifications.show({
+          title: "Warning",
+          message: `Some files are too large and were not added (max size: ${maxUploadFileSize / 1024 / 1024} MB)`,
+          color: "yellow",
+        });
+      }
+
+      let imageFiles = filesToAdd.filter(f => f.type?.startsWith("image/"));
+      const documents = filesToAdd.filter(f => !f.type?.startsWith("image/"));
+
+      // Limit images
+      if (imageFiles.length + selectedImages.length > maxImagesCount) {
+        notifications.show({
+          title: "Warning",
+          message: `You can only add up to ${maxImagesCount} images at a time`,
+          color: "yellow",
+        });
+
+        imageFiles = imageFiles.slice(0, maxImagesCount - selectedImages.length);
+      }
+
+      if (imageFiles.length) {
+        Promise.all(
+          imageFiles.map(file => {
+            return new Promise<ImageInput>((resolve, reject) => {
+              const reader = new FileReader();
+              reader.onload = e => {
+                if (e.target?.result) {
+                  const bytesBase64 = e.target.result as string;
+                  resolve({
+                    fileName: file.name,
+                    mimeType: file.type,
+                    bytesBase64,
+                  });
+                } else {
+                  reject(new Error(`Failed to read file: ${file.name}`));
+                }
+              };
+              reader.onerror = err => {
+                reject(new Error(`Failed to read file: ${file.name}, error: ${err}`));
+              };
+              reader.readAsDataURL(file);
+            });
+          })
+        )
+          .then(images => {
+            setSelectedImages(prev => [...prev, ...images]);
+          })
+          .catch(error => {
+            notifications.show({
+              title: "Error",
+              message: error.message || "Failed to read image files",
+              color: "red",
+            });
+          });
+      }
+
+      if (documents.length && onDocumentsUpload) {
+        onDocumentsUpload(documents);
+      } else if (documents.length) {
+        notifications.show({
+          title: "Warning",
+          message: "Document upload is not available in this chat.",
+          color: "orange",
+        });
+      }
+    },
+    [selectedImages, onDocumentsUpload]
+  );
+
+  const handleRemoveImage = (fileName: string): React.MouseEventHandler<HTMLButtonElement> => {
+    return event => {
+      event.stopPropagation();
+      setSelectedImages(prev => prev.filter(f => f.fileName !== fileName));
+    };
+  };
+
+  return (
+    <div
+      className={[
+        classes.chatControlsContainer,
+        fullHeight ? classes.fullHeight : "",
+        loadCompleted ? "" : classes.hidden,
+      ].join(" ")}
+    >
+      {fullHeight ? (
+        <Stack align="center" justify="center" gap="md" mb="lg">
+          <Text c="dimmed" size="lg" ta="center">
+            Start the conversation by sending a message
+          </Text>
+        </Stack>
+      ) : null}
+
+      <div className={classes.chatControls}>
+        {header && (
+          <Group align="center" gap="xs" className={classes.headerRow}>
+            {header}
+          </Group>
+        )}
+
+        <div className={[classes.chatInputContainer, selectedImages.length ? classes.columned : ""].join(" ")}>
+          {uploadAllowed && (
+            <div className={classes.documentsInput}>
+              <FileDropzone onFilesAdd={handleAddFiles} disabled={!uploadAllowed} uploadFormats={uploadFormats} />
+
+              {inputPlugins}
+
+              <div className={classes.filesList}>
+                {selectedImages.map(file => (
+                  <div key={file.fileName} className={classes.previewImage}>
+                    <img src={file.bytesBase64} alt={file.fileName} />
+                    <ActionIcon
+                      className={classes.removeButton}
+                      color="red"
+                      size="xs"
+                      onClick={handleRemoveImage(file.fileName)}
+                    >
+                      <IconX size={16} />
+                    </ActionIcon>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className={classes.chatInputGroup}>
+            <Textarea
+              ref={inputRef}
+              className={classes.chatInput}
+              placeholder="Type your message..."
+              value={userMessage || ""}
+              autosize
+              minRows={1}
+              maxRows={7}
+              onChange={handleInputChange}
+              onKeyDown={handleInputKeyDown}
+              disabled={disabled}
+            />
+            <Button onClick={handleSendMessage} disabled={sendMessageNotAllowed}>
+              <IconSend size={16} /> Send
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,7 @@
+.controls:where([data-orientation="horizontal"]) {
+  bottom: auto !important;
+  top: 0.5rem !important;
+  left: calc(50% - 5rem) !important;
+  width: 10rem !important;
+  padding: 0 !important;
+}