@banbox/chat 1.0.0

package/src/ui/chat/AttachmentPreviewStrip.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import type { FC } from "react";
+import { FileIcon, ChatXIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+/* =======================
+   Helpers
+======================= */
+
+const extColor = (ext: string): string => {
+  const e = ext.toLowerCase();
+
+  if (e === "pdf") {
+    return "text-[#D93025]";
+  }
+  if (e === "ppt" || e === "pptx") {
+    return "text-[#E69138]";
+  }
+  if (e === "doc" || e === "docx") {
+    return "text-[#2B579A]";
+  }
+
+  return "text-[#6B7280]";
+};
+
+/* =======================
+   Types
+======================= */
+
+export type FilePreview = {
+  name: string;
+  sizeMB: number;
+  ext: string;
+  href: string;
+  downloadName?: string;
+};
+
+type FilePreviewChipProps = {
+  name: string;
+  sizeMB: number;
+  ext: string;
+  onRemove: () => void;
+};
+
+type ImageThumbProps = {
+  url: string;
+  onRemove: () => void;
+};
+
+type AttachmentPreviewStripProps = {
+  imgPreviews: string[];
+  filePreviews: FilePreview[];
+  onRemoveImage: (index: number) => void;
+  onRemoveFile: (index: number) => void;
+};
+
+/* =======================
+   Sub Components
+======================= */
+
+export const FilePreviewChip: FC<FilePreviewChipProps> = ({ name, sizeMB, ext, onRemove }) => {
+  return (
+    <div
+      className={cn(
+        "mr-2 inline-flex h-[65px] max-w-[185px] items-center gap-3 whitespace-nowrap rounded-sm",
+        "border border-[#e1e1e1] bg-white px-3 py-2",
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        <div className="min-w-0">
+          <div className="flex items-center gap-1">
+            <FileIcon className={cn("h-[18px] w-[18px]", extColor(ext))} />
+            <div className="truncate text-[13px] font-normal text-black">{name}</div>
+          </div>
+
+          <div className="mt-2 flex items-center gap-2 text-xs text-[#636363]">
+            <span>{sizeMB.toFixed(1)} MB</span>
+            <span className="h-3 w-px bg-[#e1e1e1]" />
+            <span className="uppercase">{ext}</span>
+          </div>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        onClick={onRemove}
+        title="Remove"
+        aria-label="Remove file"
+        className={cn(
+          "grid h-8 w-8 place-items-center rounded-full bg-white text-[#3D3D3D]",
+          "shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5",
+        )}
+      >
+        <ChatXIcon className="h-[18px] w-[18px]" />
+      </button>
+    </div>
+  );
+};
+
+const ImageThumb: FC<ImageThumbProps> = ({ url, onRemove }) => {
+  return (
+    <div
+      className={cn(
+        "relative mr-2 inline-block h-[65px] w-[65px] rounded-sm",
+        "border border-[#e1e1e1] bg-[#F7F7F7]",
+      )}
+    >
+      <img src={url} alt="" className="h-full w-full rounded-sm object-cover" loading="lazy" />
+
+      <button
+        type="button"
+        onClick={onRemove}
+        aria-label="Remove image"
+        title="Remove image"
+        className={cn(
+          "absolute left-1/2 top-1/2 z-10 grid h-6 w-6 -translate-x-1/2 -translate-y-1/2 place-items-center",
+          "rounded-full bg-black/30 text-white",
+          "shadow-[0px_2px_4px_0px_#A5A3AE4D]",
+        )}
+      >
+        <ChatXIcon className="h-4 w-4 text-white" />
+      </button>
+    </div>
+  );
+};
+
+/* =======================
+   Component
+======================= */
+
+/** Single-row, horizontally scrollable preview strip */
+const AttachmentPreviewStrip: FC<AttachmentPreviewStripProps> = ({
+  imgPreviews,
+  filePreviews,
+  onRemoveFile,
+  onRemoveImage,
+}) => {
+  const has = imgPreviews.length > 0 || filePreviews.length > 0;
+
+  if (!has) {
+    return null;
+  }
+
+  return (
+    <div className={cn("mx-auto mb-2 max-w-[410px] overflow-x-auto custom-scroll")}>
+      <div className="flex items-start whitespace-nowrap">
+        {filePreviews.map((file, index) => (
+          <FilePreviewChip
+            key={`${file.name}-${index}`}
+            name={file.name}
+            sizeMB={file.sizeMB}
+            ext={file.ext}
+            onRemove={() => onRemoveFile(index)}
+          />
+        ))}
+
+        {imgPreviews.map((url, index) => (
+          <ImageThumb key={`${url}-${index}`} url={url} onRemove={() => onRemoveImage(index)} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AttachmentPreviewStrip;

package/src/ui/chat/ChatComposerBar.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+import { ArrowSendAngleIcon, ArrowSendIcon, RecordMicIcon, ChatXIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+/* =======================
+   Types
+======================= */
+
+type ChatComposerBarProps = {
+  recording: boolean;
+  seconds: number;
+
+  // typing
+  isTyping: boolean;
+  textRef: React.RefObject<HTMLTextAreaElement | null>;
+  text: string;
+  onTextChange: (v: string) => void;
+  onAutoGrow: () => void;
+
+  // attachments
+  hasAttachments: boolean;
+  canSendArrow: boolean;
+
+  // actions
+  startRecording: () => void;
+  stopRecording: (send: boolean) => void;
+  sendText: () => void;
+  sendAttachments: () => void;
+
+  // util
+  fmtTime: (s: number) => string;
+};
+
+/* =======================
+   Gradients
+======================= */
+
+const idleGradient =
+  "linear-gradient(90.85deg, rgba(51, 201, 212, 0.5) 0%, rgba(39, 83, 251, 0.5) 29.98%, rgba(39, 83, 251, 0.5) 49.97%, rgba(39, 83, 251, 0.5) 64.96%, rgba(235, 67, 255, 0.5) 99.94%)";
+
+const activeGradient =
+  "linear-gradient(90.85deg, #33C9D4 0%, #2753FB 29.98%, #2753FB 49.97%, #2753FB 64.96%, #EB43FF 99.94%)";
+
+/* =======================
+   Component
+======================= */
+
+const ChatComposerBar = ({
+  recording,
+  seconds,
+  isTyping,
+  textRef,
+  text,
+  onTextChange,
+  onAutoGrow,
+  hasAttachments,
+  canSendArrow,
+  startRecording,
+  stopRecording,
+  sendText,
+  sendAttachments,
+  fmtTime,
+}: ChatComposerBarProps) => {
+  const composingRef = useRef(false);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const isActiveBorder = isFocused || recording;
+
+  if (!recording) {
+    return (
+      <div className="flex w-full items-stretch gap-2">
+        <div
+          className="w-full rounded-sm p-px transition-[background] duration-200"
+          style={{
+            background: isActiveBorder ? activeGradient : idleGradient,
+          }}
+        >
+          <div className="flex min-h-[50px] w-full items-center justify-between rounded-[3px] bg-white">
+            <div className="flex w-full items-center justify-between p-[3px]">
+              {!isTyping ? (
+                <button
+                  type="button"
+                  onClick={startRecording}
+                  className="grid h-[46px] w-[46px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95"
+                  title="Record voice"
+                  aria-label="Record voice"
+                >
+                  <RecordMicIcon className="h-6 w-6" />
+                </button>
+              ) : null}
+
+              <textarea
+                ref={textRef}
+                rows={1}
+                autoFocus
+                placeholder="Type a message"
+                className="custom-scroll-hidden max-h-[200px] flex-1 resize-none bg-transparent px-3 py-2 outline-none placeholder:text-[#777]"
+                value={text}
+                onChange={(e) => onTextChange(e.target.value)}
+                onInput={onAutoGrow}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+                onCompositionStart={() => {
+                  composingRef.current = true;
+                }}
+                onCompositionEnd={() => {
+                  composingRef.current = false;
+                  onAutoGrow();
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && e.shiftKey) {
+                    return;
+                  }
+                  if (composingRef.current) {
+                    return;
+                  }
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    if (text.length > 0) {
+                      sendText();
+                    }
+                  }
+                }}
+              />
+            </div>
+
+            {!canSendArrow ? (
+              <div className="grid h-full w-px place-items-center bg-[#E7E7E7]" />
+            ) : null}
+
+            <div className="px-2">
+              {isTyping ? (
+                <div className="flex items-center">
+                  <div className="h-10 w-px border-l border-[#CCCCCC]" />
+                  <button
+                    type="button"
+                    onClick={sendText}
+                    className={cn(
+                      "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full",
+                      "text-[#ff5301] hover:bg-[#f8f8f8]",
+                    )}
+                    title={hasAttachments ? "Send attachments" : "Send"}
+                    aria-label="Send"
+                  >
+                    <ArrowSendAngleIcon className="h-6 w-6" />
+                  </button>
+                </div>
+              ) : (
+                <div className="flex items-center">
+                  <div className="h-10 w-px border-l border-[#CCCCCC]" />
+                  <button
+                    type="button"
+                    onClick={sendAttachments}
+                    disabled={!hasAttachments}
+                    className={cn(
+                      "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
+                      hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]",
+                    )}
+                    title={hasAttachments ? "Send attachments" : "Send"}
+                    aria-label="Send"
+                  >
+                    <ArrowSendIcon className="h-6 w-6" />
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  /* =======================
+     Recording state UI
+  ======================= */
+
+  return (
+    <div className="flex w-full items-stretch gap-2">
+      <div className="w-full rounded-sm p-px" style={{ background: activeGradient }}>
+        <div className="flex h-[52px] w-full items-center justify-between rounded-[3px] bg-white">
+          <button
+            type="button"
+            className="ms-[3px] grid h-[46px] w-[46px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95"
+            aria-label="Recording"
+            title="Recording"
+          >
+            <RecordMicIcon
+              className={cn(
+                "h-6 w-6",
+                seconds % 2 === 0
+                  ? "text-[#929292]"
+                  : "text-[#ff5301]",
+              )}
+            />
+          </button>
+
+          <div className="px-3 text-[13px]">{fmtTime(seconds)}</div>
+
+          <div className="ml-auto flex items-center gap-3 pr-2">
+            <button
+              type="button"
+              onClick={() => stopRecording(false)}
+              className="grid h-8 w-8 place-items-center rounded-full text-[#3D3D3D] hover:bg-black/5"
+              title="Discard"
+              aria-label="Discard recording"
+            >
+              <ChatXIcon className="h-5 w-5" />
+            </button>
+
+            <div className="h-6 w-px bg-[#E7E7E7]" />
+
+            <button
+              type="button"
+              onClick={() => stopRecording(true)}
+              className="grid h-10 w-[40px] place-items-center rounded-full text-[#ff5301]"
+              title={hasAttachments ? "Send attachments" : "Send"}
+              aria-label="Send"
+            >
+              <ArrowSendAngleIcon className="h-6 w-6" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatComposerBar;