feat(gpt-runner-web): add logo in chat input

nicepkg · Jun 27, 2023 · bfb815c · bfb815c
1 parent 0ad69ca
commit bfb815c
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 19 deletions.
diff --git a/packages/gpt-runner-web/client/public/locales/de.json b/packages/gpt-runner-web/client/public/locales/de.json
@@ -27,6 +27,8 @@
     "refresh_btn": "Aktualisieren",
     "filter_btn": "Filtern",
     "pin_up_btn": "Anheften",
+    "close_btn": "Schließen",
+    "search_placeholder": "Suchen...",
     "file_tree_top_tokens_tips": "<FileNumWrapper>{{fileNum}}</FileNumWrapper> Dateien <TokenNumWrapper>{{tokenNum}}</TokenNumWrapper> Tokens.",
     "file_tree_top_clear_checked_btn": "Auswahl aufheben",
     "file_tree_top_all_file_path_as_prompt": "Alle Dateipfade als Vorschlag {{tokenNum}} Tokens",

diff --git a/packages/gpt-runner-web/client/public/locales/en.json b/packages/gpt-runner-web/client/public/locales/en.json
@@ -27,6 +27,8 @@
     "refresh_btn": "Refresh",
     "filter_btn": "Filter",
     "pin_up_btn": "Pin Up",
+    "close_btn": "Close",
+    "search_placeholder": "Search...",
     "file_tree_top_tokens_tips": "<FileNumWrapper>{{fileNum}}</FileNumWrapper> Files <TokenNumWrapper>{{tokenNum}}</TokenNumWrapper> Tokens.",
     "file_tree_top_clear_checked_btn": "Clear Checked",
     "file_tree_top_all_file_path_as_prompt": "All file path as prompt {{tokenNum}} tokens",

diff --git a/packages/gpt-runner-web/client/public/locales/ja.json b/packages/gpt-runner-web/client/public/locales/ja.json
@@ -27,6 +27,8 @@
     "refresh_btn": "更新",
     "filter_btn": "フィルター",
     "pin_up_btn": "ピンアップ",
+    "close_btn": "閉じる",
+    "search_placeholder": "検索...",
     "file_tree_top_tokens_tips": "<FileNumWrapper>{{fileNum}}</FileNumWrapper>個のファイル、合計<TokenNumWrapper>{{tokenNum}}</TokenNumWrapper>トークン。",
     "file_tree_top_clear_checked_btn": "選択をクリア",
     "file_tree_top_all_file_path_as_prompt": "すべてのファイルパスをプロンプトとして使用、合計{{tokenNum}}トークン",

diff --git a/packages/gpt-runner-web/client/public/locales/zh_CN.json b/packages/gpt-runner-web/client/public/locales/zh_CN.json
@@ -27,6 +27,8 @@
     "refresh_btn": "刷新",
     "filter_btn": "筛选",
     "pin_up_btn": "钉住",
+    "close_btn": "关闭",
+    "search_placeholder": "搜索...",
     "file_tree_top_tokens_tips": "<FileNumWrapper>{{fileNum}}</FileNumWrapper>个文件，共<TokenNumWrapper>{{tokenNum}}</TokenNumWrapper>个 tokens。",
     "file_tree_top_clear_checked_btn": "清除选中",
     "file_tree_top_all_file_path_as_prompt": "将所有文件路径作为提示，共 {{tokenNum}} 个 tokens",

diff --git a/packages/gpt-runner-web/client/public/locales/zh_Hant.json b/packages/gpt-runner-web/client/public/locales/zh_Hant.json
@@ -27,6 +27,8 @@
     "refresh_btn": "刷新",
     "filter_btn": "篩選",
     "pin_up_btn": "钉住",
