Elgato_dark/lobehub
1
0
Fork 0
mirror of https://github.com/lobehub/lobehub synced 2026-04-21 17:47:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 86

💄 style: Move file inside chat input in mobile mode

Browse source
This commit is contained in:
canisminor1990 2023-12-02 16:32:35 +08:00
parent bbe14c467b
commit b6401c1967
6 changed files with 70 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
README.md
View file

@ -395,6 +395,8 @@ If you want to deploy this service yourself on Zeabur, you can follow these step
</div>
<br/>
### Environment Variable
This project provides some additional configuration items set with environment variables:
@ -485,7 +487,37 @@ Contributions of all types are more than welcome; if you are interested in contr
[![][submit-agents-shield]][submit-agents-link]
[![][submit-plugin-shield]][submit-plugin-link]
[![][contributors-contrib]][contributors-link]
<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
<table>
<tr>
<th colspan="2">
<br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
</th>
</tr>
<tr>
<td>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
<img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
</picture>
</td>
<td rowspan="2">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
<img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
</picture>
</td>
</tr>
<tr>
<td>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
<img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
</picture>
</td>
</tr>
</table>
</a>
<div align="right">
@ -530,8 +562,6 @@ This project is [MIT](./LICENSE) licensed.
[chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
[codespaces-shield]: https://github.com/codespaces/badge.svg
[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-chat
[contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
[deploy-button-image]: https://vercel.com/button
[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
[deploy-on-zeabur-button-image]: https://zeabur.com/button.svg

36
README.zh-CN.md
View file

@ -369,6 +369,8 @@ $ docker run -d -p 3210:3210 \
</div>
<br/>
### 环境变量
本项目提供了一些额外的配置项，使用环境变量进行设置：
@ -459,7 +461,37 @@ $ bun run dev
[![][submit-agents-shield]][submit-agents-link]
[![][submit-plugin-shield]][submit-plugin-link]
[![][contributors-contrib]][contributors-link]
<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
<table>
<tr>
<th colspan="2">
<br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
</th>
</tr>
<tr>
<td>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
<img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
</picture>
</td>
<td rowspan="2">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
<img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
</picture>
</td>
</tr>
<tr>
<td>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
<img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
</picture>
</td>
</tr>
</table>
</a>
<div align="right">
@ -504,8 +536,6 @@ This project is [MIT](./LICENSE) licensed.
[chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
[codespaces-link]: https://codespaces.new/lobehub/lobe-chat
[codespaces-shield]: https://github.com/codespaces/badge.svg
[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-chat
[contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
[deploy-button-image]: https://vercel.com/button
[deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
[deploy-on-zeabur-button-image]: https://zeabur.com/button.svg

2
src/app/chat/(mobile)/features/ChatInput/Files.tsx
View file

@ -10,7 +10,7 @@ const Files = memo(() => {
return (
<div style={{ position: 'relative', width: '100vw' }}>
<EditableFileList alwaysShowClose items={inputFilesList} />
<EditableFileList alwaysShowClose items={inputFilesList} padding={'0 8px'} />
</div>
);
});

2
src/app/chat/(mobile)/features/ChatInput/Mobile.tsx
View file

@ -3,6 +3,7 @@ import { rgba } from 'polished';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import Files from '@/app/chat/(mobile)/features/ChatInput/Files';
import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
import InputAreaInner from '@/app/chat/features/ChatInput/InputAreaInner';
import STT from '@/app/chat/features/ChatInput/STT';
@ -28,6 +29,7 @@ const ChatInputArea = memo(() => {
return (
<Flexbox className={styles.container} gap={12}>
<Files />
<ActionBar mobile padding={'0 8px'} rightAreaStartRender={<SaveTopic mobile />} />
<Flexbox className={styles.inner} gap={8} horizontal>
<STT mobile />

2
src/app/chat/(mobile)/features/ChatInput/index.tsx
View file

@ -4,7 +4,6 @@ import { memo } from 'react';
import SafeSpacing from '@/components/SafeSpacing';
import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
import Files from './Files';
import ChatInputArea from './Mobile';
const useStyles = createStyles(
@ -25,7 +24,6 @@ const ChatInputMobileLayout = memo(() => {
return (
<>
<Files />
<SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
<div className={styles}>
<ChatInputArea />

2
src/components/FileList/EditableFileList.tsx
View file

@ -9,7 +9,7 @@ interface EditableFileListProps {
alwaysShowClose?: boolean;
editable?: boolean;
items: string[];
padding?: number;
padding?: number | string;
}
const EditableFileList = memo<EditableFileListProps>(