@piedata/pieui 1.0.1 → 1.1.0

package/src/components/Chats/ChatCard/ui/components/ChatCardInput.tsx

@@ -0,0 +1,177 @@
+import { CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import ResizableTextarea from './ResizableTextarea'
+// import annyang from 'annyang'
+// import '../../types/annyang.d.ts'
+import SendButton from './SendButton'
+import { Option } from '../../types'
+import AttachFileButton from './AttachFileButton'
+import AttachedFileView from './AttachedFileView'
+import VoiceListeningButton from './VoiceListeningButton'
+import Options from './Options'
+
+export interface ChatCardInputHandle {
+    clear: () => void
+    setValue: (newValue: string) => void
+    setOptions: (newOptions: Option[]) => void
+}
+
+const ChatCardInput = forwardRef<
+    ChatCardInputHandle,
+    {
+        name: string
+        defaultOptions: Option[]
+        defaultValue: string
+        isArea: boolean
+        placeholder: string
+        fileAccept: string
+        optionsPosition: 'top' | 'bottom'
+        icons: Record<'voiceRecordingIcon' | 'sendIcon' | 'cancelIcon' | 'attachFileIcon', string>
+        handleOptionClick: (option: string) => void
+        handleSendMessage: () => void
+        sx: CSSProperties
+    }
+>(
+    (
+        {
+            name,
+            defaultValue,
+            defaultOptions,
+            isArea,
+            placeholder,
+            fileAccept,
+            optionsPosition,
+            icons,
+            handleOptionClick,
+            handleSendMessage,
+            sx,
+        },
+        ref,
+    ) => {
+        const fileInputRef = useRef<HTMLInputElement>(null!)
+        const [selectedFile, setSelectedFile] = useState<File | null>(null)
+        const [value, setValue] = useState<string>(defaultValue)
+        const [options, setOptions] = useState<Option[]>(defaultOptions)
+        const [isListening, setIsListening] = useState(false)
+
+        useImperativeHandle(ref, () => ({
+            clear: () => {
+                setValue('')
+                setSelectedFile(null)
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = ''
+                }
+            },
+            setValue: (newValue: string) => setValue(newValue),
+            setOptions: (newOptions: Array<Option>) => setOptions(newOptions),
+        }))
+
+        useEffect(() => {
+            setValue(defaultValue)
+        }, [defaultValue])
+
+        // useEffect(() => {
+        //     if (annyang) {
+        //         annyang.addCallback('result', (phrases: string[]) => {
+        //             setValue(phrases[0])
+        //         })
+        //         return () => {
+        //             annyang.abort()
+        //             annyang.removeCallback()
+        //         }
+        //     }
+        // }, [])
+
+        const toggleListening = () => {
+            // if (!annyang) return
+            // if (isListening) {
+            //     annyang.abort()
+            //     setIsListening(false)
+            //     handleSendMessage()
+            // } else {
+            //     annyang.start({ autoRestart: true, continuous: true })
+            //     setValue('')
+            //     setIsListening(true)
+            // }
+        }
+
+        return (
+            <div
+                className='flex flex-col items-center gap-[0.1rem]'
+                id={name + '_chat_input'}
+                style={sx}
+            >
+                {options && optionsPosition === 'top' && (
+                    <Options options={options} handleOptionClick={handleOptionClick} />
+                )}
+                <div className='stretch relative flex size-full flex-1 flex-row items-stretch gap-3 last:mb-2 md:mx-4 md:flex-col md:last:mb-6 lg:mx-auto'>
+                    <div className='flex w-full grow flex-row items-center rounded-md bg-transparent'>
+                        {selectedFile ? (
+                            <AttachedFileView
+                                name={name}
+                                selectedFile={selectedFile}
+                                onDropFile={() => {
+                                    setSelectedFile(null)
+                                    if (fileInputRef.current) fileInputRef.current.value = ''
+                                }}
+                            />
+                        ) : !isArea ? (
+                            <input
+                                // ref={fileInputRef as any}
+                                name={name}
+                                value={value}
+                                onChange={(e) => setValue(e.target.value)}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault()
+                                        handleSendMessage()
+                                    }
+                                }}
+                                tabIndex={0}
+                                placeholder={placeholder}
+                                className='m-0 w-full resize-none border-0 bg-transparent outline-none'
+                                style={{ maxHeight: 200, height: '100%', overflowY: 'hidden' }}
+                            />
+                        ) : (
+                            <ResizableTextarea
+                                // ref={fileInputRef as any}
+                                name={name}
+                                value={value}
+                                onChange={(e) => setValue(e.target.value)}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter' && !e.shiftKey) {
+                                        e.preventDefault()
+                                        handleSendMessage()
+                                    }
+                                }}
+                                tabIndex={0}
+                                rows={2}
+                                placeholder={placeholder}
+                                className='m-0 w-full resize-none border-0 bg-transparent p-0 pl-2 pr-7 outline-none md:pl-0'
+                                style={{ maxHeight: 200, height: '100%', minHeight: 24 }}
+                            />
+                        )}
+
+                        <VoiceListeningButton
+                            isListening={isListening}
+                            toggleListening={toggleListening}
+                            icons={icons}
+                        />
+                        <AttachFileButton
+                            name={name}
+                            fileInputRef={fileInputRef}
+                            accept={fileAccept}
+                            onSelectFile={setSelectedFile}
+                            icons={icons}
+                        />
+                        <SendButton onClick={handleSendMessage} icons={icons} />
+                    </div>
+                </div>
+                {options && optionsPosition === 'bottom' && (
+                    <Options options={options} handleOptionClick={handleOptionClick} />
+                )}
+            </div>
+        )
+    },
+)
+
+export default ChatCardInput

