| 81 | type Props = RegularProps | ReadOnlyProps; |
| 82 | |
| 83 | export default function CodeCell(props: Props) { |
| 84 | return ( |
| 85 | <div id={`cell-${props.cell.id}`}> |
| 86 | {!props.readOnly ? ( |
| 87 | <Dialog open={props.fullscreen} onOpenChange={props.onChangeFullscreen}> |
| 88 | <DialogContent |
| 89 | className={cn( |
| 90 | `w-[95vw] h-[95vh] max-w-none p-0 group flex flex-col`, |
| 91 | props.cell.status === 'running' && 'ring-1 ring-run-ring border-run-ring', |
| 92 | (props.cellMode === 'generating' || props.cellMode === 'fixing') && |
| 93 | 'ring-1 ring-ai-ring border-ai-ring', |
| 94 | props.cell.status !== 'running' && |
| 95 | props.cellMode !== 'generating' && |
| 96 | props.cellMode !== 'fixing' && |
| 97 | 'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring', |
| 98 | )} |
| 99 | hideClose |
| 100 | > |
| 101 | <Header |
| 102 | cell={props.cell} |
| 103 | runCell={props.onRunCell} |
| 104 | stopCell={props.onStopCell} |
| 105 | onDeleteCell={!props.readOnly ? props.onDeleteCell : null} |
| 106 | generate={props.onGenerate} |
| 107 | cellMode={props.cellMode} |
| 108 | setCellMode={props.onChangeCellModeType} |
| 109 | prompt={props.prompt} |
| 110 | setPrompt={props.onChangePrompt} |
| 111 | updateFilename={props.onUpdateFileName} |
| 112 | filenameError={props.filenameError} |
| 113 | setFilenameError={props.onChangeFilenameError} |
| 114 | fullscreen={props.fullscreen} |
| 115 | setFullscreen={props.onChangeFullscreen} |
| 116 | setShowStdio={props.onChangeShowStdio} |
| 117 | onAccept={props.onAccept} |
| 118 | onRevert={props.onRevert} |
| 119 | formatCell={props.onFormatCell} |
| 120 | aiEnabled={!props.readOnly ? props.aiEnabled : false} |
| 121 | /> |
| 122 | |
| 123 | {props.cellMode === 'reviewing' ? ( |
| 124 | <DiffEditor original={props.cell.source} modified={props.newSource} /> |
| 125 | ) : ( |
| 126 | <ResizablePanelGroup direction="vertical"> |
| 127 | <ResizablePanel style={{ overflow: 'scroll' }} defaultSize={60}> |
| 128 | <div |
| 129 | className={cn(props.cellMode !== 'off' && 'opacity-50')} |
| 130 | id={props.cell.filename} |
| 131 | > |
| 132 | <CodeEditor |
| 133 | cell={props.cell} |
| 134 | extensions={props.editorExtensions} |
| 135 | codeTheme={props.codeTheme} |
| 136 | updateCellOnServer={props.updateCellOnServer} |
| 137 | /> |
| 138 | </div> |
| 139 | </ResizablePanel> |
| 140 | |