1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/**
 * Root component: header with connection/session status, the conversation
 * thread, and the composer. The WebSocket is injected so tests (and future
 * embeddings) can supply a fake.
 *
 * @example
 * <App socket={connectSocket({ url: wsUrl(), dispatch })} />
 */

import type { OriSocket } from "./ws";
import { useChatState } from "./store";
import { ChatThread } from "./components/ChatThread";
import { PermissionPrompt } from "./components/PermissionPrompt";
import { PlanView } from "./components/PlanView";
import { PromptInput } from "./components/PromptInput";

export function App({ socket }: { socket: OriSocket }) {
	const state = useChatState();

	return (
		<div className="app">
			<header className="topbar">
				<h1 className="topbar-title">Ori</h1>
				<span className={`status status-${state.connection}`}>
					{state.connection}
					{state.sessionId ? ` · ${state.sessionId}` : ""}
				</span>
			</header>
			<ChatThread thread={state.thread} turnActive={state.turnActive} />
			<PlanView entries={state.plan} />
			{state.permissions.map((request) => (
				<PermissionPrompt
					key={request.requestId}
					request={request}
					onRespond={(requestId, optionId) =>
						socket.send({ type: "permission_response", requestId, optionId })
					}
				/>
			))}
			<PromptInput
				turnActive={state.turnActive}
				onSend={(text) => socket.send({ type: "prompt", text })}
				onCancel={() => socket.send({ type: "cancel" })}
			/>
		</div>
	);
}