package/src/components/Chats/ChatCard/ui/components/ChatOption.tsx

@@ -0,0 +1,25 @@
+import { Option } from '../../types'
+
+const ChatOption = ({
+    option,
+    onClickOption,
+}: {
+    option: Option
+    onClickOption: (title: string) => void
+}) => {
+    return (
+        <div
+            className='flex w-fit cursor-pointer flex-row place-content-center items-center gap-1 rounded-md border border-black bg-white px-2 py-1 text-black'
+            onClick={() => {
+                onClickOption(option.title)
+            }}
+            style={option.sx}
+        >
+            {option.iconPosition === 'start' && <img src={option.iconUrl} alt=''></img>}
+            {option.title}
+            {option.iconPosition === 'end' && <img src={option.iconUrl} alt=''></img>}
+        </div>
+    )
+}
+
+export default ChatOption

package/src/components/Chats/ChatCard/ui/components/Markdown.tsx

@@ -0,0 +1,25 @@
+// import ReactMarkdown from 'react-markdown'
+// import rehypeHighlight from 'rehype-highlight'
+// import 'highlight.js/styles/github.css'
+import { useEffect, useState } from 'react'
+
+function MarkdownRender({ children }: { children: string }) {
+    const [content, setContent] = useState<string>(children)
+
+    useEffect(() => {
+        setContent(children)
+    }, [children])
+
+    return (
+        <div className='max-w-full first:mt-0'>
+            {/*<ReactMarkdown*/}
+            {/*    // rehypePlugins={[rehypeHighlight]}*/}
+            {/*>*/}
+            {/*    {content}*/}
+            {/*</ReactMarkdown>*/}
+            {content}
+        </div>
+    )
+}
+
+export default MarkdownRender

package/src/components/Chats/ChatCard/ui/components/MessageAvatar.tsx

