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.

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

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,7 +203,9 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   }, [assistant])
 
   return (
-    <Container id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
+    <Container>
+      <AttachmentPreview files={files} setFiles={setFiles} />
+      <InputBarContainer id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
         <Textarea
           value={text}
           onChange={(e) => setText(e.target.value)}
@@ -286,16 +289,22 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
             {!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