@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/InputsV2/ChatInputV2/MobileChatInputV2.tsx

@@ -0,0 +1,346 @@
+import { Paperclip } from 'lucide-react'
+import {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+    type ChangeEvent,
+    type CSSProperties,
+    type KeyboardEvent,
+} from 'react'
+import styled from 'styled-components'
+import Block from '../../Primitives/Block/Block'
+import PrimitiveTextarea from '../../Primitives/PrimitiveTextArea'
+import PrimitiveButton from '../../Primitives/PrimitiveButton/PrimitiveButton'
+import ChatInputV2AttachmentRow from './ChatInputV2AttachmentRow'
+import {
+    assignForwardedRef,
+    removePxFromValue,
+    truncatePlaceholder,
+} from './utils'
+import { useComponentToken } from '../../../context/useComponentToken'
+import { ChatInputV2MobileTokensType } from './ChatInputV2Mobile.tokens'
+import { InputStateV2 } from '../inputV2.types'
+import { MobileChatInputV2Props } from './ChatInputV2.types'
+
+const HiddenScrollbarTextarea = styled(PrimitiveTextarea)`
+    /* Hide scrollbar for Firefox */
+    scrollbar-width: none;
+
+    /* Hide scrollbar for Chrome, Safari, and Edge */
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Hide scrollbar for IE and Edge */
+    -ms-overflow-style: none;
+`
+
+const MobileChatInputV2 = forwardRef<HTMLDivElement, MobileChatInputV2Props>(
+    function MobileChatInputV2(
+        {
+            webTokens,
+            value,
+            onChange,
+            topContent,
+            secondaryAction,
+            placeholder,
+            attachedFiles,
+            handleAttachClick,
+            onFileRemove,
+            onFileClick = () => {},
+            disabled = false,
+            onSecondaryActionClick,
+            id,
+            onEnter = () => {},
+            onKeyDown: onKeyDownFromProps,
+            style: styleFromProps,
+            ...textareaRest
+        },
+        ref
+    ) {
+        const mobileTokens = useComponentToken(
+            'CHAT_INPUTV2_MOBILE'
+        ) as ChatInputV2MobileTokensType
+        const containerRef = useRef<HTMLDivElement | null>(null)
+
+        const setContainerNode = useCallback(
+            (node: HTMLDivElement | null) => {
+                containerRef.current = node
+                assignForwardedRef(node, ref)
+            },
+            [ref]
+        )
+        const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+        const mergedTextareaStyle = useMemo((): CSSProperties => {
+            const base: CSSProperties = {
+                lineHeight: mobileTokens.inputContainer.lineHeight,
+            }
+            if (
+                styleFromProps &&
+                typeof styleFromProps === 'object' &&
+                !Array.isArray(styleFromProps)
+            ) {
+                return { ...styleFromProps, ...base }
+            }
+            return base
+        }, [styleFromProps, mobileTokens.inputContainer.lineHeight])
+
+        const handleTextareaKeyDown = useCallback(
+            (e: KeyboardEvent<HTMLTextAreaElement>) => {
+                onKeyDownFromProps?.(e)
+                if (e.defaultPrevented) return
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault()
+                    onEnter()
+                }
+            },
+            [onKeyDownFromProps, onEnter]
+        )
+        const [truncatedPlaceholder, setTruncatedPlaceholder] = useState<
+            string | undefined
+        >(placeholder)
+
+        const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+            onChange?.(e.target.value)
+        }
+
+        // Update truncated placeholder when textarea resizes
+        useEffect(() => {
+            const el = textareaRef.current
+            if (!el) return
+
+            const updatePlaceholder = () => {
+                setTruncatedPlaceholder(truncatePlaceholder(el, placeholder))
+            }
+
+            updatePlaceholder()
+            const resizeObserver = new ResizeObserver(updatePlaceholder)
+            resizeObserver.observe(el)
+
+            return () => resizeObserver.disconnect()
+        }, [placeholder])
+
+        useEffect(() => {
+            const el = textareaRef.current
+
+            if (!el) return
+
+            el.style.height = 'auto'
+            el.style.height = `${Math.min(el.scrollHeight, removePxFromValue(mobileTokens.inputContainer.maxHeight ?? 0))}px`
+
+            if (
+                el.scrollHeight >
+                removePxFromValue(mobileTokens.inputContainer.minHeight ?? 0)
+            ) {
+                el.style.borderRadius = mobileTokens.inputContainer
+                    .borderRadius[InputStateV2.FOCUS] as string
+            } else {
+                el.style.borderRadius = mobileTokens.inputContainer
+                    .borderRadius[InputStateV2.DEFAULT] as string
+            }
+        }, [value, mobileTokens.inputContainer])
+
+        const attachmentButtonDimensions = useMemo(() => {
+            const buttonWidth = `${mobileTokens.attachmentButtonDimensions.width}`
+            const gap = mobileTokens.gap
+            const total = `calc(${buttonWidth} + ${gap})`
+
+            return {
+                buttonWidth,
+                gap,
+                total,
+            }
+        }, [mobileTokens.attachmentButtonDimensions.width, mobileTokens.gap])
+
+        /** Reserve space for the absolutely positioned secondary action (right + width from tokens). */
+        const textareaPaddingRight = useMemo(() => {
+            if (!secondaryAction) return 0
+            const { right, width } = mobileTokens.secondaryAction
+            const rightCss =
+                typeof right === 'number' ? `${right}px` : String(right)
+            const widthCss =
+                typeof width === 'number' ? `${width}px` : String(width)
+            return `calc(${rightCss} + ${widthCss})`
+        }, [secondaryAction, mobileTokens.secondaryAction])
+
+        return (
+            <Block
+                display="flex"
+                flexDirection="column"
+                gap={mobileTokens.gap}
+                ref={setContainerNode}
+            >
+                {attachedFiles && attachedFiles.length > 0 && (
+                    <Block
+                        display="flex"
+                        gap={mobileTokens.gap}
+                        marginLeft={attachmentButtonDimensions.total}
+                    >
+                        <ChatInputV2AttachmentRow
+                            attachedFiles={attachedFiles}
+                            onFileRemove={onFileRemove || (() => {})}
+                            onFileClick={onFileClick}
+                            outerContainerRef={containerRef}
+                            gap={`${mobileTokens.gap}`}
+                            tokens={webTokens}
+                        />
+                    </Block>
+                )}
+                {topContent}
+
+                <Block
+                    display="flex"
+                    width="100%"
+                    gap={`${mobileTokens.gap}`}
+                    position="relative"
+                    alignItems="stretch"
+                >
+                    <Block
+                        alignSelf="stretch"
+                        display="flex"
+                        alignItems="end"
+                        justifyContent="center"
+                    >
+                        <PrimitiveButton
+                            disabled={disabled}
+                            width={
+                                mobileTokens.attachmentButtonDimensions.width
+                            }
+                            height={
+                                mobileTokens.attachmentButtonDimensions.height
+                            }
+                            onClick={handleAttachClick}
+                            aria-label="Attach files"
+                            display="flex"
+                            alignItems="center"
+                            justifyContent="center"
+                            borderRadius={
+                                mobileTokens.attachmentButtonDimensions
+                                    .borderRadius
+                            }
+                            border={
+                                mobileTokens.attachmentButtonDimensions.border
+                            }
+                            backgroundColor={
+                                mobileTokens.attachmentButtonDimensions
+                                    .backgroundColor[InputStateV2.DEFAULT]
+                            }
+                            _disabled={{
+                                backgroundColor:
+                                    mobileTokens.attachmentButtonDimensions
+                                        .backgroundColor[InputStateV2.DISABLED],
+                                border: mobileTokens.attachmentButtonDimensions
+                                    .border,
+                            }}
+                            color={
+                                mobileTokens.attachmentButtonDimensions.color
+                            }
+                        >
+                            <Paperclip size={16} />
+                        </PrimitiveButton>
+                    </Block>
+                    <Block
+                        display="flex"
+                        flexDirection="row"
+                        position="relative"
+                        width="100%"
+                        gap={2}
+                    >
+                        <HiddenScrollbarTextarea
+                            {...textareaRest}
+                            backgroundColor={
+                                mobileTokens.inputContainer.backgroundColor
+                            }
+                            disabled={disabled}
+                            id={id}
+                            name="chat-input"
+                            ref={textareaRef}
+                            rows={1}
+                            value={value}
+                            onChange={handleTextareaChange}
+                            placeholder={truncatedPlaceholder}
+                            width="100%"
+                            color={mobileTokens.inputContainer.color}
+                            fontSize={mobileTokens.inputContainer.fontSize}
+                            fontWeight={mobileTokens.inputContainer.fontWeight}
+                            border={
+                                mobileTokens.inputContainer.border[
+                                    InputStateV2.DEFAULT
+                                ]
+                            }
+                            resize="none"
+                            paddingRight={textareaPaddingRight}
+                            paddingLeft={
+                                mobileTokens.inputContainer.paddingLeft
+                            }
+                            paddingTop={mobileTokens.inputContainer.paddingTop}
+                            paddingBottom={
+                                mobileTokens.inputContainer.paddingBottom
+                            }
+                            overflow="auto"
+                            placeholderStyles={{
+                                color: mobileTokens.inputContainer.placeholder
+                                    .color,
+                            }}
+                            borderRadius={
+                                mobileTokens.inputContainer.borderRadius[
+                                    InputStateV2.DEFAULT
+                                ]
+                            }
+                            style={mergedTextareaStyle}
+                            _focus={{
+                                border: mobileTokens.inputContainer.border[
+                                    InputStateV2.FOCUS
+                                ] as string,
+                                boxShadow: mobileTokens.inputContainer
+                                    .boxShadow[InputStateV2.FOCUS] as string,
+                            }}
+                            _disabled={{
+                                cursor: 'not-allowed',
+                            }}
+                            onKeyDown={handleTextareaKeyDown}
+                        />
+
+                        {secondaryAction && (
+                            <PrimitiveButton
+                                disabled={disabled}
+                                aria-label="Secondary action"
+                                position="absolute"
+                                bottom={mobileTokens.secondaryAction.bottom}
+                                right={mobileTokens.secondaryAction.right}
+                                width={mobileTokens.secondaryAction.width}
+                                height={mobileTokens.secondaryAction.height}
+                                borderRadius={
+                                    mobileTokens.secondaryAction.borderRadius
+                                }
+                                backgroundColor={
+                                    mobileTokens.secondaryAction
+                                        .backgroundColor[InputStateV2.DEFAULT]
+                                }
+                                display="flex"
+                                alignItems="center"
+                                justifyContent="center"
+                                onClick={
+                                    disabled
+                                        ? undefined
+                                        : onSecondaryActionClick
+                                }
+                                color={mobileTokens.secondaryAction.color}
+                            >
+                                {secondaryAction}
+                            </PrimitiveButton>
+                        )}
+                    </Block>
+                </Block>
+            </Block>
+        )
+    }
+)
+
+MobileChatInputV2.displayName = 'MobileChatInputV2'
+
+export default MobileChatInputV2