@@ -0,0 +1,17 @@
+import DefaultAvatar from './icons/DefaultAvatar'
+
+function MessageAvatar({ username, avatar }: { username: string; avatar: string | null }) {
+    return (
+        <div className='w-[30px]'>
+            <div className='relative flex size-[30px] items-center justify-center rounded-sm p-1 text-white'>
+                {avatar ? (
+                    <img src={avatar} className='absolute inset-0 rounded' alt={username} />
+                ) : (
+                    <DefaultAvatar />
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default MessageAvatar

package/src/components/Chats/ChatCard/ui/components/MessageCard.tsx

@@ -0,0 +1,80 @@
+import parse from 'html-react-parser'
+import { useState, useEffect } from 'react'
+import MarkdownRender from './Markdown'
+import UI from '../../../../UI'
+import MessageAvatar from './MessageAvatar'
+import ChatOption from './ChatOption'
+import { Message } from '../../types'
+import { SetUiAjaxConfigurationType } from '../../../../../types'
+
+const MessageCard = ({
+    message,
+    handleOptionClick,
+    setUiAjaxConfiguration,
+}: {
+    message: Message
+    handleOptionClick: (option: string) => void
+    setUiAjaxConfiguration?: SetUiAjaxConfigurationType
+}) => {
+    const [copied, setCopied] = useState(false)
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            if (copied) setCopied(false)
+        }, 1000)
+
+        return () => clearTimeout(timeout)
+    }, [copied])
+
+    return (
+        <div className='group w-full border-b border-black/10' id={message.id}>
+            <div
+                className={`flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-3xl xl:max-w-5xl ${message.align === 'center' ? 'm-auto' : ''} ${message.align === 'right' ? 'ml-auto justify-end' : ''} ${message.align === 'left' ? 'mr-auto' : ''} `}
+            >
+                {(message.align === 'left' || message.align === 'center') && (
+                    <div className='relative flex shrink-0 flex-col items-end'>
+                        <MessageAvatar username={message.username} avatar={message.avatar} />
+                    </div>
+                )}
+                <div className='relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]'>
+                    <div
+                        className={`markdown light prose w-full break-words dark:prose-invert first:mt-0 ${message.align === 'right' ? 'flex justify-end self-end' : ''}`}
+                    >
+                        {typeof message.content === 'string' ? (
+                            message.parseMode.toLowerCase() === 'markdown' ? (
+                                <MarkdownRender key={Date.now() + Math.random()}>
+                                    {message.content}
+                                </MarkdownRender>
+                            ) : message.parseMode.toLowerCase() === 'html' ? (
+                                parse(message.content)
+                            ) : (
+                                message.content
+                            )
+                        ) : (
+                            <UI
+                                uiConfig={message.content}
+                                setUiAjaxConfiguration={setUiAjaxConfiguration}
+                            />
+                        )}
+                    </div>
+                    <div className='flex flex-row flex-wrap justify-start gap-1'>
+                        {message.options.map((option, idx) => (
+                            <ChatOption
+                                key={idx}
+                                onClickOption={handleOptionClick}
+                                option={option}
+                            />
+                        ))}
+                    </div>
+                </div>
+                {message.align === 'right' && (
+                    <div className='relative flex shrink-0 flex-col items-end'>
+                        <MessageAvatar username={message.username} avatar={message.avatar} />
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default MessageCard

package/src/components/Chats/ChatCard/ui/components/MessageContent.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+
+const MessageContent = ({
+    name,
+    content,
+    isSent,
+}: {
+    name: string
+    content: string
+    isSent: boolean
+}) => {
+    return (
+        <div className='px-6 py-4'>
+            <div
+                className={clsx(
+                    'text-xl font-medium text-black',
+                    isSent ? 'text-right' : 'text-left',
+                )}
+            >
+                {isSent ? 'You' : name}
+            </div>
+            <p className='text-gray-500'>{content}</p>
+        </div>
+    )
+}
+
+export default MessageContent

package/src/components/Chats/ChatCard/ui/components/MessagesBoard.tsx

@@ -0,0 +1,61 @@
+import MessageCard from './MessageCard'
+import { CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { Message } from '../../types'
+import { SetUiAjaxConfigurationType } from '../../../../../types'
+
+export interface MessagesBoardHandle {
+    addMessage: (message: Message) => void
+    setMessages: (messages: Array<Message>) => void
+    scrollToBottom: () => void
+}
+
+const MessagesBoard = forwardRef<
+    MessagesBoardHandle,
+    {
+        name: string
+        handleOptionClick: (option: string) => void
+        defaultMessages: Message[]
+        sx: CSSProperties
+        setUiAjaxConfiguration?: SetUiAjaxConfigurationType
+    }
+>(({ name, handleOptionClick, defaultMessages, sx, setUiAjaxConfiguration }, ref) => {
+    const [messages, setMessages] = useState<Message[]>(defaultMessages)
+    const containerRef = useRef<HTMLDivElement>(null)
+
+    const scrollToBottom = () => {
+        if (containerRef.current) {
+            containerRef.current.scrollTop = containerRef.current.scrollHeight
+        }
+    }
+
+    useEffect(() => {
+        scrollToBottom()
+    }, [messages])
+
+    useImperativeHandle(ref, () => ({
+        setMessages: (currentMessages: Array<Message>) => setMessages(currentMessages),
+        addMessage: (message: Message) =>
+            setMessages((currentMessages) => [...currentMessages, message]),
+        scrollToBottom: scrollToBottom,
+    }))
+
+    return (
+        <div
+            id={name + '_messages'}
+            className='flex flex-col items-center overflow-y-scroll'
+            style={sx}
+            ref={containerRef}
+        >
+            {messages.map((message) => (
+                <MessageCard
+                    key={message.id}
+                    message={message}
+                    handleOptionClick={handleOptionClick}
+                    setUiAjaxConfiguration={setUiAjaxConfiguration}
+                />
+            ))}
+        </div>
+    )
+})
+
+export default MessagesBoard

package/src/components/Chats/ChatCard/ui/components/Options.tsx

@@ -0,0 +1,20 @@
+import { Option } from '../../types'
+import ChatOption from './ChatOption'
+
+const Options = ({
+    options,
+    handleOptionClick,
+}: {
+    options: Option[]
+    handleOptionClick: (option: string) => void
+}) => {
+    return (
+        <div className='flex w-full flex-row flex-wrap justify-start gap-[5px]'>
+            {options.map((option: Option, idx: number) => {
+                return <ChatOption key={idx} option={option} onClickOption={handleOptionClick} />
+            })}
+        </div>
+    )
+}
+
+export default Options

package/src/components/Chats/ChatCard/ui/components/ResizableTextarea.tsx

@@ -0,0 +1,59 @@
+import {
+    DetailedHTMLProps,
+    FocusEventHandler,
+    KeyboardEventHandler,
+    TextareaHTMLAttributes,
+    useRef,
+    useState,
+} from 'react'
+
+export default function ResizableTextarea(
+    props: DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>,
+) {
+    const [canResize, setCanResize] = useState<boolean>(false)
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+
+    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+        if (e.key === 'Enter' && e.shiftKey) {
+            setCanResize(true)
+            if (textareaRef.current && typeof window !== 'undefined') {
+                const style = window.getComputedStyle(textareaRef.current)
+                const lineHeight = parseFloat(style.lineHeight)
+                textareaRef.current.style.height =
+                    textareaRef.current.scrollHeight + lineHeight + 'px'
+            }
+        }
+        if (e.key === 'Backspace') {
+            setCanResize(true)
+            if (textareaRef.current && typeof window !== 'undefined') {
+                const style = window.getComputedStyle(textareaRef.current)
+                const lineHeight = parseFloat(style.lineHeight)
+                if (textareaRef.current.scrollHeight > lineHeight) {
+                    textareaRef.current.style.height =
+                        textareaRef.current.scrollHeight - lineHeight + 'px'
+                }
+            }
+        }
+        props.onKeyDown && props.onKeyDown(e)
+    }
+
+    const handleKeyUp: KeyboardEventHandler<HTMLTextAreaElement> = () => {
+        setCanResize(false)
+    }
+
+    const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (e) => {
+        setCanResize(false)
+        props.onBlur && props.onBlur(e)
+    }
+
+    return (
+        <textarea
+            ref={textareaRef}
+            {...props}
+            onKeyUp={handleKeyUp}
+            onKeyDown={handleKeyDown}
+            onBlur={handleBlur}
+            style={{ resize: canResize ? 'vertical' : 'none', overflowY: 'auto', ...props.style }}
+        />
+    )
+}

package/src/components/Chats/ChatCard/ui/components/SendButton.tsx

@@ -0,0 +1,37 @@
+import { useRef, useCallback, MouseEventHandler } from 'react'
+import SendIcon from './icons/SendIcon'
+import { ChatButtonProps } from '../../types'
+
+
+const SendButton = ({ type = 'button', onClick, icons }: ChatButtonProps) => {
+    const buttonRef = useRef<HTMLButtonElement | null>(null)
+
+    const animateSendButton = useCallback(() => {
+        const btn = buttonRef.current
+        if (btn) {
+            btn.style.transform = 'scale(0.8)'
+            setTimeout(() => {
+                btn.style.transform = 'scale(1)'
+            }, 600)
+        }
+    }, [])
+
+    const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+        if (onClick) onClick(e)
+        animateSendButton()
+    }
+
+    return (
+        <button
+            ref={buttonRef}
+            type={type}
+            onClick={handleClick}
+            className='mr-1.5 rounded-md p-1 text-gray-500 ring-0 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-transparent'
+            style={{ transition: 'transform 300ms ease' }}
+        >
+            {icons.sendIcon ? <img src={icons.sendIcon} alt='' /> : <SendIcon />}
+        </button>
+    )
+}
+
+export default SendButton

package/src/components/Chats/ChatCard/ui/components/VoiceListeningButton.tsx

@@ -0,0 +1,35 @@
+import CancelFileIcon from './icons/CancelFileIcon'
+import VoiceRecordIcon from './icons/VoiceRecordIcon'
+import { ChatIconsType } from '../../types'
+
+const VoiceListeningButton = ({
+    isListening,
+    toggleListening,
+    icons,
+}: {
+    toggleListening: () => void
+    isListening: boolean
+    icons: ChatIconsType
+}) => {
+    return (
+        <button
+            className='rounded-md p-1 text-gray-500 ring-0 hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-transparent'
+            type='button'
+            onClick={toggleListening}
+        >
+            {isListening ? (
+                icons.cancelIcon ? (
+                    <img src={icons.cancelIcon} alt='' />
+                ) : (
+                    <CancelFileIcon />
+                )
+            ) : icons.voiceRecordingIcon ? (
+                <img src={icons.voiceRecordingIcon} alt='' />
+            ) : (
+                <VoiceRecordIcon />
+            )}
+        </button>
+    )
+}
+
+export default VoiceListeningButton

package/src/components/Chats/ChatCard/ui/components/icons/AttachFileIcon.tsx

@@ -0,0 +1,18 @@
+const AttachFileIcon = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth='1.5'
+        stroke='currentColor'
+        className='size-5'
+    >
+        <path
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            d='M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13'
+        />
+    </svg>
+)
+
+export default AttachFileIcon

package/src/components/Chats/ChatCard/ui/components/icons/AttachedFileIcon.tsx

@@ -0,0 +1,18 @@
+const AttachedFileIcon = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth='1.5'
+        stroke='currentColor'
+        className='size-5 text-gray-500'
+    >
+        <path
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            d='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'
+        />
+    </svg>
+)
+
+export default AttachedFileIcon

package/src/components/Chats/ChatCard/ui/components/icons/CancelFileIcon.tsx

@@ -0,0 +1,14 @@
+const CancelFileIcon = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth='1.5'
+        stroke='currentColor'
+        className='size-5'
+    >
+        <path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' />
+    </svg>
+)
+
+export default CancelFileIcon

