cowork-os 0.3.21

package/src/renderer/components/MentionInput.tsx

@@ -0,0 +1,409 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  AgentRoleData,
+  MentionType,
+} from '../../electron/preload';
+
+interface MentionInputProps {
+  workspaceId: string;
+  taskId: string;
+  fromAgentRoleId?: string;
+  onMentionCreated?: () => void;
+  placeholder?: string;
+}
+
+const MENTION_TYPE_OPTIONS: { value: MentionType; label: string; description: string }[] = [
+  { value: 'request', label: 'Request', description: 'Ask for help with a task' },
+  { value: 'handoff', label: 'Handoff', description: 'Hand over the task completely' },
+  { value: 'review', label: 'Review', description: 'Request a review of work done' },
+  { value: 'fyi', label: 'FYI', description: 'Informational, no action needed' },
+];
+
+export function MentionInput({
+  workspaceId,
+  taskId,
+  fromAgentRoleId,
+  onMentionCreated,
+  placeholder = 'Type @ to mention an agent...',
+}: MentionInputProps) {
+  const [input, setInput] = useState('');
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [agents, setAgents] = useState<AgentRoleData[]>([]);
+  const [filteredAgents, setFilteredAgents] = useState<AgentRoleData[]>([]);
+  const [selectedAgent, setSelectedAgent] = useState<AgentRoleData | null>(null);
+  const [mentionType, setMentionType] = useState<MentionType>('request');
+  const [context, setContext] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Load agents
+  useEffect(() => {
+    const loadAgents = async () => {
+      try {
+        const roles = await window.electronAPI.getAgentRoles();
+        setAgents(roles.filter((r: AgentRoleData) => r.isActive));
+      } catch (err) {
+        console.error('Failed to load agents:', err);
+      }
+    };
+    loadAgents();
+  }, []);
+
+  // Filter agents based on input
+  useEffect(() => {
+    if (input.startsWith('@')) {
+      const search = input.slice(1).toLowerCase();
+      const filtered = agents.filter(
+        (a) =>
+          a.name.toLowerCase().includes(search) ||
+          a.displayName.toLowerCase().includes(search)
+      );
+      setFilteredAgents(filtered);
+      setShowDropdown(true);
+    } else {
+      setShowDropdown(false);
+    }
+  }, [input, agents]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node) &&
+          inputRef.current && !inputRef.current.contains(e.target as Node)) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleSelectAgent = (agent: AgentRoleData) => {
+    setSelectedAgent(agent);
+    setInput(`@${agent.displayName}`);
+    setShowDropdown(false);
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedAgent) return;
+
+    try {
+      setSubmitting(true);
+      await window.electronAPI.createMention({
+        workspaceId,
+        taskId,
+        fromAgentRoleId,
+        toAgentRoleId: selectedAgent.id,
+        mentionType,
+        context: context || undefined,
+      });
+
+      // Reset form
+      setInput('');
+      setSelectedAgent(null);
+      setContext('');
+      setMentionType('request');
+      onMentionCreated?.();
+    } catch (err) {
+      console.error('Failed to create mention:', err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setInput('');
+    setSelectedAgent(null);
+    setContext('');
+    setMentionType('request');
+  };
+
+  return (
+    <div className="mention-input-container">
+      <div className="mention-input-row">
+        <input
+          ref={inputRef}
+          type="text"
+          className="mention-input"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder={placeholder}
+          disabled={selectedAgent !== null}
+        />
+
+        {showDropdown && filteredAgents.length > 0 && (
+          <div ref={dropdownRef} className="mention-dropdown">
+            {filteredAgents.map((agent) => (
+              <div
+                key={agent.id}
+                className="mention-dropdown-item"
+                onClick={() => handleSelectAgent(agent)}
+              >
+                <span className="agent-icon" style={{ backgroundColor: agent.color }}>
+                  {agent.icon}
+                </span>
+                <div className="agent-info">
+                  <span className="agent-name">{agent.displayName}</span>
+                  <span className="agent-description">{agent.description}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {selectedAgent && (
+        <div className="mention-details">
+          <div className="selected-agent">
+            <span className="agent-icon" style={{ backgroundColor: selectedAgent.color }}>
+              {selectedAgent.icon}
+            </span>
+            <span className="agent-name">{selectedAgent.displayName}</span>
+            <button className="btn-clear" onClick={handleCancel}>
+              &times;
+            </button>
+          </div>
+
+          <div className="mention-type-selector">
+            <label>Type:</label>
+            <select
+              value={mentionType}
+              onChange={(e) => setMentionType(e.target.value as MentionType)}
+            >
+              {MENTION_TYPE_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <textarea
+            className="mention-context"
+            value={context}
+            onChange={(e) => setContext(e.target.value)}
+            placeholder="Add context for this mention (optional)..."
+            rows={3}
+          />
+
+          <div className="mention-actions">
+            <button className="btn-cancel" onClick={handleCancel}>
+              Cancel
+            </button>
+            <button
+              className="btn-submit"
+              onClick={handleSubmit}
+              disabled={submitting}
+            >
+              {submitting ? 'Sending...' : 'Send Mention'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      <style>{`
+        .mention-input-container {
+          position: relative;
+        }
+
+        .mention-input-row {
+          position: relative;
+        }
+
+        .mention-input {
+          width: 100%;
+          padding: 10px 12px;
+          border: 1px solid var(--border-color);
+          border-radius: 8px;
+          background: var(--bg-primary);
+          color: var(--text-primary);
+          font-size: 14px;
+        }
+
+        .mention-input:focus {
+          outline: none;
+          border-color: var(--accent-color);
+        }
+
+        .mention-input:disabled {
+          background: var(--bg-secondary);
+        }
+
+        .mention-dropdown {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background: var(--bg-primary);
+          border: 1px solid var(--border-color);
+          border-radius: 8px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          z-index: 100;
+          max-height: 200px;
+          overflow-y: auto;
+          margin-top: 4px;
+        }
+
+        .mention-dropdown-item {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          padding: 10px 12px;
+          cursor: pointer;
+          transition: background 0.15s ease;
+        }
+
+        .mention-dropdown-item:hover {
+          background: var(--bg-secondary);
+        }
+
+        .agent-icon {
+          width: 28px;
+          height: 28px;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          flex-shrink: 0;
+        }
+
+        .agent-info {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+          min-width: 0;
+        }
+
+        .agent-name {
+          font-size: 13px;
+          font-weight: 500;
+          color: var(--text-primary);
+        }
+
+        .agent-description {
+          font-size: 11px;
+          color: var(--text-secondary);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .mention-details {
+          margin-top: 12px;
+          padding: 12px;
+          background: var(--bg-secondary);
+          border-radius: 8px;
+        }
+
+        .selected-agent {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 12px;
+        }
+
+        .selected-agent .agent-name {
+          flex: 1;
+        }
+
+        .btn-clear {
+          width: 24px;
+          height: 24px;
+          border: none;
+          background: transparent;
+          color: var(--text-tertiary);
+          font-size: 18px;
+          cursor: pointer;
+          border-radius: 4px;
+        }
+
+        .btn-clear:hover {
+          background: var(--bg-tertiary);
+          color: var(--text-primary);
+        }
+
+        .mention-type-selector {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-bottom: 12px;
+        }
+
+        .mention-type-selector label {
+          font-size: 13px;
+          color: var(--text-secondary);
+        }
+
+        .mention-type-selector select {
+          flex: 1;
+          padding: 6px 10px;
+          border: 1px solid var(--border-color);
+          border-radius: 6px;
+          background: var(--bg-primary);
+          color: var(--text-primary);
+          font-size: 13px;
+        }
+
+        .mention-context {
+          width: 100%;
+          padding: 10px;
+          border: 1px solid var(--border-color);
+          border-radius: 6px;
+          background: var(--bg-primary);
+          color: var(--text-primary);
+          font-size: 13px;
+          resize: vertical;
+          font-family: inherit;
+        }
+
+        .mention-context:focus {
+          outline: none;
+          border-color: var(--accent-color);
+        }
+
+        .mention-actions {
+          display: flex;
+          justify-content: flex-end;
+          gap: 8px;
+          margin-top: 12px;
+        }
+
+        .btn-cancel,
+        .btn-submit {
+          padding: 8px 16px;
+          border-radius: 6px;
+          font-size: 13px;
+          cursor: pointer;
+          transition: all 0.15s ease;
+        }
+
+        .btn-cancel {
+          background: transparent;
+          border: 1px solid var(--border-color);
+          color: var(--text-secondary);
+        }
+
+        .btn-cancel:hover {
+          background: var(--bg-tertiary);
+        }
+
+        .btn-submit {
+          background: #ec4899;
+          border: none;
+          color: white;
+        }
+
+        .btn-submit:hover:not(:disabled) {
+          background: #db2777;
+        }
+
+        .btn-submit:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      `}</style>
+    </div>
+  );
+}