package/lib/components/InputsV2/ChatInputV2/index.ts

@@ -0,0 +1,4 @@
+export { default as ChatInputV2 } from './ChatInputV2'
+export { default as MobileChatInputV2 } from './MobileChatInputV2'
+export * from './ChatInputV2.types'
+export * from './ChatInputV2.tokens'

package/lib/components/InputsV2/ChatInputV2/utils.ts

@@ -0,0 +1,263 @@
+import type { ChangeEvent, MutableRefObject, Ref } from 'react'
+import { filterDuplicateFiles } from '../../ChatInput/utils'
+import { addSnackbarV2 } from '../../SnackbarV2'
+import { SnackbarV2Variant } from '../../SnackbarV2/snackbarV2.types'
+import type { AttachedFile } from './ChatInputV2.types'
+
+export const FILE_NAME_TAG_MAX_LEN = 8
+
+export const truncateFileNameForTag = (name: string): string =>
+    name.length > FILE_NAME_TAG_MAX_LEN
+        ? `${name.slice(0, FILE_NAME_TAG_MAX_LEN)}…`
+        : name
+
+/** Layout buffer and “+ N more” reserve — mirrors `AttachmentFile` in ChatInput. */
+export const ATTACHMENT_ROW_BUFFER_PX = 30
+export const ATTACHMENT_ROW_MORE_BUTTON_RESERVE_PX = 100
+export const ATTACHMENT_ROW_GAP_PX = 8
+
+export const OVERFLOW_MENU_TRIGGER_CLASS = 'overflow-menu-trigger'
+
+/** Outer container resize: ignore tiny fluctuations; treat meaningful width change as ≥10px. */
+export function isSignificantOuterWidthChange(
+    previousWidth: number,
+    nextWidth: number
+): boolean {
+    return Math.abs(nextWidth - previousWidth) > 10
+}
+
+/** Wider viewport → allow re-measuring with more chips visible (see `isExpanding` in row). */
+export function isOuterWidthExpanding(
+    previousWidth: number,
+    nextWidth: number
+): boolean {
+    return nextWidth > previousWidth + 20
+}
+
+/**
+ * After `attachedFiles.length` changes, update visible cutoff without flashing all chips on remove
+ * or jumping to full list on add.
+ */
+export function reduceCutoffForFileCountChange(
+    previousFileCount: number,
+    nextFileCount: number
+): (currentCutoff: number) => number {
+    return (current) => {
+        if (nextFileCount > previousFileCount) {
+            return Math.min(
+                current + (nextFileCount - previousFileCount),
+                nextFileCount
+            )
+        }
+        if (nextFileCount < previousFileCount) {
+            return Math.min(current, nextFileCount)
+        }
+        return current
+    }
+}
+
+/** When true with fewer rendered chips than files, the row first sets the cutoff to all files, then re-runs (viewport widening or file list shrink). */
+export function shouldExpandCutoffToMeasureAllChips(
+    isExpanding: boolean,
+    renderedChipCount: number,
+    attachedFileCount: number
+): boolean {
+    return isExpanding && renderedChipCount < attachedFileCount
+}
+
+type ComputeCutoffArgs = {
+    filesContainer: HTMLElement
+    attachedFileCount: number
+    /** Inter-chip gap in px — must match `gap` on the flex row (from tokens, e.g. `attachedFilesContainer.gap`). */
+    rowGapPx: number
+}
+
+/**
+ * Walk visible chip DOM nodes and compute how many files can stay inline before “+ N more”.
+ */
+export function computeAttachmentRowCutoff({
+    filesContainer,
+    attachedFileCount,
+    rowGapPx,
+}: ComputeCutoffArgs): number {
+    if (attachedFileCount === 0) return 0
+
+    const gap =
+        Number.isFinite(rowGapPx) && rowGapPx >= 0
+            ? rowGapPx
+            : ATTACHMENT_ROW_GAP_PX
+
+    const containerWidth = filesContainer.getBoundingClientRect().width
+
+    const fileItems = Array.from(filesContainer.children).filter(
+        (child) => !child.classList.contains(OVERFLOW_MENU_TRIGGER_CLASS)
+    )
+
+    let totalWidth = 0
+    let optimalCutoff = 0
+
+    for (let i = 0; i < Math.min(fileItems.length, attachedFileCount); i++) {
+        const itemWidth = (fileItems[i] as HTMLElement).getBoundingClientRect()
+            .width
+        const totalGaps = i > 0 ? i * gap : 0
+        const remainingItems = attachedFileCount - (i + 1)
+        const needsMoreButton = remainingItems > 0
+        const requiredSpace =
+            totalWidth +
+            itemWidth +
+            totalGaps +
+            (needsMoreButton
+                ? ATTACHMENT_ROW_MORE_BUTTON_RESERVE_PX + gap
+                : 0) +
+            ATTACHMENT_ROW_BUFFER_PX
+
+        if (requiredSpace <= containerWidth) {
+            totalWidth += itemWidth
+            optimalCutoff = i + 1
+        } else {
+            break
+        }
+    }
+
+    let newCutoff = Math.max(1, Math.min(optimalCutoff, attachedFileCount))
+
+    if (attachedFileCount - newCutoff === 1) {
+        newCutoff = attachedFileCount
+    }
+
+    return newCutoff
+}
+
+export function sliceVisibleAttachedFiles(
+    attachedFiles: AttachedFile[],
+    cutOffIndex: number
+): AttachedFile[] {
+    return attachedFiles.slice(0, cutOffIndex)
+}
+
+export function sliceOverflowAttachedFiles(
+    attachedFiles: AttachedFile[],
+    cutOffIndex: number
+): AttachedFile[] {
+    return attachedFiles.slice(cutOffIndex)
+}
+
+const CHAT_INPUT_V2_TEXTAREA_MAX_HEIGHT_FALLBACK_PX = 200
+const DUPLICATE_FILE_SNACKBAR_MS = 3000
+
+/** Max height in px: explicit prop wins; otherwise parse token `maxHeight` (defaults to 200). */
+export function resolveChatInputV2TextareaMaxHeightPx(
+    textareaMaxHeightProp: number | undefined,
+    tokenMaxHeight: unknown
+): number {
+    if (textareaMaxHeightProp != null) return textareaMaxHeightProp
+    if (tokenMaxHeight == null)
+        return CHAT_INPUT_V2_TEXTAREA_MAX_HEIGHT_FALLBACK_PX
+    const n = parseFloat(String(tokenMaxHeight))
+    return Number.isFinite(n)
+        ? n
+        : CHAT_INPUT_V2_TEXTAREA_MAX_HEIGHT_FALLBACK_PX
+}
+
+/** ChatGPT-style auto-grow: clamp scroll height to `maxHeightPx`. */
+export function applyChatInputV2TextareaAutoHeight(
+    el: HTMLTextAreaElement | null,
+    maxHeightPx: number
+): void {
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, maxHeightPx)}px`
+}
+
+export function notifyChatInputV2DuplicateFiles(
+    duplicateFileNames: string[]
+): void {
+    if (duplicateFileNames.length === 0) return
+    const duplicateCount = duplicateFileNames.length
+    const message =
+        duplicateCount === 1
+            ? `File "${duplicateFileNames[0]}" is already attached`
+            : `${duplicateCount} duplicate file(s) were not added`
+    addSnackbarV2({
+        header: 'Duplicate File',
+        description: message,
+        variant: SnackbarV2Variant.WARNING,
+        duration: DUPLICATE_FILE_SNACKBAR_MS,
+    })
+}
+
+/** Hidden file input: filters duplicates vs `attachedFiles`, shows SnackbarV2, forwards new files. Resets input value. */
+export function handleChatInputV2FileInputChange(
+    e: ChangeEvent<HTMLInputElement>,
+    attachedFiles: AttachedFile[],
+    onAttachFiles: (files: File[]) => void
+): void {
+    const files = Array.from(e.target.files || [])
+    e.target.value = ''
+    if (files.length === 0) return
+
+    const { newFiles, duplicateFiles } = filterDuplicateFiles(
+        files,
+        attachedFiles
+    )
+
+    if (duplicateFiles.length > 0) {
+        notifyChatInputV2DuplicateFiles(duplicateFiles)
+    }
+
+    if (newFiles.length > 0) {
+        onAttachFiles(newFiles)
+    }
+}
+
+export function assignForwardedRef<T>(
+    node: T | null,
+    ref: Ref<T | null> | null | undefined
+): void {
+    if (typeof ref === 'function') {
+        ref(node)
+    } else if (ref != null) {
+        ;(ref as MutableRefObject<T | null>).current = node
+    }
+}
+export const truncatePlaceholder = (
+    textarea: HTMLTextAreaElement | null,
+    placeholder: string | undefined
+): string | undefined => {
+    if (!textarea || !placeholder) return placeholder
+
+    const style = window.getComputedStyle(textarea)
+    const padding =
+        parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)
+    const availableWidth = textarea.clientWidth - padding
+
+    if (availableWidth <= 0) return placeholder
+
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return placeholder
+
+    ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
+
+    if (ctx.measureText(placeholder).width <= availableWidth) {
+        return placeholder
+    }
+
+    // Simple truncation: find max length that fits
+    const ellipsis = '...'
+    let maxLength = placeholder.length
+
+    while (
+        maxLength > 0 &&
+        ctx.measureText(placeholder.slice(0, maxLength) + ellipsis).width >
+            availableWidth
+    ) {
+        maxLength--
+    }
+
+    return maxLength > 0 ? placeholder.slice(0, maxLength) + ellipsis : ellipsis
+}
+
+export const removePxFromValue = (value: number | string): number => {
+    return parseFloat(String(value).replace('px', ''))
+}