package/src/components/Chats/ChatCard/ui/components/icons/DefaultAvatar.tsx

@@ -0,0 +1,10 @@
+const DefaultAvatarIcon = () => (
+    <svg width='30' height='30' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>
+        <path
+            d='m 8 1 c -1.65625 0 -3 1.34375 -3 3 s 1.34375 3 3 3 s 3 -1.34375 3 -3 s -1.34375 -3 -3 -3 z m -1.5 7 c -2.492188 0 -4.5 2.007812 -4.5 4.5 v 0.5 c 0 1.109375 0.890625 2 2 2 h 8 c 1.109375 0 2 -0.890625 2 -2 v -0.5 c 0 -2.492188 -2.007812 -4.5 -4.5 -4.5 z m 0 0'
+            fill='#2e3436'
+        />
+    </svg>
+)
+
+export default DefaultAvatarIcon

package/src/components/Chats/ChatCard/ui/components/icons/SendIcon.tsx

@@ -0,0 +1,18 @@
+const SendIcon = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth='1.5'
+        stroke='currentColor'
+        className='size-5'
+    >
+        <path
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            d='M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5'
+        />
+    </svg>
+)
+
+export default SendIcon

package/src/components/Chats/ChatCard/ui/components/icons/VoiceRecordIcon.tsx

