-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
275 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| 'use client'; | ||
|
|
||
| import React from 'react'; | ||
| import { useShell } from '@/providers/shell'; | ||
|
|
||
| export const Shell = () => { | ||
| const shellInputRef = React.useRef<HTMLSpanElement>(null); | ||
|
|
||
| const focusInput = () => { | ||
| shellInputRef.current?.focus(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className='font-mono text-xs md:text-base h-screen flex flex-col overflow-y-scroll' | ||
| onClick={focusInput} | ||
| > | ||
| <ShellHistory /> | ||
| <ShellInput ref={shellInputRef} /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const ShellInput = React.forwardRef<HTMLSpanElement | null>((_, ref) => { | ||
| const [input, setInput] = React.useState<string>(''); | ||
| const inputRef = React.useRef<HTMLSpanElement>(null); | ||
| const { history, execute, user, hostname } = useShell(); | ||
|
|
||
| // React.useImperativeHandle(ref, () => ({ | ||
| // focus: () => { | ||
| // inputRef.current?.focus(); | ||
| // }, | ||
| // })); | ||
|
|
||
| const handleKeyDown = (e: React.KeyboardEvent) => { | ||
| if (e.key === 'Enter' && !e.shiftKey) { | ||
| e.preventDefault(); | ||
| const output = execute(input); | ||
| // Add the input and output to history | ||
| history.add({ role: 'user', content: `${user.get()}@${hostname.get()} $ ${input}` }); | ||
| history.add({ role: 'assistant', content: output }); | ||
| setInput(''); | ||
| } | ||
| }; | ||
|
|
||
| const handleChange = (e: React.FormEvent<HTMLSpanElement>) => { | ||
| setInput(e.currentTarget.textContent || ''); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='bg-transparent outline-none resize-none break-all'> | ||
| <span>{`${user.get()}@${hostname.get()} $ `}</span> | ||
| <span | ||
| contentEditable | ||
| ref={inputRef} | ||
| onInput={handleChange} | ||
| onKeyDown={handleKeyDown} | ||
| className='bg-transparent outline-none' | ||
| autoFocus | ||
| /> | ||
| </div> | ||
| ); | ||
| }); | ||
|
|
||
| export const ShellHistory = () => { | ||
| const { history } = useShell(); | ||
| const [currentTime, setCurrentTime] = React.useState(getTime()); | ||
|
|
||
| React.useEffect(() => { | ||
| const timer = setInterval(() => { | ||
| setCurrentTime(getTime()); | ||
| }, 1000); | ||
|
|
||
| return () => { | ||
| clearInterval(timer); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <p suppressHydrationWarning> | ||
| <a href='https://soohoonchoi.com' className='link'> | ||
| soohoonchoi | ||
| </a>{' '} | ||
| <React.Suspense fallback={null}> | ||
| {currentTime} | ||
| </React.Suspense> | ||
| <br /> | ||
| Type "help", "credits" or "license" for more. | ||
| </p> | ||
| {history.get().map((message, index) => ( | ||
| <React.Fragment key={index}> | ||
| <span>{message.content}</span> | ||
| <br /> | ||
| </React.Fragment> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| function getTime() { | ||
| const date = new Date(); | ||
| const formattedDate = date.toLocaleDateString('en-US', { | ||
| year: 'numeric', | ||
| month: 'short', | ||
| day: 'numeric', | ||
| }); | ||
| const formattedTime = date.toLocaleTimeString('en-US', { | ||
| hour: '2-digit', | ||
| minute: '2-digit', | ||
| second: '2-digit', | ||
| hour12: false, | ||
| }); | ||
| return `${formattedDate}, ${formattedTime}`; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
|
|
||
|
|
||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
|
|
||
| const initialShellState: ShellState = { | ||
| history: [] as Message[], | ||
| user: 'guest', | ||
| hostname: 'soohoonchoi.com', | ||
| shell: {} as Shell | ||
| } | ||
|
|
||
| const ShellStateReducer = (state: ShellState, action: ShellStateAction): ShellState => { | ||
| switch (action.type) { | ||
| case 'addHistory': | ||
| return { | ||
| ...state, | ||
| history: [...state.history, action.payload] | ||
| }; | ||
| case 'clearHistory': | ||
| return { | ||
| ...state, | ||
| history: [] | ||
| }; | ||
| case 'setUser': | ||
| return { | ||
| ...state, | ||
| user: action.payload | ||
| }; | ||
| case 'setHostname': | ||
| return { | ||
| ...state, | ||
| hostname: action.payload | ||
| }; | ||
| case 'setShell': | ||
| return { | ||
| ...state, | ||
| shell: action.payload | ||
| }; | ||
| default: | ||
| return state; | ||
| } | ||
| } | ||
|
|
||
| interface ShellContext { | ||
| history: { | ||
| get: () => Message[]; | ||
| add: (message: Message) => void; | ||
| clear: () => void; | ||
| }, | ||
| user: { | ||
| get: () => string; | ||
| set: (user: string) => void; | ||
| }, | ||
| hostname: { | ||
| get: () => string; | ||
| set: (hostname: string) => void; | ||
| }, | ||
| execute: (command: string) => string; | ||
| } | ||
|
|
||
| const ShellContext = React.createContext<ShellContext | undefined>(undefined); | ||
|
|
||
|
|
||
| export function useShell() { | ||
| const context = React.useContext(ShellContext); | ||
| if (!context) { | ||
| throw new Error('useShell must be used within a ShellProvider'); | ||
| } | ||
| return context; | ||
| } | ||
|
|
||
| export function ShellProvider({ children }: { children: React.ReactNode }) { | ||
| const [state, dispatch] = React.useReducer(ShellStateReducer, initialShellState); | ||
| const shellContext = { | ||
| history: { | ||
| get: () => state.history, | ||
| add: (message: Message) => dispatch({ type: 'addHistory', payload: message }), | ||
| clear: () => dispatch({ type: 'clearHistory' }) | ||
| }, | ||
| user: { | ||
| get: () => state.user, | ||
| set: (user: string) => dispatch({ type: 'setUser', payload: user }) | ||
| }, | ||
| hostname: { | ||
| get: () => state.hostname, | ||
| set: (hostname: string) => dispatch({ type: 'setHostname', payload: hostname }) | ||
| }, | ||
| execute: (command: string) => { | ||
| return state.shell.run(command); | ||
| } | ||
| } | ||
| React.useEffect(() => { | ||
| async function init() { | ||
| const shell = { | ||
| run: (command: string) => { | ||
| return command; | ||
| } | ||
| } as Shell; | ||
| // const shell = await getShell(); | ||
| dispatch({ type: 'setShell', payload: shell }); | ||
| } | ||
| init(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <ShellContext.Provider | ||
| value={shellContext} | ||
| > | ||
| {children} | ||
| </ShellContext.Provider> | ||
| ); | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
|
|
||
| type Message = { | ||
| role: 'user' | 'assistant' | 'system'; | ||
| content: string; | ||
| } | ||
|
|
||
| type Shell = { | ||
| run: (command: string) => string; | ||
| } | ||
|
|
||
| type ShellStateAction = | ||
| | { type: 'addHistory'; payload: Message } | ||
| | { type: 'clearHistory' } | ||
| | { type: 'setUser'; payload: string } | ||
| | { type: 'setHostname'; payload: string } | ||
| | { type: 'setShell'; payload: Shell }; | ||
|
|
||
| type ShellState = { | ||
| history: Message []; | ||
| user: string; | ||
| hostname: string; | ||
| shell: Shell | ||
| }; | ||
|
|