+    "close_btn": "關閉",
+    "search_placeholder": "搜索...",
     "file_tree_top_tokens_tips": "<FileNumWrapper>{{fileNum}}</FileNumWrapper>個文件，共<TokenNumWrapper>{{tokenNum}}</TokenNumWrapper>個 tokens。",
     "file_tree_top_clear_checked_btn": "清除選中",
     "file_tree_top_all_file_path_as_prompt": "將所有文件路徑作為提示，共 {{tokenNum}} 個 tokens",

diff --git a/...ages/gpt-runner-web/client/src/components/chat-message-input/chat-message-input.styles.ts b/...ages/gpt-runner-web/client/src/components/chat-message-input/chat-message-input.styles.ts
@@ -1,5 +1,6 @@
 import { VSCodeTextArea } from '@vscode/webview-ui-toolkit/react'
 import { styled } from 'styled-components'
+import { Logo } from '../logo'
 
 export const Wrapper = styled.div`
   display: flex;
@@ -12,19 +13,45 @@ export const Wrapper = styled.div`
 `
 
 export const ToolbarWrapper = styled.div`
+position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-shrink: 0;
 `
 
-export const StyledVSCodeTextArea = styled(VSCodeTextArea)`
+export const TextAreaWrapper = styled.div`
+  position: relative;
   margin-top: 0.5rem;
   overflow: hidden;
+  width: 100%;
+  height: 100%;
+`
+
+export const StyledVSCodeTextArea = styled(VSCodeTextArea)`
+  width: 100%;
   height: 100%;
 
   &::part(control) {
     border-radius: 0.25rem;
     height: 100%;
   }
 `
