refactor: move components into folders

Author: brandonkachen

cli/src/chat.tsx

@@ -1,38 +1,28 @@
 import { useRenderer } from '@opentui/react'
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-
-import { logger } from './logger'
-import { buildMessageTree } from './message-tree-utils'
-import { MultilineInput } from './multiline-input'
-import { Separator } from './separator'
-import { StatusIndicator, useHasStatus } from './status-indicator'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { MultilineInput } from './components/multiline-input'
+import { Separator } from './components/separator'
+import { StatusIndicator, useHasStatus } from './components/status-indicator'
+import { useClipboard } from './hooks/use-clipboard'
+import { useInputHistory } from './hooks/use-input-history'
+import { useKeyboardHandlers } from './hooks/use-keyboard-handlers'
+import { useMessageQueue } from './hooks/use-message-queue'
+import { useMessageRenderer } from './hooks/use-message-renderer'
+import { useScrollManagement } from './hooks/use-scroll-management'
+import { useSendMessage } from './hooks/use-send-message'
+import { formatTimestamp, formatQueuedPreview } from './utils/helpers'
+import { logger } from './utils/logger'
+import { buildMessageTree } from './utils/message-tree-utils'
 import {
   type ThemeName,
   chatThemes,
   createMarkdownPalette,
   detectSystemTheme,
-} from './theme-system'
-import { useClipboard } from './use-clipboard'
-import { useInputHistory } from './use-input-history'
-import { useKeyboardHandlers } from './use-keyboard-handlers'
-import { useMessageQueue } from './use-message-queue'
-import { useMessageRenderer } from './use-message-renderer'
-import { useScrollManagement } from './use-scroll-management'
-import { useSendMessage } from './use-send-message'
-import { formatTimestamp, formatQueuedPreview } from './utils'
+} from './utils/theme-system'
 
 import type { ToolName } from '@codebuff/sdk'
-import type {
-  InputRenderable,
-  ScrollBoxRenderable,
-} from '@opentui/core'
+import type { InputRenderable, ScrollBoxRenderable } from '@opentui/core'
 
 type ChatVariant = 'ai' | 'user' | 'agent'
 
@@ -117,10 +107,6 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
     renderer?.setBackgroundColor(theme.background)
   }, [renderer, theme.background])
 
-
-
-
-
   const abortControllerRef = useRef<AbortController | null>(null)
 
   const registerAgentRef = useCallback((agentId: string, element: any) => {
@@ -142,7 +128,8 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
     setInputValue,
   )
 
-  const sendMessageRef = useRef<(content: string, onComplete?: () => void) => Promise<void>>()
+  const sendMessageRef =
+    useRef<(content: string, onComplete?: () => void) => Promise<void>>()
 
   const {
     queuedMessages,
@@ -260,7 +247,15 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
     }
 
     sendMessage(trimmed)
-  }, [inputValue, isStreaming, sendMessage, saveToHistory, addToQueue, streamMessageIdRef, isChainInProgressRef])
+  }, [
+    inputValue,
+    isStreaming,
+    sendMessage,
+    saveToHistory,
+    addToQueue,
+    streamMessageIdRef,
+    isChainInProgressRef,
+  ])
 
   const handleThemeToggle = useCallback(() => {
     setThemeName((prev) => (prev === 'dark' ? 'light' : 'dark'))
@@ -372,11 +367,12 @@ export const App = ({ initialPrompt }: { initialPrompt?: string } = {}) => {
               />
               {hasStatus && queuedMessages.length > 0 && '  '}
               {queuedMessages.length > 0 && (
-                <span
-                  fg={theme.statusSecondary}
-                  bg={theme.inputFocusedBg}
-                >
-                  {' '}{formatQueuedPreview(queuedMessages, Math.max(30, renderer.width - 25))}{' '}
+                <span fg={theme.statusSecondary} bg={theme.inputFocusedBg}>
+                  {' '}
+                  {formatQueuedPreview(
+                    queuedMessages,
+                    Math.max(30, renderer.width - 25),
+                  )}{' '}
                 </span>
               )}
             </text>

cli/src/branch-item.tsx cli/src/components/branch-item.tsxcli/src/branch-item.tsx renamed to cli/src/components/branch-item.tsx

@@ -1,7 +1,7 @@
 import { TextAttributes } from '@opentui/core'
 import React, { type ReactNode } from 'react'
 
-import type { ChatTheme } from './theme-system'
+import type { ChatTheme } from '../utils/theme-system'
 
 interface BranchItemProps {
   name: string

cli/src/message-block.tsx cli/src/components/message-block.tsxcli/src/message-block.tsx renamed to cli/src/components/message-block.tsx

@@ -2,16 +2,16 @@ import { TextAttributes } from '@opentui/core'
 import React, { type ReactNode } from 'react'
 
 import { BranchItem } from './branch-item'
-import { getToolDisplayInfo } from './codebuff-client'
+import { getToolDisplayInfo } from '../utils/codebuff-client'
 import {
   renderMarkdown,
   renderStreamingMarkdown,
   hasMarkdown,
   type MarkdownPalette,
-} from './markdown-renderer'
+} from '../utils/markdown-renderer'
 
-import type { ContentBlock } from './chat'
-import type { ChatTheme } from './theme-system'
+import type { ContentBlock } from '../chat'
+import type { ChatTheme } from '../utils/theme-system'
 
 interface MessageBlockProps {
   messageId: string

cli/src/multiline-input.tsx cli/src/components/multiline-input.tsxcli/src/multiline-input.tsx renamed to cli/src/components/multiline-input.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { ChatTheme } from './theme-system'
+import type { ChatTheme } from '../utils/theme-system'
 
 interface SeparatorProps {
   theme: ChatTheme

cli/src/separator.tsx cli/src/components/separator.tsxcli/src/separator.tsx renamed to cli/src/components/separator.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
 
-import { getCodebuffClient } from './codebuff-client'
 import { ShimmerText } from './shimmer-text'
+import { getCodebuffClient } from '../utils/codebuff-client'
 
-import type { ChatTheme } from './theme-system'
+import type { ChatTheme } from '../utils/theme-system'
 
 const THINKING_SHIMMER_COLORS = [
   '#9ca3af',

cli/src/shimmer-text.tsx cli/src/components/shimmer-text.tsxcli/src/shimmer-text.tsx renamed to cli/src/components/shimmer-text.tsx

@@ -1,7 +1,7 @@
 import { useRenderer } from '@opentui/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { logger } from './logger'
+import { logger } from '../utils/logger'
 
 export const useClipboard = () => {
   const renderer = useRenderer()