@m6d/cortex-react 1.0.0

package/src/components/ChatComposer.tsx

@@ -0,0 +1,211 @@
+import type { ClipboardEvent, DragEvent, KeyboardEvent } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { ATTACHMENT_MIME_TYPES } from '@cortex/contracts/wire';
+import { useCortex } from '../context';
+import { cx } from '../cx';
+import { AttachmentQueue } from './AttachmentQueue';
+
+const ACCEPTED_TYPES = ATTACHMENT_MIME_TYPES.join(',');
+
+export type ChatComposerHandle = {
+  focusInput: () => void;
+};
+
+// forwardRef rather than React 19's ref-as-prop: the package peers on react >=18,
+// where a plain function component never receives `ref`.
+// fallow-ignore-next-line complexity -- 1:1 transcription of the Angular source; restructuring would risk parity drift
+export const ChatComposer = forwardRef<ChatComposerHandle>(function ChatComposer(_props, ref) {
+  const { t, queue, isAgentWorking, send, abort } = useCortex();
+  const [text, setText] = useState('');
+  const [dragging, setDragging] = useState(false);
+  const messageInput = useRef<HTMLTextAreaElement>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    focusInput: () => messageInput.current?.focus(),
+  }));
+
+  // Auto-focus after a turn, from in here rather than only via the widget's
+  // focusInput call: that call races the re-render that re-enables the
+  // textarea (focusing a still-disabled input is a no-op). This effect runs
+  // after the enabling render has committed.
+  const wasWorking = useRef(isAgentWorking);
+  useEffect(() => {
+    if (wasWorking.current && !isAgentWorking) messageInput.current?.focus();
+    wasWorking.current = isAgentWorking;
+  }, [isAgentWorking]);
+
+  const canSend = !queue.busy && (Boolean(text.trim()) || queue.hasReady);
+
+  function onSend() {
+    if (isAgentWorking || !canSend) {
+      return;
+    }
+
+    const captionKey = 'translate_attachment_caption';
+    const translated = t(captionKey);
+    const caption =
+      translated !== captionKey ? translated : 'Please take a look at the attached files.';
+    const prompt = text.trim() || caption;
+    const attachments = queue.consumeReady();
+
+    setText('');
+    void send(
+      prompt,
+      attachments.map((attachment) => attachment.summary),
+    );
+  }
+
+  function onKeydown(event: KeyboardEvent<HTMLTextAreaElement>) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      onSend();
+    }
+  }
+
+  function onDragOver(event: DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    setDragging(true);
+  }
+
+  function onDragLeave(event: DragEvent<HTMLDivElement>) {
+    // Moving onto a child bubbles a dragleave up to the composer; only a pointer that
+    // has actually left it should drop the highlight.
+    const area = event.currentTarget;
+    if (!area.contains(event.relatedTarget as Node | null)) {
+      setDragging(false);
+    }
+  }
+
+  function onDrop(event: DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    setDragging(false);
+    queue.accept([...event.dataTransfer.files]);
+  }
+
+  function onPaste(event: ClipboardEvent<HTMLTextAreaElement>) {
+    const files = event.clipboardData.files;
+    if (!files.length) return;
+
+    event.preventDefault();
+    queue.accept([...files]);
+  }
+
+  return (
+    <div
+      className="cortex-widget__input-area"
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      <AttachmentQueue />
+
+      <div
+        className={cx(
+          'cortex-widget__input-box',
+          isAgentWorking && 'cortex-widget__input-box--disabled',
+          !isAgentWorking && 'cortex-widget__input-box--enabled',
+          dragging && 'cortex-widget__input-box--dragging',
+        )}
+      >
+        <textarea
+          ref={messageInput}
+          onKeyDown={onKeydown}
+          onPaste={onPaste}
+          value={text}
+          onChange={(event) => setText(event.target.value)}
+          placeholder={
+            dragging
+              ? t('translate_drop_files_here')
+              : isAgentWorking
+                ? ''
+                : t('translate_type_a_message')
+          }
+          disabled={isAgentWorking}
+          rows={1}
+          className={cx(
+            'cortex-widget__textarea',
+            isAgentWorking && 'cortex-widget__textarea--disabled',
+          )}
+        />
+        {isAgentWorking ? (
+          /* Stop button */
+          <button onClick={() => void abort()} className="cortex-stop-btn">
+            {/* Pulsing ring */}
+            <span className="cortex-stop-btn__ring"></span>
+            {/* Stop icon (rounded square) */}
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              className="cortex-stop-btn__icon"
+            >
+              <rect x="1" y="1" width="10" height="10" rx="2.5" fill="currentColor" />
+            </svg>
+          </button>
+        ) : (
+          <div className="cortex-widget__input-actions">
+            {/* Attach button */}
+            <button
+              type="button"
+              onClick={() => fileInput.current?.click()}
+              className="cortex-widget__attach-btn"
+              aria-label={t('translate_attach_files')}
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M10.5 5.5 6.2 9.8a1.4 1.4 0 0 0 2 2l4.6-4.6a2.8 2.8 0 0 0-4-4L4.2 7.8a4.2 4.2 0 0 0 6 6l4-4"
+                  stroke="currentColor"
+                  strokeWidth="1.3"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+            <input
+              ref={fileInput}
+              type="file"
+              multiple
+              accept={ACCEPTED_TYPES}
+              onChange={(event) => {
+                queue.accept([...(event.target.files ?? [])]);
+
+                // Cleared so picking the same file again still fires `change`.
+                event.target.value = '';
+              }}
+              className="cortex-widget__file-input"
+            />
+
+            {/* Send button */}
+            <button
+              onClick={onSend}
+              className={cx(
+                'cortex-widget__send-btn',
+                !canSend && 'cortex-widget__send-btn--empty',
+                canSend && 'cortex-widget__send-btn--ready',
+              )}
+              disabled={!canSend}
+            >
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                className="cortex-widget__send-icon"
+              >
+                <path
+                  d="M3 8h10M9 4l4 4-4 4"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/CopyButton.tsx

@@ -0,0 +1,73 @@
+import { useRef, useState } from 'react';
+import type { MouseEvent } from 'react';
+import { cx } from '../cx';
+
+type CopyButtonProps = {
+  value: string;
+  className?: string;
+};
+
+export function CopyButton({ value, className }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  async function copy(event: MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      resetTimer.current = setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard API not available — silent fail
+    }
+  }
+
+  return (
+    <span className={cx('cortex-copy-btn', className)}>
+      <button
+        className={cx('cortex-copy-btn__button', copied && 'cortex-copy-btn__button--copied')}
+        onClick={(event) => void copy(event)}
+        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+        type="button"
+      >
+        {copied ? (
+          <svg
+            className="cortex-copy-btn__icon cortex-copy-btn__icon--check"
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <path
+              d="M5 13l4 4L19 7"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="cortex-copy-btn__icon"
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <rect x="9" y="9" width="12" height="12" rx="2" stroke="currentColor" strokeWidth="2" />
+            <path
+              d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            />
+          </svg>
+        )}
+      </button>
+    </span>
+  );
+}