+
+export const LogoWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1.5rem;
+  padding: 0.25rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+`
+
+export const StyledLogo = styled(Logo)`
+  height: 100%;
+  opacity: 1;
+`
diff --git a/packages/gpt-runner-web/client/src/components/chat-message-input/index.tsx b/packages/gpt-runner-web/client/src/components/chat-message-input/index.tsx
@@ -1,26 +1,41 @@
 import { type FC, memo } from 'react'
-import { StyledVSCodeTextArea, ToolbarWrapper, Wrapper } from './chat-message-input.styles'
+import { LogoWrapper, StyledLogo, StyledVSCodeTextArea, TextAreaWrapper, ToolbarWrapper, Wrapper } from './chat-message-input.styles'
 
 export interface ChatMessageInputProps {
   value: string
   toolbarSlot?: React.ReactNode
+  showTopLogo?: boolean
+  showBottomLogo?: boolean
   onChange: (value: string) => void
-
 }
 export const ChatMessageInput: FC<ChatMessageInputProps> = memo((props) => {
-  const { value = '', toolbarSlot, onChange } = props
+  const { value = '', toolbarSlot, showTopLogo = false, showBottomLogo = false, onChange } = props
 
-  return <Wrapper>
+  return <Wrapper style={{
+    paddingBottom: showBottomLogo ? 'unset' : 0,
+  }}>
     <ToolbarWrapper>
       {toolbarSlot}
+
+      {showTopLogo && <LogoWrapper>
+        <StyledLogo color={'var(--panel-tab-foreground)'}></StyledLogo>
+      </LogoWrapper>}
     </ToolbarWrapper>
-    <StyledVSCodeTextArea
-      rows={10}
-      value={value}
-      onInput={(e: any) => {
-        onChange(e.target?.value)
-      }}
-    />
+
+    <TextAreaWrapper>
+      <StyledVSCodeTextArea
+        rows={10}
+        value={value}
+        onInput={(e: any) => {
+          onChange(e.target?.value)
+        }}
+      >
+      </StyledVSCodeTextArea>
+    </TextAreaWrapper>
+
+    {showBottomLogo && <LogoWrapper style={{ position: 'static' }}>
+      <StyledLogo color={'var(--panel-tab-foreground)'}></StyledLogo>
+    </LogoWrapper>}
   </Wrapper>
 })
 

diff --git a/packages/gpt-runner-web/client/src/components/logo/index.tsx b/packages/gpt-runner-web/client/src/components/logo/index.tsx
@@ -0,0 +1,40 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+
+export interface LogoProps extends React.SVGProps<SVGSVGElement> {
+  color?: string
+}
+
+export const Logo: FC<LogoProps> = memo((props) => {
+  const { color = 'var(--link-foreground)', ...otherProps } = props
+
+  return <svg width="100%" height="100%" viewBox="0 0 395.52 53.60552078266557" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" {...otherProps}>
+    <g transform="matrix(1,0,0,1,0,10.897599999999997)"><svg width="103.85"
+      viewBox="1.7000000476837158 -35.70000076293945 103.85000610351562 36.400001525878906" height="36.400000000000006"
+      data-palette-color={color}>
+      <path
+        d="M26.95-8.65L26.95-18.25 35.7-18.25 35.7-3.75Q32.7-1.6 28.8-0.45 24.9 0.7 21 0.7L21 0.7Q15.5 0.7 11.1-1.63 6.7-3.95 4.2-8.1 1.7-12.25 1.7-17.5L1.7-17.5Q1.7-22.75 4.2-26.9 6.7-31.05 11.15-33.38 15.6-35.7 21.2-35.7L21.2-35.7Q26.1-35.7 30-34.05 33.9-32.4 36.5-29.3L36.5-29.3 30.2-23.6Q26.65-27.5 21.7-27.5L21.7-27.5Q17.2-27.5 14.45-24.78 11.7-22.05 11.7-17.5L11.7-17.5Q11.7-14.6 12.95-12.33 14.2-10.05 16.45-8.78 18.7-7.5 21.6-7.5L21.6-7.5Q24.45-7.5 26.95-8.65L26.95-8.65ZM58-35Q62.75-35 66.25-33.43 69.75-31.85 71.65-28.93 73.55-26 73.55-22.05L73.55-22.05Q73.55-18.1 71.65-15.2 69.75-12.3 66.25-10.73 62.75-9.15 58-9.15L58-9.15 51.9-9.15 51.9 0 42 0 42-35 58-35ZM57.4-16.95Q60.45-16.95 62-18.28 63.55-19.6 63.55-22.05L63.55-22.05Q63.55-24.5 62-25.85 60.45-27.2 57.4-27.2L57.4-27.2 51.9-27.2 51.9-16.95 57.4-16.95ZM84.95 0L84.95-27.15 74.2-27.15 74.2-35 105.55-35 105.55-27.15 94.84-27.15 94.84 0 84.95 0Z"
+        opacity="1" transform="matrix(1,0,0,1,0,0)" fill={color} />
+    </svg></g>
+    <g><svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1"
+      x="117.75479999999999" y="0" viewBox="7.552000045776367 18.47899627685547 87.46800231933594 64.28099822998047"
+      enableBackground="new 0 0 100 100" xmlSpace="preserve" height="58.8952" width="80.13947561559701"
+      data-fill-palette-color="accent" id="s-0">
+      <path
+        d="M31.805 41.953c0-5.497 2.443-10.57 6.546-14.639-0.238-0.004-0.474-0.013-0.712-0.013-16.615 0-30.087 9.948-30.087 22.221 0 9.36 7.837 17.36 18.926 20.634l-0.585 12.604 8.693-11.016c0 0 1.642 0 3.053 0 7.925 0 15.129-2.267 20.502-5.965C43.185 63.725 31.805 53.826 31.805 41.953z"
+        fill={color} data-fill-palette-color="accent" />
+      <g fill={color} data-fill-palette-color="accent">
+        <path
+          d="M76.966 82.062l-11.95-15.139h-2.081c-17.693 0-32.089-10.865-32.089-24.223 0-13.355 14.396-24.221 32.089-24.221 17.691 0 32.085 10.866 32.085 24.221 0 9.637-7.348 18.172-18.857 22.078L76.966 82.062zM62.935 22.48c-15.487 0-28.089 9.071-28.089 20.221 0 11.15 12.602 20.223 28.089 20.223h4.021l5.437 6.889-0.369-7.949 1.504-0.443C84.153 58.281 91.02 50.934 91.02 42.701 91.02 31.551 78.421 22.48 62.935 22.48z"
+          fill={color} data-fill-palette-color="accent" />
+      </g>
+    </svg></g>
+    <g transform="matrix(1,0,0,1,211.799075615597,11.5976)"><svg width="222.75000000000003"
+      viewBox="3.5 -35 222.74000549316406 35.70000076293945" height="35.7" data-palette-color={color}>
+      <path
+        d="M25.15 0L18.8-9.3 13.4-9.3 13.4 0 3.5 0 3.5-35 19.5-35Q24.25-35 27.75-33.43 31.25-31.85 33.15-28.93 35.05-26 35.05-22.05L35.05-22.05Q35.05-18.25 33.27-15.43 31.5-12.6 28.2-11L28.2-11 35.75 0 25.15 0ZM25.05-22.05Q25.05-24.5 23.5-25.85 21.95-27.2 18.9-27.2L18.9-27.2 13.4-27.2 13.4-16.95 18.9-16.95Q21.95-16.95 23.5-18.28 25.05-19.6 25.05-22.05L25.05-22.05ZM56.65 0.7Q48.85 0.7 44.52-3.55 40.2-7.8 40.2-15.6L40.2-15.6 40.2-35 50.1-35 50.1-15.9Q50.1-7.5 56.75-7.5L56.75-7.5Q63.35-7.5 63.35-15.9L63.35-15.9 63.35-35 73.1-35 73.1-15.6Q73.1-7.8 68.77-3.55 64.45 0.7 56.65 0.7L56.65 0.7ZM103.4-35L113.1-35 113.1 0 104.95 0 89.5-18.65 89.5 0 79.8 0 79.8-35 87.95-35 103.4-16.35 103.4-35ZM143.69-35L153.39-35 153.39 0 145.24 0 129.79-18.65 129.79 0 120.09 0 120.09-35 128.24-35 143.69-16.35 143.69-35ZM170.19-7.65L188.49-7.65 188.49 0 160.39 0 160.39-35 187.84-35 187.84-27.35 170.19-27.35 170.19-21.45 185.74-21.45 185.74-14.05 170.19-14.05 170.19-7.65ZM215.64 0L209.29-9.3 203.89-9.3 203.89 0 193.99 0 193.99-35 209.99-35Q214.74-35 218.24-33.43 221.74-31.85 223.64-28.93 225.54-26 225.54-22.05L225.54-22.05Q225.54-18.25 223.76-15.43 221.99-12.6 218.69-11L218.69-11 226.24 0 215.64 0ZM215.54-22.05Q215.54-24.5 213.99-25.85 212.44-27.2 209.39-27.2L209.39-27.2 203.89-27.2 203.89-16.95 209.39-16.95Q212.44-16.95 213.99-18.28 215.54-19.6 215.54-22.05L215.54-22.05Z"
+        opacity="1" transform="matrix(1,0,0,1,0,0)" fill={color} />
+    </svg></g>
+
+  </svg>
+})
diff --git a/packages/gpt-runner-web/client/src/components/popover-menu/index.tsx b/packages/gpt-runner-web/client/src/components/popover-menu/index.tsx
@@ -25,7 +25,7 @@ export interface PopoverMenuProps {
   childrenInMenuWhenOpen?: boolean
   zIndex?: number
   clickOutSideToClose?: boolean
-  allowPin?: boolean
+  showTopBar?: boolean
   onPopoverDisplayChange?: (isPopoverOpen: boolean) => void
   buildMenuSlot: () => React.ReactNode
   buildChildrenSlot: (state: PopoverMenuChildrenState) => React.ReactNode
@@ -42,7 +42,7 @@ export const PopoverMenu: React.FC<PopoverMenuProps> = memo((props) => {
     childrenInMenuWhenOpen = false,
     zIndex = 1,
     clickOutSideToClose = true,
-    allowPin,
+    showTopBar,
     onPopoverDisplayChange,
     buildMenuSlot,
     buildChildrenSlot,
@@ -87,6 +87,11 @@ export const PopoverMenu: React.FC<PopoverMenuProps> = memo((props) => {
     getOnPopoverDisplayChange()(true)
   }
 
+  const handleCloseClick = () => {
+    setIsPin(false)
+    getOnPopoverDisplayChange()(false)
+  }
+
   const handlePinClick = () => {
     setIsPin(!isPin)
   }
@@ -166,7 +171,8 @@ export const PopoverMenu: React.FC<PopoverMenuProps> = memo((props) => {
                 ...menuStyle,
               }}
             >
-              {(allowPin ?? !childrenInMenuWhenOpen) && <PinBar>
+              {(showTopBar ?? !childrenInMenuWhenOpen) && <PinBar>
+                <Icon title={t('chat_page.close_btn')} className="codicon-close" style={{ marginRight: '0.5rem' }} onClick={handleCloseClick} />
                 <Icon title={t('chat_page.pin_up_btn')} className={isPin ? 'codicon-pinned-dirty' : 'codicon-pinned'} onClick={handlePinClick} />
               </PinBar>}
 

diff --git a/packages/gpt-runner-web/client/src/pages/chat/chat.styles.ts b/packages/gpt-runner-web/client/src/pages/chat/chat.styles.ts
@@ -23,7 +23,7 @@ export const StyledVSCodePanels = styled(VSCodePanels)`
     height: 100%;
     overflow: hidden;
   }
