feat(gpt-runner-web): add responsive ui for chat page

Author: 2214962083

packages/gpt-runner-core/src/smol-ai/index.ts

@@ -1,3 +1,4 @@
+// see: https://github.com/smol-ai/developer
 export { askCodeContext } from './ask-code-context'
 export { code2prompt } from './code-to-prompt'
 export { createAnything } from './create-anything'

packages/gpt-runner-web/client/src/components/chat-message-panel/index.tsx

@@ -1,9 +1,12 @@
 import type { FC } from 'react'
 import type { ChatStreamReqParams } from '../../../../server/src/controllers/chatgpt.controller'
+import { FlexColumn } from '../../styles/global.styles'
 
 export interface ChatMessagePanelProps extends ChatStreamReqParams { }
 export const ChatMessagePanel: FC<ChatMessagePanelProps> = (props) => {
   const { systemPrompt, messages, prompt, temperature } = props
 
-  return <></>
+  return <FlexColumn>
+
+  </FlexColumn>
 }

packages/gpt-runner-web/client/src/components/indeterminate-progress-bar/index.tsx

@@ -55,15 +55,15 @@ export const IndeterminateProgressBar: FC = () => {
         <div
           style={{
             position: 'absolute',
-            background: 'var(--vscode-progressBar-background)',
+            background: 'var(--progressBar-background)',
             width: `${(longLength / lengthRatio) * 100}%`,
             height: '100%',
           }}
         />
         <div
           style={{
             position: 'absolute',
-            background: 'var(--vscode-progressBar-background)',
+            background: 'var(--progressBar-background)',
             width: `${(shortLength / lengthRatio) * 100}%`,
             height: '100%',
             right: 0,

packages/gpt-runner-web/client/src/components/sidebar/sidebar.styles.ts

@@ -3,6 +3,7 @@ import { styled } from 'styled-components'
 export const SidebarWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  width: 100%;
 `
 
 export const SidebarSearch = styled.div`

packages/gpt-runner-web/client/src/helpers/with-breakpoint.ts

@@ -0,0 +1,48 @@
+import type { RuleSet } from 'styled-components'
+import { css } from 'styled-components'
+
+/**
+ * The viewport width breakpoints
+ */
+export enum Breakpoints {
+  sm = 375,
+  md = 768,
+  lg = 1000,
+  xl = 1240,
+}
+
+export type BreakpointName = keyof typeof Breakpoints
+
+export type StyledType = RuleSet<object>
+
+export function withBreakpoint(breakpoint: BreakpointName,
+  style: StyledType) {
+  switch (breakpoint) {
+    case 'sm':
+      return css`
+        @media (max-width: ${Breakpoints.sm}px) {
+          ${style}
+        }
+      `
+    case 'md':
+      return css`
+        @media (min-width: ${Breakpoints.md}px) {
+          ${style}
+        }
+      `
+    case 'lg':
+      return css`
+        @media (min-width: ${Breakpoints.lg}px) {
+          ${style}
+        }
+      `
+    case 'xl':
+      return css`
+        @media (min-width: ${Breakpoints.xl}px) {
+          ${style}
+        }
+      `
+    default:
+      return ''
+  }
+}

packages/gpt-runner-web/client/src/hooks/use-is-mobile.hook.ts

@@ -0,0 +1,8 @@
+import { useMedia } from 'react-use'
+import { Breakpoints } from '../helpers/with-breakpoint'
+
+export function useIsMobile() {
+  const isMobile = useMedia(`(max-width: ${Breakpoints.sm}px)`, false)
+
+  return isMobile
+}

packages/gpt-runner-web/client/src/pages/chat/chat.styles.ts

@@ -0,0 +1,15 @@
+import { css, styled } from 'styled-components'
+import { withBreakpoint } from '../../helpers/with-breakpoint'
+
+export const SidebarWrapper = styled.div`
+  max-width: 300px;
+  min-width: 200px;
+  width: 40%;
+  height: 100%;
+  flex-shrink: 0;
+
+  ${withBreakpoint('sm', css`
+    max-width: 100%;
+    width: 100%;
+  `)}
+`

packages/gpt-runner-web/client/src/pages/chat/index.tsx

@@ -1,13 +1,24 @@
 import type { FC } from 'react'
+import { useCallback } from 'react'
+import { VSCodePanelTab, VSCodePanelView, VSCodePanels } from '@vscode/webview-ui-toolkit/react'
 import type { SidebarProps } from '../../components/sidebar'
 import { Sidebar } from '../../components/sidebar'
+import { useIsMobile } from '../../hooks/use-is-mobile.hook'
+import { ChatMessagePanel } from '../../components/chat-message-panel'
+import { FlexColumn, FlexRow } from '../../styles/global.styles'
+import { SidebarWrapper } from './chat.styles'
 
 const Chat: FC = () => {
+  const isMobile = useIsMobile()
+
   const sidebar: SidebarProps = {
     topToolbar: {
       title: 'GPT Runner',
       actions: [],
     },
+    onCreateChat: () => { },
+    onDeleteChat: () => { },
+    onRenameChat: () => { },
     tree: {
       items: [
         {
@@ -35,9 +46,36 @@ const Chat: FC = () => {
       ],
     },
   }
-  return <div>
-    <Sidebar {...sidebar}></Sidebar>
-  </div>
+
+  const renderSidebar = useCallback(() => {
+    return <SidebarWrapper>
+      <Sidebar {...sidebar}></Sidebar>
+    </SidebarWrapper>
+  }, [sidebar])
+
+  const renderChatPanel = useCallback(() => {
+    return <FlexColumn style={{ flex: 1 }}>
+      <ChatMessagePanel></ChatMessagePanel>
+    </FlexColumn>
+  }, [])
+
+  if (isMobile) {
+    return <VSCodePanels>
+      <VSCodePanelTab id="explore">Explore</VSCodePanelTab>
+      <VSCodePanelTab id="chat">Chat</VSCodePanelTab>
+      <VSCodePanelView id="explore">
+        {renderSidebar()}
+      </VSCodePanelView>
+      <VSCodePanelView id="chat">
+        {renderChatPanel()}
+      </VSCodePanelView>
+    </VSCodePanels>
+  }
+
+  return <FlexRow>
+    {renderSidebar()}
+    {renderChatPanel()}
+  </FlexRow>
 }
 
 Chat.displayName = 'Chat'

packages/gpt-runner-web/client/src/styles/global.styles.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle } from 'styled-components'
+import { createGlobalStyle, styled } from 'styled-components'
 
 export const GlobalStyle = createGlobalStyle`
   #root {
@@ -25,3 +25,23 @@ export const GlobalStyle = createGlobalStyle`
       margin: 0;
   }
 `
+
+export const FlexRow = styled.div`
+  display: flex;
+  flex-direction: row;
+`
+
+export const FlexColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const FlexRowCenter = styled(FlexRow)`
+  justify-content: center;
+  align-items: center;
+`
+
+export const FlexColumnCenter = styled(FlexColumn)`
+  justify-content: center;
+  align-items: center;
+`

packages/gpt-runner-web/package.json

@@ -59,6 +59,7 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.11.2",
     "react-syntax-highlighter": "^15.5.0",
+    "react-use": "^17.4.0",
     "styled-components": "^6.0.0-rc.1",
     "zustand": "^4.3.8"
   },