fix(web): chat file ui update

This commit is contained in:
zhaoying
2026-02-09 10:37:29 +08:00
parent bca03f1365
commit 7fe2d8fbe1
2 changed files with 18 additions and 14 deletions

View File

@@ -2,7 +2,7 @@
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2025-12-10 16:46:14 * @Date: 2025-12-10 16:46:14
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-06 21:23:37 * @Last Modified time: 2026-02-09 10:26:38
*/ */
import { type FC, useEffect, useMemo } from 'react' import { type FC, useEffect, useMemo } from 'react'
import { Flex, Input, Form } from 'antd' import { Flex, Input, Form } from 'antd'
@@ -66,7 +66,7 @@ const ChatInput: FC<ChatInputProps> = ({
return ( return (
<div className={`rb:absolute rb:bottom-3 rb:left-0 rb:right-0 rb:w-full ${className}`}> <div className={`rb:absolute rb:bottom-3 rb:left-0 rb:right-0 rb:w-full ${className}`}>
<Flex vertical justify="space-between" className="rb:border rb:border-[#DFE4ED] rb:rounded-xl rb:min-h-30"> <Flex vertical justify="space-between" className="rb:border rb:border-[#DFE4ED] rb:rounded-xl rb:min-h-30">
{previewFileList.length > 0 && <Flex gap={14} className="rb:mx-3! rb:mt-3!"> {previewFileList.length > 0 && <div className="rb:overflow-x-auto rb:max-w-full"><Flex gap={14} className="rb:mx-3! rb:mt-3! rb:w-max!">
{previewFileList.map((file) => { {previewFileList.map((file) => {
if (file.type.includes('image')) { if (file.type.includes('image')) {
return ( return (
@@ -101,7 +101,7 @@ const ChatInput: FC<ChatInputProps> = ({
</div> </div>
) )
})} })}
</Flex>} </Flex></div>}
{/* Message input form */} {/* Message input form */}
<Form form={form} layout="vertical"> <Form form={form} layout="vertical">
<Form.Item name="message" noStyle> <Form.Item name="message" noStyle>

View File

@@ -1,8 +1,8 @@
/* /*
* @Author: ZhaoYing * @Author: ZhaoYing
* @Date: 2026-02-06 21:09:47 * @Date: 2026-02-06 21:09:47
* @Last Modified by: ZhaoYing * @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-06 21:09:47 * @Last Modified time: 2026-02-09 10:17:54
*/ */
/** /**
* Upload File List Modal Component * Upload File List Modal Component
@@ -19,8 +19,7 @@
* @component * @component
*/ */
import { forwardRef, useImperativeHandle, useState } from 'react'; import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input, Select, Button, Space } from 'antd'; import { Form, Input, Select, Button, Flex } from 'antd';
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import type { UploadFileListModalRef } from '../types' import type { UploadFileListModalRef } from '../types'
@@ -95,11 +94,12 @@ const UploadFileListModal = forwardRef<UploadFileListModalRef, UploadFileListMod
<> <>
{/* Render each file entry with type selector and URL input */} {/* Render each file entry with type selector and URL input */}
{fields.map(({ key, name, ...restField }) => ( {fields.map(({ key, name, ...restField }) => (
<Space key={key} style={{ display: 'flex' }} align="baseline"> <Flex key={key} gap={8} align="center" className="rb:mb-3!">
<FormItem <FormItem
{...restField} {...restField}
name={[name, 'type']} name={[name, 'type']}
initialValue="image" initialValue="image"
className="rb:mb-0!"
> >
<Select <Select
placeholder={t('memoryConversation.fileType')} placeholder={t('memoryConversation.fileType')}
@@ -113,15 +113,19 @@ const UploadFileListModal = forwardRef<UploadFileListModalRef, UploadFileListMod
{...restField} {...restField}
name={[name, 'url']} name={[name, 'url']}
rules={[{ required: true, message: t('common.pleaseEnter') }]} rules={[{ required: true, message: t('common.pleaseEnter') }]}
className="rb:mb-0!"
> >
<Input placeholder={t('memoryConversation.fileUrl')} className="rb:w-82.5" /> <Input placeholder={t('memoryConversation.fileUrl')} className="rb:w-82.5!" />
</FormItem> </FormItem>
<MinusCircleOutlined onClick={() => remove(name)} style={{ marginTop: 30 }} /> <div
</Space> className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/delete.svg')] rb:hover:bg-[url('@/assets/images/delete_hover.svg')]"
onClick={() => remove(name)}
></div>
</Flex>
))} ))}
<Form.Item> <Form.Item noStyle>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}> <Button type="dashed" onClick={() => add()} block>
{t('common.add')} + {t('common.add')}
</Button> </Button>
</Form.Item> </Form.Item>
</> </>