@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.1

package/src/legacy/chatbot/ui/MessageInput.tsx

@@ -0,0 +1,517 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import MicIcon from '@mui/icons-material/Mic';
+import MicOffIcon from '@mui/icons-material/MicOff';
+import SendIcon from '@mui/icons-material/Send';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton, InputBase, Tooltip } from '@mui/material';
+import * as React from 'react';
+import { useChatBot } from '../context/ChatBotContext';
+import { walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import type { Attachment } from '@bytexbyte/nxtlinq-ai-agent-core-development';
+import { actionButton } from './styles/isolatedStyles';
+
+export const MessageInput: React.FC = () => {
+  const {
+    inputValue,
+    setInputValue,
+    isLoading,
+    isAITLoading,
+    handleSubmit,
+    uploadAttachment,
+    showError,
+    isMicEnabled,
+    isAwaitingMicGesture,
+    startRecording,
+    stopRecording,
+    textInputRef,
+    autoSendEnabled,
+    setAutoSendEnabled,
+    textToSpeechEnabled,
+    setTextToSpeechEnabled,
+    serviceId,
+    getCurrentModel,
+    props: { placeholder = 'Type a message...' }
+  } = useChatBot();
+
+  type Pending = { attachment: Attachment; file: File };
+  const [pendingAttachments, setPendingAttachments] = React.useState<Pending[]>([]);
+  const [isUploading, setIsUploading] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Check if current model is llama (upload not supported)
+  const currentModel = getCurrentModel();
+  const isLlamaModel = currentModel.value === 'llama' || currentModel.value.includes('llama');
+  
+  // Clear pending attachments when switching to llama model
+  React.useEffect(() => {
+    if (isLlamaModel && pendingAttachments.length > 0) {
+      setPendingAttachments([]);
+      // Also clear the file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  }, [isLlamaModel, pendingAttachments.length]);
+  
+  const isDisabled = isLoading || isAITLoading || isUploading;
+  const inputPlaceholder = isAITLoading ? walletTextUtils.getWalletText('Loading wallet configuration...', serviceId) : placeholder;
+
+  const hasContent = React.useCallback(
+    () =>
+      (textInputRef.current?.value ?? inputValue).trim().length > 0 || pendingAttachments.length > 0,
+    [inputValue, pendingAttachments.length]
+  );
+
+  const doSubmit = React.useCallback(
+    async (e: React.FormEvent) => {
+      if (!hasContent() || isDisabled) return;
+      let attachmentsToSend: Attachment[] = [];
+
+      if (pendingAttachments.length > 0) {
+        setIsUploading(true);
+        const uploadErrors: string[] = [];
+        try {
+          for (const { attachment, file } of pendingAttachments) {
+            try {
+              const res = await uploadAttachment(file);
+              if ('error' in res) {
+                uploadErrors.push(`${attachment.name}: ${res.error || 'Upload failed'}`);
+                continue; // Continue with other files instead of returning
+              }
+              attachmentsToSend.push({
+                type: attachment.type,
+                url: res.url,
+                name: attachment.name,
+                mimeType: attachment.mimeType,
+                size: attachment.size,
+              });
+            } catch (err) {
+              const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+              uploadErrors.push(`${attachment.name}: ${errorMessage}`);
+              console.error(`Failed to upload ${attachment.name}:`, err);
+            }
+          }
+          
+          // Show errors if any files failed, but continue if some succeeded
+          if (uploadErrors.length > 0) {
+            if (attachmentsToSend.length === 0) {
+              // All files failed
+              showError(`All file uploads failed:\n${uploadErrors.join('\n')}`);
+              return;
+            } else {
+              // Some files succeeded, some failed
+              showError(`Some files failed to upload:\n${uploadErrors.join('\n')}\n\n${attachmentsToSend.length} file(s) uploaded successfully; continuing to send.`);
+            }
+          }
+        } finally {
+          setIsUploading(false);
+        }
+      }
+
+      setPendingAttachments([]);
+      await handleSubmit(e, attachmentsToSend);
+    },
+    [
+      hasContent,
+      pendingAttachments,
+      isDisabled,
+      uploadAttachment,
+      showError,
+      handleSubmit,
+    ]
+  );
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const syntheticEvent = {
+        preventDefault: () => e.preventDefault(),
+        stopPropagation: () => e.stopPropagation(),
+        nativeEvent: e.nativeEvent,
+        currentTarget: e.currentTarget,
+        target: e.target,
+        bubbles: e.bubbles,
+        cancelable: e.cancelable,
+        defaultPrevented: e.defaultPrevented,
+        eventPhase: e.eventPhase,
+        isTrusted: e.isTrusted,
+        timeStamp: e.timeStamp,
+        type: 'submit',
+      } as unknown as React.FormEvent;
+      void doSubmit(syntheticEvent);
+    }
+  };
+
+  const fileToDataURL = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+
+  const getFileType = (mimeType: string): 'image' | 'file' => {
+    if (mimeType.startsWith('image/')) return 'image';
+    return 'file';
+  };
+
+  const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20MB - matches backend limit
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    const newPending: Pending[] = [];
+    const errors: string[] = [];
+    
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      
+      // Check file size before processing
+      if (file.size > MAX_FILE_SIZE) {
+        errors.push(`${file.name}: File exceeds size limit (max 20MB)`);
+        continue;
+      }
+      
+      // Check if file size is exactly at limit (should be < not <=)
+      if (file.size >= MAX_FILE_SIZE) {
+        errors.push(`${file.name}: File exceeds size limit (max 20MB)`);
+        continue;
+      }
+      
+      try {
+        const dataUrl = await fileToDataURL(file);
+        const type = getFileType(file.type);
+        newPending.push({
+          attachment: {
+            type,
+            url: dataUrl,
+            name: file.name,
+            mimeType: file.type,
+            size: file.size,
+          },
+          file,
+        });
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to read file';
+        errors.push(`${file.name}: ${errorMessage}`);
+        console.error(`Error reading file ${file.name}:`, err);
+      }
+    }
+    
+    // Show errors if any, but still add successfully processed files
+    if (errors.length > 0) {
+      showError(`Some files could not be added:\n${errors.join('\n')}`);
+    }
+    
+    // Add successfully processed files
+    if (newPending.length > 0) {
+      setPendingAttachments(prev => [...prev, ...newPending]);
+    }
+    
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  const removeAttachment = (index: number) => {
+    setPendingAttachments(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmitWithAttachments = (e: React.FormEvent) => {
+    void doSubmit(e);
+  };
+
+  return (
+    <>
+      {isAwaitingMicGesture && (
+        <div
+          role="status"
+          aria-live="polite"
+          css={css`
+            margin: 12px 15px 0 !important;
+            padding: 10px 14px !important;
+            border-radius: 8px !important;
+            border: 1px solid #ffeeba !important;
+            background-color: #fff3cd !important;
+            color: #856404 !important;
+            font-size: 13px !important;
+            line-height: 1.4 !important;
+            z-index: 1000 !important;
+            position: relative !important;
+            display: block !important;
+            visibility: visible !important;
+            opacity: 1 !important;
+          `}
+        >
+          ⚠️ The microphone needs a user interaction to re-enable. Please click on the page or press any key.
+        </div>
+      )}
+      
+      {/* Attachments preview */}
+      {pendingAttachments.length > 0 && (
+        <div
+          css={css`
+            padding: 10px 15px 0 !important;
+            display: flex !important;
+            flex-wrap: wrap !important;
+            gap: 8px !important;
+            border-top: 1px solid #eee !important;
+          `}
+        >
+          {pendingAttachments.map(({ attachment }, index) => (
+            <div
+              key={index}
+              css={css`
+                position: relative !important;
+                display: inline-block !important;
+                border: 1px solid #ddd !important;
+                border-radius: 8px !important;
+                overflow: hidden !important;
+                background: #f5f5f5 !important;
+              `}
+            >
+              {attachment.type === 'image' && (
+                <img
+                  src={attachment.url}
+                  alt={attachment.name}
+                  css={css`
+                    max-width: 100px !important;
+                    max-height: 100px !important;
+                    object-fit: cover !important;
+                    display: block !important;
+                  `}
+                />
+              )}
+              {attachment.type === 'file' && (
+                <div
+                  css={css`
+                    padding: 20px 10px !important;
+                    text-align: center !important;
+                    min-width: 100px !important;
+                    min-height: 100px !important;
+                    display: flex !important;
+                    align-items: center !important;
+                    justify-content: center !important;
+                    flex-direction: column !important;
+                  `}
+                >
+                  <AttachFileIcon css={css`font-size: 32px !important; color: #666 !important;`} />
+                  <span
+                    css={css`
+                      font-size: 11px !important;
+                      color: #666 !important;
+                      margin-top: 4px !important;
+                      word-break: break-word !important;
+                      max-width: 80px !important;
+                    `}
+                  >
+                    {attachment.name}
+                  </span>
+                </div>
+              )}
+              <button
+                onClick={() => removeAttachment(index)}
+                css={css`
+                  position: absolute !important;
+                  top: 4px !important;
+                  right: 4px !important;
+                  background: rgba(0, 0, 0, 0.6) !important;
+                  border: none !important;
+                  border-radius: 50% !important;
+                  width: 20px !important;
+                  height: 20px !important;
+                  display: flex !important;
+                  align-items: center !important;
+                  justify-content: center !important;
+                  cursor: pointer !important;
+                  padding: 0 !important;
+                  color: white !important;
+                  font-size: 12px !important;
+                  
+                  &:hover {
+                    background: rgba(0, 0, 0, 0.8) !important;
+                  }
+                `}
+              >
+                <CloseIcon fontSize="small" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div
+        css={css`
+          padding: 15px !important;
+          display: flex !important;
+          align-items: center !important;
+          gap: 10px !important;
+          border-top: 1px solid #eee !important;
+        `}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept="image/*,.pdf,.doc,.docx,.txt,.csv,.xlsx,.xls"
+          onChange={handleFileSelect}
+          css={css`
+            display: none !important;
+          `}
+        />
+        <Tooltip 
+          title={
+            isLlamaModel 
+              ? 'Llama model does not support file upload. Please switch to another model to use this feature.' 
+              : 'Upload file'
+          }
+        >
+          <span>
+            <IconButton
+              onClick={() => !isLlamaModel && fileInputRef.current?.click()}
+              disabled={isDisabled || isLlamaModel}
+              css={css`
+                padding: 8px !important;
+                color: ${isDisabled || isLlamaModel ? '#ccc' : '#666'} !important;
+                cursor: ${isLlamaModel ? 'not-allowed' : 'pointer'} !important;
+              `}
+            >
+              <AttachFileIcon />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <InputBase
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyPress={handleKeyPress}
+          placeholder={inputPlaceholder}
+          fullWidth
+          inputProps={{
+            ref: textInputRef
+          }}
+          endAdornment={
+            <>
+              <Tooltip title={textToSpeechEnabled ? 'Text-to-speech enabled' : 'Text-to-speech disabled'}>
+                <IconButton
+                  size="small"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setTextToSpeechEnabled(!textToSpeechEnabled);
+                  }}
+                  css={css`
+                    padding: 4px !important;
+                    margin-right: 4px !important;
+                    color: ${textToSpeechEnabled ? '#1976d2' : '#9e9e9e'} !important;
+                  `}
+                >
+                  {textToSpeechEnabled ? <VolumeUpIcon fontSize="small" /> : <VolumeOffIcon fontSize="small" />}
+                </IconButton>
+              </Tooltip>
+              {isMicEnabled && (
+                <Tooltip title={autoSendEnabled ? 'Auto send enabled' : 'Auto send disabled'}>
+                  <IconButton
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setAutoSendEnabled(!autoSendEnabled);
+                    }}
+                    css={css`
+                      padding: 4px !important;
+                      margin-right: 4px !important;
+                      color: ${autoSendEnabled ? '#1976d2' : '#9e9e9e'} !important;
+                    `}
+                  >
+                    <SendIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              )}
+              <IconButton onClick={() => (isMicEnabled ? stopRecording() : startRecording())}>
+                {isMicEnabled ? <MicIcon /> : <MicOffIcon />}
+              </IconButton>
+            </>
+          }
+          css={css`
+            flex: 1 !important;
+            padding: 10px !important;
+            border: 1px solid #ddd !important;
+            border-radius: 20px !important;
+            outline: none !important;
+            font-size: 14px !important;
+            background-color: #fff !important;
+            height: 40px !important;
+            box-sizing: border-box !important;
+
+            @media (max-width: 768px) {
+              font-size: 16px !important;
+              & input {
+                font-size: 16px !important;
+              }
+            }
+          `}
+        />
+        <button
+          onClick={handleSubmitWithAttachments}
+          disabled={isDisabled || !hasContent()}
+          css={css`
+            ${actionButton}
+            padding: 10px 20px !important;
+            border-radius: 20px !important;
+            position: relative !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            height: 40px !important;
+            box-sizing: border-box !important;
+
+            &:disabled {
+              background-color: #e9ecef !important;
+              color: #6c757d !important;
+              cursor: not-allowed !important;
+            }
+
+            &:hover:not(:disabled) {
+              background-color: #0056b3 !important;
+            }
+          `}
+        >
+          Send
+          {(isLoading || isAITLoading || isUploading) && (
+            <span
+              css={css`
+                margin-left: 8px !important;
+                display: flex !important;
+                align-items: center !important;
+              `}
+            >
+              <svg width="16" height="16" viewBox="0 0 50 50">
+                <circle
+                  cx="25"
+                  cy="25"
+                  r="20"
+                  fill="none"
+                  stroke="#fff"
+                  strokeWidth="4"
+                  strokeDasharray="31.4 31.4"
+                  strokeLinecap="round"
+                >
+                  <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 25 25"
+                    to="360 25 25"
+                    dur="1s"
+                    repeatCount="indefinite"
+                  />
+                </circle>
+              </svg>
+            </span>
+          )}
+        </button>
+      </div>
+    </>
+  );
+};