lobehub / lobe-ui Goto Github PK

View Code? Open in Web Editor NEW

817.0 8.0 119.0 2.89 MB

🍭 Lobe UI - an open-source UI component library for building AIGC web apps

Home Page: https://ui.lobehub.com

License: MIT License

JavaScript 0.12% TypeScript 99.84% Shell 0.03%

react design-system ui ui-components ui-kit lobehub aigc chatbot antd typescript

lobe-ui's People

Stargazers

Watchers

Forkers

keyzf wxh16144-forks taotao033 web-logs2 fossabot sorokinvld yingpengsha salomaolaredo jeromyjsmith kcbf only-yours w840980261 moonlit7 nrvo mushan0x0 kesikselma apollohuang1 dayowang halecoder bbbtt04 humuhimi dongroovy1120 justin3go tutumomo zggmd yuelight allwavemedia bentwnghk gaegam anyone-yuren catspunch trungdt0 zdaoxb kiner-tang sunnyxorange charliedaveputh yixuqiu mokinzhao meclouds chardywzy jagobi quentinhsu tnga tyldev lesonky 1622145167 zhaopufeng abdalhadi21 krsilas sergewilfried kelvinqiu802 whatif-dev danmarauda suofiya liugod linecode nanayashiki1215 keymastro13 morben neyio-cyber fb208 haizhixin2021 kaifamiao hermanla anditommy baba698 paxwell-paxwell carhsu alexrumi luighifeodrippe wuyuan1992 zhangyelong progesor lihuibng system63mush pigpig77 gooyoung aileague sandycs-protoss letme-chat mosade leericch leochen01 ulgenmf gqadonis happiness0617 saber-kurama sxjeru 306026185 jonnyquan evanpengyou xiaozhiob devgzgqq govey1nw bluepeople1 mdys bodhihu bertkiv tt-52101 slackdevelopers

lobe-ui's Issues

🥰 需求描述 | Feature Description

Chinese Great Firewall seems to be blocking my (static, unchangeable) IPs.

🧐 解决方案 | Proposed Solution

Upload the assets that are fetched from CDN to a different CDN, like jsDelivr or CDNjs.

📝 补充信息 | Additional Information

$ curl -v https://npm.elemecdn.com
*   Trying 180.163.40.36:443...
* connect to 180.163.40.36 port 443 failed: Connection timed out
*   Trying 180.163.40.38:443...
* After 84400ms connect time, move on!
* connect to 180.163.40.38 port 443 failed: Connection timed out
*   Trying 180.163.40.41:443...
* After 42200ms connect time, move on!
* connect to 180.163.40.41 port 443 failed: Connection timed out
*   Trying 180.163.40.35:443...
* After 21099ms connect time, move on!
* connect to 180.163.40.35 port 443 failed: Connection timed out
*   Trying 180.163.40.37:443...
* After 10549ms connect time, move on!
* connect to 180.163.40.37 port 443 failed: Connection timed out
*   Trying 180.163.40.34:443...
* After 5275ms connect time, move on!
* connect to 180.163.40.34 port 443 failed: Connection timed out
*   Trying 180.163.40.19:443...
* After 2636ms connect time, move on!
* connect to 180.163.40.19 port 443 failed: Connection timed out
* Failed to connect to npm.elemecdn.com port 443: Connection timed out
* Closing connection 0
curl: (28) Failed to connect to npm.elemecdn.com port 443: Connection timed out

[Bug] Highlighter theme is not working

💻 系统环境 | Operating System

macOS

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

Highlighter theme is not working

🚦 期望结果 | Expected Behavior

Working properly

📷 复现步骤 | Recurrence Steps

Visit doc

📝 补充信息 | Additional Information

No response

[Bug] Module not found: Error: Can't resolve '@splinetool/runtime'

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

error - ./node_modules/@splinetool/react-spline/dist/react-spline.js:2:0-56
Module not found: Error: Can't resolve '@splinetool/runtime'

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

No response

Lobe UI FOUC (flash of unstyled content)

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

It seems like ui.lobehub.com is using react server components that's why the actual theme changes after some time which causes the screen to flash white for a second before showing the dark theme.

🚦 期望结果 | Expected Behavior

Please can you guide how can we prevent FOUC (flash of unstyled content) when using react server components in Next Js 13 App directory?