-`
+` as typeof VSCodePanels
 
 export const SidebarTopToolbar = styled.div`
   display: flex;

diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx b/packages/gpt-runner-web/client/src/pages/chat/components/chat-panel/index.tsx
@@ -420,7 +420,7 @@ export const ChatPanel: FC<ChatPanelProps> = memo((props) => {
 
       <PopoverMenu
         xPosition='right'
-        allowPin={false}
+        showTopBar={false}
         childrenInMenuWhenOpen={true}
         buildChildrenSlot={({ isHovering }) => {
           return <IconButton
@@ -473,6 +473,8 @@ export const ChatPanel: FC<ChatPanelProps> = memo((props) => {
         },
       ]}>
       <ChatMessageInput
+        showTopLogo={chatPanelWidth > 600}
+        showBottomLogo={chatPanelWidth <= 600}
         value={chatInstance?.inputtingPrompt || ''}
         onChange={handleInputChange}
         toolbarSlot={renderInputToolbar()}

diff --git a/packages/gpt-runner-web/client/src/pages/chat/components/chat-sidebar/index.tsx b/packages/gpt-runner-web/client/src/pages/chat/components/chat-sidebar/index.tsx
@@ -181,7 +181,7 @@ export const ChatSidebar: FC<ChatSidebarProps> = memo((props) => {
   }, [])
 
   const sidebar: SidebarProps<GptTreeItemOtherInfo> = {
-    placeholder: 'GPT RUNNER',
+    placeholder: t('chat_page.search_placeholder'),
     loading: isLoading,
     tree: {
       items: sidebarTree,

diff --git a/packages/gpt-runner-web/client/src/pages/chat/index.tsx b/packages/gpt-runner-web/client/src/pages/chat/index.tsx
@@ -1,5 +1,5 @@
 import type { CSSProperties, FC } from 'react'
-import { memo, useCallback, useEffect, useState } from 'react'
+import React, { memo, useCallback, useEffect, useState } from 'react'
 import { VSCodePanelTab, VSCodePanelView } from '@vscode/webview-ui-toolkit/react'
 import { ChatMessageStatus } from '@nicepkg/gpt-runner-shared/common'
 import { useWindowSize } from 'react-use'