From f23f85523c23eaf2639ea6f8f1ad6208d634fda8 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Fri, 13 Sep 2024 14:47:05 +0800
Subject: [PATCH] feat: added attachment preview and upload/removal
 capabilities.

- Added functionality to display attachment preview with upload and removal capabilities.
- Added support for file attachments to the input bar.
---
 .../pages/home/Inputbar/AttachmentPreview.tsx |  36 ++++
 .../src/pages/home/Inputbar/Inputbar.tsx      | 188 ++++++++++--------
 2 files changed, 139 insertions(+), 85 deletions(-)
 create mode 100644 src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx

diff --git a/src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx b/src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx
new file mode 100644
index 0000000000..3c52c05e88
--- /dev/null
+++ b/src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx
@@ -0,0 +1,36 @@
+import { FileMetadata } from '@renderer/types'
+import { Upload } from 'antd'
+import { isEmpty } from 'lodash'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  files: FileMetadata[]
+  setFiles: (files: FileMetadata[]) => void
+}
+
+const AttachmentPreview: FC<Props> = ({ files, setFiles }) => {
+  if (isEmpty(files)) {
+    return null
+  }
+
+  return (
+    <Container>
+      <Upload
+        listType="picture-card"
+        fileList={files.map((file) => ({ uid: file.id, url: 'file://' + file.path, status: 'done', name: file.name }))}
+        onRemove={(item) => setFiles(files.filter((file) => item.uid !== file.id))}
+      />
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin: 10px 20px;
+  margin-right: 0;
+`
+
+export default AttachmentPreview
diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index 766199349a..bbccc987e1 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -27,6 +27,7 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import AttachmentButton from './AttachmentButton'
+import AttachmentPreview from './AttachmentPreview'
 import SendMessageButton from './SendMessageButton'
 import TokenCount from './TokenCount'
 
@@ -202,100 +203,108 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   }, [assistant])
 
   return (
-    <Container id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
-      <Textarea
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={t('chat.input.placeholder')}
-        autoFocus
-        contextMenu="true"
-        variant="borderless"
-        rows={1}
-        ref={textareaRef}
-        style={{ fontSize }}
-        styles={{ textarea: TextareaStyle }}
-        onFocus={() => setInputFocus(true)}
-        onBlur={() => setInputFocus(false)}
-        onInput={onInput}
-        disabled={searching}
-        onClick={() => searching && dispatch(setSearching(false))}
-      />
-      <Toolbar>
-        <ToolbarMenu>
-          <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
-            <ToolbarButton type="text" onClick={addNewTopic}>
-              <PlusCircleOutlined />
-            </ToolbarButton>
-          </Tooltip>
-          <Tooltip placement="top" title={t('chat.input.clear')} arrow>
-            <Popconfirm
-              title={t('chat.input.clear.content')}
-              placement="top"
-              onConfirm={clearTopic}
-              okButtonProps={{ danger: true }}
-              icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
-              okText={t('chat.input.clear')}>
-              <ToolbarButton type="text">
-                <ClearOutlined />
-              </ToolbarButton>
-            </Popconfirm>
-          </Tooltip>
-          <Tooltip placement="top" title={t('chat.input.topics')} arrow>
-            <ToolbarButton
-              type="text"
-              onClick={() => {
-                !showTopics && toggleShowTopics()
-                setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR), 0)
-              }}>
-              <HistoryOutlined />
-            </ToolbarButton>
-          </Tooltip>
-          <Tooltip placement="top" title={t('chat.input.settings')} arrow>
-            <ToolbarButton
-              type="text"
-              onClick={() => {
-                !showTopics && toggleShowTopics()
-                setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS), 0)
-              }}>
-              <ControlOutlined />
-            </ToolbarButton>
-          </Tooltip>
-          <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
-          <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
-            <ToolbarButton type="text" onClick={onToggleExpended}>
-              {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-            </ToolbarButton>
-          </Tooltip>
-          <TokenCount
-            estimateTokenCount={estimateTokenCount}
-            inputTokenCount={inputTokenCount}
-            contextCount={contextCount}
-            ToolbarButton={ToolbarButton}
-            onClick={onNewContext}
-          />
-        </ToolbarMenu>
-        <ToolbarMenu>
-          {generating && (
-            <Tooltip placement="top" title={t('chat.input.pause')} arrow>
-              <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>
-                <PauseCircleOutlined style={{ color: 'var(--color-error)', fontSize: 20 }} />
+    <Container>
+      <AttachmentPreview files={files} setFiles={setFiles} />
+      <InputBarContainer id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
+        <Textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={t('chat.input.placeholder')}
+          autoFocus
+          contextMenu="true"
+          variant="borderless"
+          rows={1}
+          ref={textareaRef}
+          style={{ fontSize }}
+          styles={{ textarea: TextareaStyle }}
+          onFocus={() => setInputFocus(true)}
+          onBlur={() => setInputFocus(false)}
+          onInput={onInput}
+          disabled={searching}
+          onClick={() => searching && dispatch(setSearching(false))}
+        />
+        <Toolbar>
+          <ToolbarMenu>
+            <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
+              <ToolbarButton type="text" onClick={addNewTopic}>
+                <PlusCircleOutlined />
               </ToolbarButton>
             </Tooltip>
-          )}
-          {!generating && <SendMessageButton sendMessage={sendMessage} disabled={generating || !text} />}
-        </ToolbarMenu>
-      </Toolbar>
+            <Tooltip placement="top" title={t('chat.input.clear')} arrow>
+              <Popconfirm
+                title={t('chat.input.clear.content')}
+                placement="top"
+                onConfirm={clearTopic}
+                okButtonProps={{ danger: true }}
+                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+                okText={t('chat.input.clear')}>
+                <ToolbarButton type="text">
+                  <ClearOutlined />
+                </ToolbarButton>
+              </Popconfirm>
+            </Tooltip>
+            <Tooltip placement="top" title={t('chat.input.topics')} arrow>
+              <ToolbarButton
+                type="text"
+                onClick={() => {
+                  !showTopics && toggleShowTopics()
+                  setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR), 0)
+                }}>
+                <HistoryOutlined />
+              </ToolbarButton>
+            </Tooltip>
+            <Tooltip placement="top" title={t('chat.input.settings')} arrow>
+              <ToolbarButton
+                type="text"
+                onClick={() => {
+                  !showTopics && toggleShowTopics()
+                  setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS), 0)
+                }}>
+                <ControlOutlined />
+              </ToolbarButton>
+            </Tooltip>
+            <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
+            <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
+              <ToolbarButton type="text" onClick={onToggleExpended}>
+                {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+              </ToolbarButton>
+            </Tooltip>
+            <TokenCount
+              estimateTokenCount={estimateTokenCount}
+              inputTokenCount={inputTokenCount}
+              contextCount={contextCount}
+              ToolbarButton={ToolbarButton}
+              onClick={onNewContext}
+            />
+          </ToolbarMenu>
+          <ToolbarMenu>
+            {generating && (
+              <Tooltip placement="top" title={t('chat.input.pause')} arrow>
+                <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>
+                  <PauseCircleOutlined style={{ color: 'var(--color-error)', fontSize: 20 }} />
+                </ToolbarButton>
+              </Tooltip>
+            )}
+            {!generating && <SendMessageButton sendMessage={sendMessage} disabled={generating || !text} />}
+          </ToolbarMenu>
+        </Toolbar>
+      </InputBarContainer>
     </Container>
   )
 }
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
 const TextareaStyle: CSSProperties = {
   paddingLeft: 0,
   padding: '10px 15px 8px'
 }
 
-const Container = styled.div`
+const InputBarContainer = styled.div`
   border: 1px solid var(--color-border-soft);
   transition: all 0.3s ease;
   position: relative;
@@ -351,14 +360,23 @@ const ToolbarButton = styled(Button)`
     transition: all 0.3s ease;
     color: var(--color-icon);
   }
-  &:hover,
-  &.active {
+  &:hover {
     background-color: var(--color-background-soft);
     .anticon,
     .iconfont {
       color: var(--color-text-1);
     }
   }
+  &.active {
+    background-color: var(--color-primary) !important;
+    .anticon,
+    .iconfont {
+      color: var(--color-white-soft);
+    }
+    &:hover {
+      background-color: var(--color-primary);
+    }
+  }
 `
 
 export default Inputbar