📷 复现步骤 | Recurrence Steps

2023-12-26.00-17-46.mp4

📝 补充信息 | Additional Information

No response

[Question] difference between [pro-chat](https://pro-chat.antdigital.dev/components/editable-message-list)?

🧐 问题描述 | Proposed Solution

i found the editable-message-list is same as antd/editable-message-list.

Are lobe-ui and pro-chat the same project?

📝 补充信息 | Additional Information

No response

🥰 需求描述 | Feature Description

markdown不支持添加脚注，希望能够实现如下功能

还有一个功能也需要提供下支持，如下，鼠标移入可展示tips文本：

🧐 解决方案 | Proposed Solution

markdown不支持添加脚注

📝 补充信息 | Additional Information

No response

[Bug] firefox context menu position issue

💻 系统环境 | Operating System

macOS

🌐 浏览器 | Browser

Firefox

🐛 问题描述 | Bug Description

https://ui.lobehub.com/components/context-menu

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

No response

[Request] 期望 Avatar 组件支持传入 ReactNode，以进行自定义

🥰 需求描述 | Feature Description

Ant Design 的 Avatar 的 src 属性是支持 ReactNode 的

目前的 lobe-ui 的实现不支持

期望支持下

🧐 解决方案 | Proposed Solution

修改 Avatar 组件的代码解决

我修改了下代码，提交PR：#100

📝 补充信息 | Additional Information

No response

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

如果 code 中包含 html 标签，而且解析失败的话，走到 catch 里面 html 标签会直接渲染，别问我怎么知道的。。。

lobe-ui/src/hooks/useHighlight.ts

Lines 60 to 62 in 532c5bf

 } catch { 

 return `<pre><code>${text}</code></pre>`; 

 }

🚦 期望结果 | Expected Behavior

需要在解析失败后对 code 进行转义

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

No response

🧐 问题描述 | Proposed Solution

import { Markdown } from '@lobehub/ui';
import React from 'react';

const str = "当前内存占用率为$82.51\%$。";

const Comp: React.FC= () => {
return (

{str}

);
};

LaTeX 的解析是不是还有一点问题？

📝 补充信息 | Additional Information

dependencies:
@lobehub/ui 1.144.5

🧐 问题描述 | Proposed Solution

经查，由下述代码阻止，不太清楚用意。

lobe-ui/src/ThemeProvider/GlobalStyle/antdOverride.ts