@@ -0,0 +1,15 @@
+const VoiceRecordIcon = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        fill='none'
+        viewBox='0 0 24 24'
+        strokeWidth='1.5'
+        stroke='currentColor'
+        className='size-5'
+    >
+        <path d='M8 5C8 2.79086 9.79086 1 12 1C14.2091 1 16 2.79086 16 5V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V5Z' />
+        <path d='M6.25 11.8438V12C6.25 13.525 6.8558 14.9875 7.93414 16.0659C9.01247 17.1442 10.475 17.75 12 17.75C13.525 17.75 14.9875 17.1442 16.0659 16.0659C17.1442 14.9875 17.75 13.525 17.75 12V11.8438C17.75 11.2915 18.1977 10.8438 18.75 10.8438H19.25C19.8023 10.8438 20.25 11.2915 20.25 11.8437V12C20.25 14.188 19.3808 16.2865 17.8336 17.8336C16.5842 19.0831 14.9753 19.8903 13.25 20.1548V22C13.25 22.5523 12.8023 23 12.25 23H11.75C11.1977 23 10.75 22.5523 10.75 22V20.1548C9.02471 19.8903 7.41579 19.0831 6.16637 17.8336C4.61919 16.2865 3.75 14.188 3.75 12V11.8438C3.75 11.2915 4.19772 10.8438 4.75 10.8438H5.25C5.80228 10.8438 6.25 11.2915 6.25 11.8438Z' />
+    </svg>
+)
+
+export default VoiceRecordIcon