Function Chat

lib/chat/components/chat.jsx:41–495

({ chatId, initialMessages = [], workspace = null, chatMode = null })

  });

export function Chat({ chatId, initialMessages = [], workspace = null, chatMode = null }) {
  const [input, setInput] = useState('');
  const [files, setFiles] = useState([]);
  const hasNavigated = useRef(false);
  const [codeMode, setCodeMode] = useState(chatMode === 'code');
  const [codeModeType, setCodeModeType] = useState(() => {
    if (typeof window !== 'undefined') {
      const stored = localStorage.getItem(`codeModeType:${chatId}`);
      if (stored === 'plan' || stored === 'code') return stored;
    }
    return 'code';
  });

  // Persist codeModeType to localStorage per chat
  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem(`codeModeType:${chatId}`, codeModeType);
    }
  }, [chatId, codeModeType]);
  const [defaultRepo, setDefaultRepo] = useState(null);
  const [repo, setRepo] = useState(workspace?.repo || '');
  const [branch, setBranch] = useState(workspace?.branch || '');
  const [workspaceState, setWorkspaceState] = useState(workspace);
  const [diffStats, setDiffStats] = useState(null);
  const [showDiff, setShowDiff] = useState(false);
  const [availableAgents, setAvailableAgents] = useState(null);
  const [scope, setScope] = useState(workspace?.scope || null);
  const [availableScopes, setAvailableScopes] = useState(null);

  // Load available coding agents once on mount (for the right-click agent picker)
  useEffect(() => {
    import('../actions.js').then(({ getAvailableCodingAgents }) => {
      getAvailableCodingAgents().then(agents => setAvailableAgents(agents)).catch(() => {});
    }).catch(() => {});
  }, []);

  // Load available agent scopes for agent mode
  useEffect(() => {
    if (!codeMode) {
      fetch('/chat/scopes')
        .then(r => r.json())
        .then(scopes => setAvailableScopes(scopes))
        .catch(() => setAvailableScopes([]));
    }
  }, [codeMode]);

  // Fetch default repo for agent mode on mount
  // Uses fetch instead of server action to avoid Next.js page revalidation
  useEffect(() => {
    fetch('/code/default-repo')
      .then(res => res.json())
      .then(({ repo: r }) => {
        if (r) {
          setDefaultRepo(r);
          if (!workspace && !repo && !codeMode) {
            setRepo(r);
            fetchDefaultBranch(r).then((b) => { if (b) setBranch(b); });
          }