Lines 78 to 83 in eb219b7

  @media (max-width: 575px) { 

  .${token.prefixCls}-tooltip { 

  display: none !important; 

  } 

  } 

 `;

📝 补充信息 | Additional Information

此外 tooltip 亦可适配暗色主题。

可能相关 lobehub/lobe-chat#1762

🥰 需求描述 | Feature Description

Could you please consider adding treeshaking to the project after packaging? The Katex site seems to be using a lot of resources, and this optimization could help improve its performance.

🧐 解决方案 | Proposed Solution

使用treesharking

📝 补充信息 | Additional Information

No response

[RFC] Lobe UI 2.0

Note

RFC 构思阶段，欢迎讨论 ref: #136

更清晰的入口文件分类
提升组件性能 (样式注入+组件层级)
更规范主流的接口设计
更好的 i18next 支持

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

🚦 期望结果 | Expected Behavior

应该是直接从 antd 中引入 Button ？

📷 复现步骤 | Recurrence Steps

访问 https://ui.lobehub.com/ 即可

📝 补充信息 | Additional Information

No response

[Bug] Homepage's button has some trouble in a specific action.

💻 系统环境 | Operating System

macOS

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

at the Lobe UI homepage.

https://ui.lobehub.com/

At the webpage of intro about the Fast section icon.
when pointer over the Icon of the fast icon , the below editor's icons can't reacted.

Maybe this effect would occur in other same scenes.

🚦 期望结果 | Expected Behavior

the defualt pointer with the editor buttons when after the hover Fast Icon.

📷 复现步骤 | Recurrence Steps

📝 补充信息 | Additional Information

No response

🧐 问题描述 | Proposed Solution

vue项目npm i npm i @lobehub/ui报错

📝 补充信息 | Additional Information

No response

[Question] 太喜欢这些icon了，不知道哪里才可以下载到这完整的包

🧐 问题描述 | Proposed Solution

📝 补充信息 | Additional Information

No response

[chat]对话气泡 hover 快捷条过长, 不超过3个功能，功能按角色进行区分

💻 系统环境 | Operating System

macOS

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

看不太清，浅色模式正常

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

📝 补充信息 | Additional Information

No response

[Request] ActionIconGroup items support `disabled` prop

🥰 需求描述 | Feature Description

ActionIconGroup items prop support disabled prop.
When disabled is set to true, the icon is disabled and cannot be selected.

const items: ActionIconGroupProps['items'] = [
{
icon: Copy,
key: 'copy',
label: 'Copy',
disabled: true
},
{
icon: RotateCw,
key: 'regenerate',
label: 'Regenerate',
},
];

🧐 解决方案 | Proposed Solution

add disabled prop

📝 补充信息 | Additional Information

No response

[Request] ChatItem/EditableMessage里的markdown增加图表展示

🥰 需求描述 | Feature Description

希望可以在markdown中添加图表展示

🧐 解决方案 | Proposed Solution

增加类似echarts/chart.js的数据兼容，或者提供扩展

📝 补充信息 | Additional Information

No response

[Question] Is the web corresponding to the ui docs open source?

🧐 问题描述 | Proposed Solution

Or the docs web is based on your team's work or others open source framework?
Thanks.

📝 补充信息 | Additional Information

No response

[Bug] 在输入带换行的长文本时chatitem返回内容不换行

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

输入文案

在该平台的展示效果

因为css中缺少了white-space: pre-wrap;

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

通过排查，应该添加在 lobe-ui/src/ChatItem
/style.ts 中

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

https://ui.lobehub.com/components 中尝试打开任何一个CodeSandbox都会失败，每一个都显示ModuleNotFoundError Could not find module in path: 'lucide-react/dist/esm/icons/fingerprint.js' relative to '/node_modules/lucide-react/dist/esm/icons/index.js'

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

以下是完整报错：

ModuleNotFoundError
Could not find module in path: 'lucide-react/dist/esm/icons/fingerprint.js' relative to '/node_modules/lucide-react/dist/esm/icons/index.js'
▼ 23 stack frames were expanded.
ve.resolveModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:124705
ve.resolveTranspiledModuleSync
https://codesandbox.io/static/js/sandbox.781f63989.js:1:125596
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106358
$csb$eval
https://gzq947.csb.app/node_modules/lucide-react/dist/esm/icons/index.js:4603:58
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
$csb$eval
https://gzq947.csb.app/node_modules/lucide-react/dist/esm/lucide-react.js:111:29
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
    at $csb$eval (https://gzq947.csb.app/node_modules/
lobehub/ui/es/ActionIcon/index.js:9:26
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
    at $csb$eval (https://gzq947.csb.app/node_modules/
lobehub/ui/es/index.js:7:54
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
▲ 23 stack frames were expanded.
$csb$eval
/App.tsx:1
> 1 | import { SliderWithInput } from '@lobehub/ui';
  2 | 
  3 | export default () => {
  4 |   return <SliderWithInput />;
View compiled
▼ 4 stack frames were expanded.
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
▲ 4 stack frames were expanded.
$csb$eval
/index.tsx:10
   7 | 
   8 | import React from 'react';
   9 | import { createRoot } from "react-dom/client";
> 10 | import App from "./App";
  11 | 
  12 | const rootElement = document.getElementById("root");
  13 | const root = createRoot(rootElement);
View compiled
▼ 7 stack frames were expanded.
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
ve.evaluateModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:116721
(anonymous function)
https://codesandbox.io/static/js/sandbox.781f63989.js:1:278474
r
https://codesandbox.io/static/js/common-sandbox.09f563264.chunk.js:1:606
a
https://codesandbox.io/static/js/common-sandbox.09f563264.chunk.js:1:817
▲ 7 stack frames were expanded.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`@types/query-string`

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/workflows/issue-auto-comments.yml

wow-actions/auto-comment v1

wow-actions/auto-comment v1

wow-actions/auto-comment v1

actions-cool/issues-helper v3

.github/workflows/issue-check-inactive.yml

actions-cool/issues-helper v3

.github/workflows/issue-close-require.yml

actions-cool/issues-helper v3

actions-cool/issues-helper v3

actions-cool/issues-helper v3

.github/workflows/release.yml

actions/checkout v4

oven-sh/setup-bun v2

.github/workflows/test.yml

actions/checkout v4

oven-sh/setup-bun v2

codecov/codecov-action v4

npm

package.json

@babel/runtime ^7.24.7

@dnd-kit/core ^6.1.0

@dnd-kit/modifiers ^7.0.0

@dnd-kit/sortable ^8.0.0

@dnd-kit/utilities ^3.2.2

@emoji-mart/data ^1.2.1

@emoji-mart/react ^1.1.1

@floating-ui/react ^0.26.19

@giscus/react ^3.0.0

@react-spring/web ^9.7.3

@shikijs/transformers ^1.10.0

@splinetool/runtime ^0.9.526

chroma-js ^2.4.2

dayjs ^1.11.11

emoji-mart ^5.6.0

emoji-regex ^10.3.0

fast-deep-equal ^3.1.3

immer ^10.1.1

leva ^0.9.35

lodash-es ^4.17.21

numeral ^2.0.6

polished ^4.3.1

prism-react-renderer ^2.3.1

query-string ^9.0.0

rc-footer ^0.6.8

re-resizable ^6.9.17

react-error-boundary ^4.0.13

react-layout-kit ^1.9.0

react-markdown ^8.0.7

react-merge-refs ^2.1.1

react-rnd ^10.4.11

react-simple-code-editor ^0.13.1

rehype-katex ^6.0.3

rehype-raw ^7.0.0

remark-breaks ^4.0.0

remark-gfm ^3.0.1

remark-math ^5.1.1

shiki ^1.10.0

swr ^2.2.5

ts-md5 ^1.3.1

url-join ^5.0.0

use-merge-value ^1.2.0

uuid ^10.0.0

zustand ^4.5.4

zustand-utils ^1.3.2

@ant-design/icons ^5.3.7

@commitlint/cli ^19.3.0

@lobehub/lint ^1.24.3

@testing-library/react ^14.3.1

@types/chroma-js ^2.4.4

@types/lodash-es ^4.17.12

@types/mdx ^2.0.13

@types/numeral ^2.0.5

@types/pangu ^4.0.2

@types/query-string ^6.3.0

@types/react 18.2.40

@types/react-dom ^18.3.0

@types/uuid ^10.0.0

@vitest/coverage-v8 ~1.2.2

babel-plugin-antd-style ^1.0.4

commitlint ^19.3.0

concurrently ^8.2.2

cross-env ^7.0.3

dpdm ^3.14.0

dumi 2.2.17

dumi-theme-lobehub ^1.8.1

eslint ^8.57.0

father 4.3.1

husky ^9.0.11

jsdom ^24.1.0

lint-staged ^15.2.7

prettier ^3.3.2

react ^18.3.1

react-dom ^18.3.1

remark ^14.0.3

remark-cli ^11.0.0

semantic-release ^21.1.2

stylelint ^15.11.0

typescript ^5.5.2

vitest ~1.2.2

ahooks >=3

antd >=5.13.0

antd-style >=3

lucide-react >=0.396.0

react >=18

react-dom >=18

Check this box to trigger a request for Renovate to run again on this repository

[Question] 怎么在shadow dom中使用？

🧐 问题描述 | Proposed Solution

我需要在shadow dom中使用这套组件库，但是组件库默认把style注入到了根节点中，导致样式丢失
antd 提供了解决方案，但是在这个组件库中并没有生效
https://ant-design.antgroup.com/docs/react/compatible-style-cn#shadow-dom-%E5%9C%BA%E6%99%AF

📝 补充信息 | Additional Information

No response

[Request] this is no description of List, ListItemProps which were used in lobe chat

🥰 需求描述 | Feature Description

I found lobe chat used List, ListItemProps to render session list, I'm a little confused about how to use them and cannot find descriotion in lobe UI docs, do you have plan to add them to docs?

🧐 解决方案 | Proposed Solution

add docs of List, ListItemProps

📝 补充信息 | Additional Information

Thanks very much

	@media (max-width: 575px) {
	.${token.prefixCls}-tooltip {
	display: none !important;
	}
	}
	`;