orchid-ai 2.1.4 → 2.1.5

package/orchid-ai.css

@@ -374,6 +374,39 @@
   color: #ffffff;
 }
 
+/* ── Attachment display inside user bubbles ── */
+
+.ai-chat-user-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.ai-chat-attachment-img {
+  max-width: 220px;
+  max-height: 180px;
+  border-radius: 8px;
+  object-fit: cover;
+  display: block;
+}
+
+.ai-chat-attachment-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 8px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.9);
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ai-chat-bubble.assistant {
   position: relative;
   background: #ffffff;
@@ -2183,6 +2216,23 @@
   word-break: break-word;
 }
 
+.ai-chat-process-url {
+  color: var(--ai-accent, #3b82f6);
+  text-decoration: none;
+}
+.ai-chat-process-url:hover {
+  text-decoration: underline;
+}
+
+.ai-chat-process-url-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 /* ── Message Actions ── */
 
 .ai-chat-message-actions {
@@ -2279,6 +2329,74 @@
   height: 5px;
 }
 
+/* Queued (pending) messages — shown as muted user bubbles while a prior request runs */
+
+.ai-chat-message--queued {
+  animation: none;
+}
+
+.ai-chat-bubble--queued {
+  opacity: 0.72;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ai-chat-pending-msg-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.ai-chat-pending-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ai-chat-pending-status {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.6);
+  font-style: italic;
+  flex: 1;
+  min-width: 0;
+}
+
+.ai-chat-pending-actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.ai-chat-pending-btn {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.ai-chat-pending-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.ai-chat-pending-btn--primary {
+  background: rgba(255, 255, 255, 0.28);
+  border-color: rgba(255, 255, 255, 0.55);
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.ai-chat-pending-btn--primary:hover {
+  background: rgba(255, 255, 255, 0.42);
+  border-color: rgba(255, 255, 255, 0.75);
+}
+
 .ai-chat-streaming-status {
   display: flex;
   align-items: center;
@@ -2318,6 +2436,19 @@
   border: 1px solid #e5e7eb;
 }
 
+.ai-building-block--stopped {
+  background: #fafafa;
+  border-color: #e5e7eb;
+  opacity: 0.65;
+}
+
+.ai-chat-interrupted-notice {
+  font-size: 12px;
+  color: #9ca3af;
+  font-style: italic;
+  margin-top: 8px;
+}
+
 .ai-building-block__label {
   font-size: 13px;
   font-weight: 600;
@@ -2357,18 +2488,123 @@
 
 .ai-chat-input-wrapper {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   position: relative;
-  gap: 10px;
   max-width: 768px;
   margin: 0 auto;
   background: #f9fafb;
   border: 1px solid #d1d5db;
   border-radius: 14px;
-  padding: 8px 8px 8px 16px;
+  overflow: hidden;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
+/* ── Attachment preview strip ── */
+
+.ai-attach-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.ai-attach-chip {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 6px 4px 8px;
+  background: #e5e7eb;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #374151;
+  max-width: 180px;
+}
+
+.ai-attach-chip--img {
+  padding: 3px 6px 3px 3px;
+}
+
+.ai-attach-thumb {
+  width: 42px;
+  height: 42px;
+  object-fit: cover;
+  border-radius: 6px;
+  flex-shrink: 0;
+  display: block;
+}
+
+.ai-attach-chip-icon {
+  display: flex;
+  align-items: center;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.ai-attach-chip-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.ai-attach-chip-remove {
+  border: none;
+  background: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0 1px;
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.ai-attach-chip-remove:hover {
+  color: #ef4444;
+}
+
+/* ── Input row (attach btn + textarea + send btn) ── */
+
+.ai-chat-input-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 8px 8px 10px;
+}
+
+.ai-attach-file-input {
+  display: none;
+}
+
+.ai-attach-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: #9ca3af;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.ai-attach-btn:hover:not(:disabled) {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+
+.ai-attach-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .ai-chat-input-wrapper:focus-within {
   border-color: #1eaaf1;
   box-shadow: 0 0 0 3px rgba(30, 170, 241, 0.1);
@@ -2437,6 +2673,15 @@
   cursor: not-allowed;
 }
 
+.ai-chat-stop-btn {
+  background: #ef4444;
+}
+
+.ai-chat-stop-btn:hover {
+  background: #dc2626;
+  transform: scale(1.05);
+}
+
 .ai-chat-disclaimer {
   font-size: 11px;
   color: #9ca3af;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orchid-ai",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Shared Orchid AI chat UI and visualization components",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/components/ChatInput.jsx

@@ -1,26 +1,127 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
 
-export default function ChatInput({ onSend, disabled, disabledReason = "", onDisabledClick }) {
+const ACCEPTED_TYPES = 'image/jpeg,image/png,image/gif,image/webp,application/pdf,text/plain,text/csv,text/markdown';
+const IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/gif', 'image/webp']);
+const MAX_NON_IMAGE_BYTES = 5 * 1024 * 1024;
+const MAX_IMAGE_DIMENSION = 1568;
+let _attachId = 0;
+
+// Resize image to fit within MAX_IMAGE_DIMENSION on its longest side.
+// Images already within the limit are returned unchanged.
+// Oversized images are resampled and re-encoded as JPEG.
+function resizeImageIfNeeded(dataUrl, origMediaType) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      const { naturalWidth: w, naturalHeight: h } = img;
+      if (Math.max(w, h) <= MAX_IMAGE_DIMENSION) {
+        resolve({ dataUrl, mediaType: origMediaType });
+        return;
+      }
+      const scale = MAX_IMAGE_DIMENSION / Math.max(w, h);
+      const nw = Math.max(1, Math.round(w * scale));
+      const nh = Math.max(1, Math.round(h * scale));
+      const canvas = document.createElement('canvas');
+      canvas.width = nw;
+      canvas.height = nh;
+      const ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, nw, nh);
+      ctx.drawImage(img, 0, 0, nw, nh);
+      resolve({ dataUrl: canvas.toDataURL('image/jpeg', 0.85), mediaType: 'image/jpeg' });
+    };
+    img.onerror = () => resolve({ dataUrl, mediaType: origMediaType });
+    img.src = dataUrl;
+  });
+}
+
+function FileIcon() {
+  return (
+    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+      <polyline points="13 2 13 9 20 9" />
+    </svg>
+  );
+}
+
+export default function ChatInput({ onSend, onStop, loading = false, disabled, disabledReason = "", onDisabledClick }) {
   const [text, setText] = useState("");
+  const [attachments, setAttachments] = useState([]);
   const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
   const showDisabledReason = Boolean(disabledReason);
+  const canSend = !disabled && (text.trim().length > 0 || attachments.length > 0);
 
   useEffect(() => {
-    if (!disabled && textareaRef.current) {
-      textareaRef.current.focus();
-    }
+    if (!disabled && textareaRef.current) textareaRef.current.focus();
   }, [disabled]);
 
+  const readFile = useCallback((file) => new Promise((resolve, reject) => {
+    if (!file) { reject(new Error('No file')); return; }
+    const isImage = IMAGE_TYPES.has(file.type);
+    if (!isImage && file.size > MAX_NON_IMAGE_BYTES) {
+      reject(new Error(`${file.name || 'File'} exceeds 5 MB`));
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      try {
+        const rawDataUrl = e.target.result;
+        let dataUrl = rawDataUrl;
+        let mediaType = file.type || 'application/octet-stream';
+        if (isImage) {
+          const resized = await resizeImageIfNeeded(rawDataUrl, file.type);
+          dataUrl = resized.dataUrl;
+          mediaType = resized.mediaType;
+        }
+        resolve({
+          id: `att-${++_attachId}`,
+          name: file.name || (isImage ? 'pasted-image.png' : 'attachment'),
+          mediaType,
+          data: dataUrl.split(',')[1],
+          preview: isImage ? dataUrl : null,
+          size: file.size,
+        });
+      } catch (err) {
+        reject(err);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  }), []);
+
+  const addFiles = useCallback(async (fileList) => {
+    const files = Array.from(fileList).filter(Boolean);
+    if (!files.length) return;
+    const results = await Promise.allSettled(files.map(readFile));
+    const ok = results.filter(r => r.status === 'fulfilled').map(r => r.value);
+    if (ok.length) setAttachments(prev => [...prev, ...ok]);
+  }, [readFile]);
+
+  const handleFileChange = (e) => {
+    if (e.target.files?.length) addFiles(e.target.files);
+    e.target.value = '';
+  };
+
+  const handlePaste = useCallback((e) => {
+    const items = Array.from(e.clipboardData?.items ?? []);
+    const fileItems = items.filter(it => it.kind === 'file');
+    if (!fileItems.length) return;
+    e.preventDefault();
+    addFiles(fileItems.map(it => it.getAsFile()));
+  }, [addFiles]);
+
+  const removeAttachment = useCallback((id) => {
+    setAttachments(prev => prev.filter(a => a.id !== id));
+  }, []);
+
   const handleSubmit = (e) => {
     e.preventDefault();
-    const trimmed = text.trim();
-    if (trimmed && !disabled) {
-      onSend(trimmed);
-      setText("");
-      if (textareaRef.current) {
-        textareaRef.current.style.height = "auto";
-      }
-    }
+    if (!canSend) return;
+    onSend(text.trim(), attachments.length ? attachments : undefined);
+    setText("");
+    setAttachments([]);
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
   };
 
   const handleKeyDown = (e) => {
@@ -31,17 +132,14 @@ export default function ChatInput({ onSend, disabled, disabledReason = "", onDis
   };
 
   const handleInput = (e) => {
-    const textarea = e.target;
-    textarea.style.height = "auto";
-    textarea.style.height = Math.min(textarea.scrollHeight, 150) + "px";
-    setText(textarea.value);
+    const ta = e.target;
+    ta.style.height = "auto";
+    ta.style.height = Math.min(ta.scrollHeight, 150) + "px";
+    setText(ta.value);
   };
 
   const handleDisabledInteraction = (e) => {
-    if (!disabled || !onDisabledClick) {
-      return;
-    }
-
+    if (!disabled || !onDisabledClick) return;
     e.preventDefault();
     onDisabledClick();
   };
@@ -49,7 +147,7 @@ export default function ChatInput({ onSend, disabled, disabledReason = "", onDis
   return (
     <form className="ai-chat-input-form" onSubmit={handleSubmit}>
       <div
-        className={`ai-chat-input-wrapper ${showDisabledReason ? "disabled-with-reason" : ""}`}
+        className={`ai-chat-input-wrapper${showDisabledReason ? " disabled-with-reason" : ""}`}
         onMouseDown={handleDisabledInteraction}
       >
         {showDisabledReason && (
@@ -61,27 +159,85 @@ export default function ChatInput({ onSend, disabled, disabledReason = "", onDis
             aria-label={disabledReason}
           />
         )}
-        <textarea
-          ref={textareaRef}
-          className="ai-chat-input"
-          value={text}
-          onChange={handleInput}
-          onKeyDown={handleKeyDown}
-          placeholder={showDisabledReason ? "Select a client to start chatting..." : "Type your question..."}
-          disabled={disabled}
-          rows={1}
-        />
-        <button
-          type="submit"
-          className="ai-chat-send-btn"
-          disabled={disabled || !text.trim()}
-          title="Send message"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <line x1="22" y1="2" x2="11" y2="13" />
-            <polygon points="22 2 15 22 11 13 2 9 22 2" />
-          </svg>
-        </button>
+        {attachments.length > 0 && (
+          <div className="ai-attach-strip">
+            {attachments.map((att) => (
+              <div key={att.id} className={`ai-attach-chip${att.preview ? " ai-attach-chip--img" : ""}`}>
+                {att.preview
+                  ? <img src={att.preview} className="ai-attach-thumb" alt={att.name} />
+                  : <span className="ai-attach-chip-icon"><FileIcon /></span>
+                }
+                <span className="ai-attach-chip-name">{att.name}</span>
+                <button
+                  type="button"
+                  className="ai-attach-chip-remove"
+                  onClick={() => removeAttachment(att.id)}
+                  aria-label={`Remove ${att.name}`}
+                >×</button>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className="ai-chat-input-row">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={ACCEPTED_TYPES}
+            multiple
+            className="ai-attach-file-input"
+            onChange={handleFileChange}
+            tabIndex={-1}
+            aria-hidden="true"
+          />
+          <button
+            type="button"
+            className="ai-attach-btn"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={disabled}
+            title="Attach file or image"
+            aria-label="Attach file or image"
+          >
+            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+            </svg>
+          </button>
+          <textarea
+            ref={textareaRef}
+            className="ai-chat-input"
+            value={text}
+            onChange={handleInput}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            placeholder={showDisabledReason ? "Select a client to start chatting..." : "Type your question..."}
+            disabled={disabled}
+            rows={1}
+          />
+          {loading ? (
+            <button
+              type="button"
+              className="ai-chat-send-btn ai-chat-stop-btn"
+              onClick={onStop}
+              title="Stop generating"
+              aria-label="Stop generating"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <rect x="2" y="2" width="12" height="12" rx="2" />
+              </svg>
+            </button>
+          ) : (
+            <button
+              type="submit"
+              className="ai-chat-send-btn"
+              disabled={!canSend}
+              title="Send message"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13" />
+                <polygon points="22 2 15 22 11 13 2 9 22 2" />
+              </svg>
+            </button>
+          )}
+        </div>
       </div>
       <p className="ai-chat-disclaimer">
         Responses are generated by AI and may contain errors. Double-check anything important. Data in the app is

package/src/components/ChatWindow.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useCallback } from 'react';
 import Message from './Message';
 
 const DEFAULT_SUGGESTIONS = [
@@ -14,6 +14,9 @@ export default function ChatWindow({
   messages,
   loading,
   statusText,
+  queuedMessages,
+  onCancelQueue,
+  onStop,
   onSuggestionClick,
   aiEnabled,
   organisationName,
@@ -27,9 +30,40 @@ export default function ChatWindow({
 }) {
   const exportPrefix = appName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
   const bottomRef = useRef(null);
+  const scrollerRef = useRef(null);
+  const stickToBottomRef = useRef(true);
+  const prevLoadingRef = useRef(false);
 
+  // Track whether the user has scrolled away from the bottom. Only update on actual
+  // scroll events — not on content growth — so appending text never disengages sticky.
+  const handleScroll = useCallback(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    stickToBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 120;
+  }, []);
+
+  // Re-engage sticky scroll whenever a new request starts so the user always sees
+  // their message and the incoming response, even if they had scrolled up.
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (loading && !prevLoadingRef.current) {
+      stickToBottomRef.current = true;
+    }
+    prevLoadingRef.current = loading;
+  }, [loading]);
+
+  // Pin the viewport to the bottom on every streaming delta. Direct scrollTop
+  // assignment is instant so the bubble always extends naturally from the bottom
+  // of the screen with no lag or chasing. A single smooth scroll runs when
+  // streaming ends to settle the final render.
+  useEffect(() => {
+    if (!stickToBottomRef.current) return;
+    const el = scrollerRef.current;
+    if (!el) return;
+    if (loading) {
+      el.scrollTop = el.scrollHeight - el.clientHeight;
+    } else {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }
   }, [messages, loading, statusText]);
 
   const renderEmptyState = () => {
@@ -106,7 +140,7 @@ export default function ChatWindow({
   const hasStreamingMessage = lastMsg?.isStreaming === true;
 
   return (
-    <div className="ai-chat-window">
+    <div className="ai-chat-window" ref={scrollerRef} onScroll={handleScroll}>
       {messages?.length === 0 && !loading && renderEmptyState()}
       {(messages ?? []).map((msg, i) => {
         const isLast = i === (messages?.length ?? 0) - 1;
@@ -120,12 +154,14 @@ export default function ChatWindow({
             truncated={msg.truncated}
             exportPrefix={exportPrefix}
             isStreaming={msg.isStreaming}
+            stopped={msg.stopped}
             streamingStatusText={streamingStatusText}
             processTrace={msg.processTrace}
             processInterimLive={msg.processInterimLive}
             showProcessTracePanel={showProcessTracePanel}
             queryContext={msg.queryContext}
             showQuerySummary={showQuerySummary}
+            attachments={msg.attachments}
           />
         );
       })}
@@ -146,6 +182,29 @@ export default function ChatWindow({
           </div>
         </div>
       )}
+      {(queuedMessages ?? []).map((msg, i) => (
+        <div key={i} className="ai-chat-message user ai-chat-message--queued">
+          <div className="ai-chat-avatar user">YOU</div>
+          <div className="ai-chat-bubble user ai-chat-bubble--queued">
+            <div className="ai-chat-pending-msg-text">{msg}</div>
+            <div className="ai-chat-pending-footer">
+              <span className="ai-chat-pending-status">Queued</span>
+              <div className="ai-chat-pending-actions">
+                {onCancelQueue && (
+                  <button type="button" className="ai-chat-pending-btn" onClick={() => onCancelQueue(i)}>
+                    Cancel
+                  </button>
+                )}
+                {i === 0 && onStop && (
+                  <button type="button" className="ai-chat-pending-btn ai-chat-pending-btn--primary" onClick={onStop}>
+                    Send now
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
       <div ref={bottomRef} />
     </div>
   );