@lobehub/chat 1.2.2 → 1.2.3

package/src/app/(main)/chat/(workspace)/@portal/features/{Tools/ToolList → Artifacts/ArtifactList}/Item/index.tsx

@@ -15,13 +15,13 @@ import { ChatPluginPayload } from '@/types/message';
 
 import { useStyles } from './style';
 
-export interface InspectorProps {
+export interface ArtifactItemProps {
   identifier?: string;
   messageId: string;
   payload?: ChatPluginPayload;
 }
 
-const Inspector = memo<InspectorProps>(({ payload, messageId, identifier = 'unknown' }) => {
+const ArtifactItem = memo<ArtifactItemProps>(({ payload, messageId, identifier = 'unknown' }) => {
   const { t } = useTranslation('plugin');
   const { styles, cx } = useStyles();
 
@@ -71,4 +71,4 @@ const Inspector = memo<InspectorProps>(({ payload, messageId, identifier = 'unkn
   );
 });
 
-export default Inspector;
+export default ArtifactItem;

package/src/app/(main)/chat/(workspace)/@portal/features/{Tools/ToolList → Artifacts/ArtifactList}/Item/style.ts

@@ -5,12 +5,13 @@ export const useStyles = createStyles(({ css, token }) => ({
     cursor: pointer;
 
     width: 100%;
-    padding: 10px 8px;
+    padding-block: 10px;
+    padding-inline: 8px;
     padding-inline-end: 12px;
 
     color: ${token.colorText};
 
-    background: ${token.colorBgContainer};
+    background: ${token.colorBgElevated};
     border-radius: 8px;
 
     &:hover {

package/src/app/(main)/chat/(workspace)/@portal/features/Artifacts/ArtifactList/index.tsx

@@ -0,0 +1,61 @@
+import { Avatar, Icon } from '@lobehub/ui';
+import { Skeleton, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { Origami } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+import Balancer from 'react-wrap-balancer';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import ArtifactItem from './Item';
+
+const ArtifactList = () => {
+  const { t } = useTranslation('portal');
+  const messages = useChatStore(chatSelectors.currentToolMessages, isEqual);
+  const isCurrentChatLoaded = useChatStore(chatSelectors.isCurrentChatLoaded);
+
+  const theme = useTheme();
+  return !isCurrentChatLoaded ? (
+    <Flexbox gap={12} paddingInline={12}>
+      {[1, 1, 1, 1, 1, 1].map((key, index) => (
+        <Skeleton.Button
+          active
+          block
+          key={`${key}-${index}`}
+          style={{ borderRadius: 8, height: 68 }}
+        />
+      ))}
+    </Flexbox>
+  ) : messages.length === 0 ? (
+    <Center
+      gap={8}
+      paddingBlock={24}
+      style={{ border: `1px dashed ${theme.colorSplit}`, borderRadius: 8, marginInline: 12 }}
+    >
+      <Avatar
+        avatar={<Icon icon={Origami} size={'large'} />}
+        background={theme.colorFillTertiary}
+        size={48}
+      />
+      <Balancer>
+        <Typography.Link type={'secondary'}>{t('emptyArtifactList')}</Typography.Link>
+      </Balancer>
+    </Center>
+  ) : (
+    <Flexbox gap={12} paddingInline={12}>
+      {messages.map((m) => (
+        <ArtifactItem
+          identifier={m.plugin?.identifier}
+          key={m.id}
+          messageId={m.id}
+          payload={m.plugin}
+        />
+      ))}
+    </Flexbox>
+  );
+};
+
+export default ArtifactList;

package/src/app/(main)/chat/(workspace)/@portal/features/Artifacts/index.tsx

@@ -0,0 +1,21 @@
+import { Typography } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ToolList from './ArtifactList';
+
+export const Artifacts = memo(() => {
+  const { t } = useTranslation('portal');
+
+  return (
+    <Flexbox gap={8}>
+      <Typography.Title level={5} style={{ marginInline: 12 }}>
+        {t('Artifacts')}
+      </Typography.Title>
+      <ToolList />
+    </Flexbox>
+  );
+});
+
+export default Artifacts;

package/src/app/(main)/chat/(workspace)/@portal/features/Header.tsx

@@ -17,7 +17,7 @@ import { toolSelectors } from '@/store/tool/selectors';
 
 const Header = memo(() => {
   const [showToolUI, toggleInspector, closeToolUI, toolUIIdentifier = ''] = useChatStore((s) => [
-    chatPortalSelectors.showToolUI(s),
+    chatPortalSelectors.showArtifactUI(s),
     s.toggleDock,
     s.closeToolUI,
     chatPortalSelectors.toolUIIdentifier(s),

package/src/app/(main)/chat/(workspace)/@portal/index.tsx

@@ -6,13 +6,19 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/selectors';
 
-import ToolList from './features/Tools/ToolList';
-import ToolUI from './features/Tools/ToolUI';
+import ToolUI from './features/ArtifactUI';
+import Artifacts from './features/Artifacts';
 
-const Inspector = memo(() => {
-  const showToolUI = useChatStore(chatPortalSelectors.showToolUI);
+const PortalView = memo(() => {
+  const showToolUI = useChatStore(chatPortalSelectors.showArtifactUI);
 
-  return <Flexbox height={'100%'}>{showToolUI ? <ToolUI /> : <ToolList />}</Flexbox>;
+  if (showToolUI) return <ToolUI />;
+
+  return (
+    <Flexbox height={'100%'}>
+      <Artifacts />
+    </Flexbox>
+  );
 });
 
-export default Inspector;
+export default PortalView;

package/src/app/(main)/chat/(workspace)/@topic/features/SystemRole/style.ts

@@ -3,8 +3,12 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(({ css, token }) => ({
   prompt: css`
     overflow: hidden auto;
-    padding: 0 16px 16px;
+
+    padding-block: 0 16px;
+    padding-inline: 16px;
+
     opacity: 0.75;
+
     transition: opacity 200ms ${token.motionEaseOut};
 
     &:hover {
@@ -14,15 +18,15 @@ export const useStyles = createStyles(({ css, token }) => ({
   promptBox: css`
     position: relative;
     overflow: hidden;
-    border-bottom: 1px solid ${token.colorBorder};
+    border-block-end: 1px solid ${token.colorBorder};
   `,
   promptMask: css`
     pointer-events: none;
 
     position: absolute;
     z-index: 10;
-    bottom: 0;
-    left: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
 
     width: 100%;
     height: 32px;

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/TopicItem.tsx

@@ -35,7 +35,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     }
   `,
   split: css`
-    border-bottom: 1px solid ${token.colorSplit};
+    border-block-end: 1px solid ${token.colorSplit};
   `,
 }));
 

package/src/app/(main)/chat/(workspace)/_layout/Desktop/Portal.tsx

@@ -2,6 +2,7 @@
 
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
+import { rgba } from 'polished';
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -10,7 +11,7 @@ import { CHAT_DOCK_TOOL_UI_WIDTH, CHAT_DOCK_WIDTH, MAX_WIDTH } from '@/const/lay
 import { useChatStore } from '@/store/chat';
 import { chatPortalSelectors } from '@/store/chat/slices/portal/selectors';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   content: css`
     display: flex;
     flex-direction: column;
@@ -21,16 +22,15 @@ const useStyles = createStyles(({ css, token }) => ({
     background: ${token.colorBgLayout};
   `,
   header: css`
-    border-bottom: 1px solid ${token.colorBorder};
+    border-block-end: 1px solid ${token.colorBorder};
   `,
   panel: css`
     overflow: hidden;
 
     height: 100%;
-    margin: 12px;
+    margin: 4px;
 
-    background: ${token.colorBgContainer};
-    border: 1px solid ${token.colorPrimaryActive};
+    background: ${isDarkMode ? rgba(token.colorBgElevated, 0.8) : token.colorBgElevated};
     border-radius: 8px;
   `,
 }));
@@ -40,8 +40,8 @@ const PortalPanel = memo(({ children }: PropsWithChildren) => {
   const { md = true } = useResponsive();
 
   const [showInspector, showToolUI] = useChatStore((s) => [
-    chatPortalSelectors.showDock(s),
-    chatPortalSelectors.showToolUI(s),
+    chatPortalSelectors.showPortal(s),
+    chatPortalSelectors.showArtifactUI(s),
   ]);
 
   return (

package/src/app/(main)/chat/(workspace)/_layout/Desktop/TopicPanel.tsx

@@ -23,7 +23,7 @@ const useStyles = createStyles(({ css, token }) => ({
     background: ${token.colorBgLayout};
   `,
   header: css`
-    border-bottom: 1px solid ${token.colorBorder};
+    border-block-end: 1px solid ${token.colorBorder};
   `,
 }));
 
@@ -34,7 +34,7 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
     systemStatusSelectors.showChatSideBar(s),
     s.toggleChatSideBar,
   ]);
-  const showInspector = useChatStore(chatPortalSelectors.showDock);
+  const showPortal = useChatStore(chatPortalSelectors.showPortal);
 
   const [cacheExpand, setCacheExpand] = useState<boolean>(Boolean(showAgentSettings));
 
@@ -50,7 +50,7 @@ const TopicPanel = memo(({ children }: PropsWithChildren) => {
   }, [lg, cacheExpand]);
 
   return (
-    !showInspector && (
+    !showPortal && (
       <DraggablePanel
         className={styles.drawer}
         classNames={{

package/src/app/(main)/chat/(workspace)/_layout/Desktop/index.tsx

@@ -2,8 +2,8 @@ import { Flexbox } from 'react-layout-kit';
 
 import { LayoutProps } from '../type';
 import ChatHeader from './ChatHeader';
-import Inspector from './Portal';
 import HotKeys from './HotKeys';
+import Portal from './Portal';
 import TopicPanel from './TopicPanel';
 
 const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {
@@ -24,7 +24,7 @@ const Layout = ({ children, topic, conversation, portal }: LayoutProps) => {
           {conversation}
         </Flexbox>
         {children}
-        <Inspector>{portal}</Inspector>
+        <Portal>{portal}</Portal>
         <TopicPanel>{topic}</TopicPanel>
       </Flexbox>
       <HotKeys />

package/src/app/(main)/chat/(workspace)/features/ShareButton/style.ts

@@ -25,13 +25,13 @@ export const useStyles = createStyles(({ css, token, stylish, cx }, withBackgrou
   ),
   footer: css`
     padding: 16px;
-    border-top: 1px solid ${token.colorBorder};
+    border-block-start: 1px solid ${token.colorBorder};
   `,
   header: css`
-    margin-bottom: -24px;
+    margin-block-end: -24px;
     padding: 16px;
     background: ${token.colorBgContainer};
-    border-bottom: 1px solid ${token.colorBorder};
+    border-block-end: 1px solid ${token.colorBorder};
   `,
   preview: cx(
     stylish.noScrollbar,
@@ -56,10 +56,10 @@ export const useStyles = createStyles(({ css, token, stylish, cx }, withBackgrou
     `,
   ),
   role: css`
-    margin-top: 12px;
-    padding-top: 12px;
+    margin-block-start: 12px;
+    padding-block-start: 12px;
     opacity: 0.75;
-    border-top: 1px dashed ${token.colorBorderSecondary};
+    border-block-start: 1px dashed ${token.colorBorderSecondary};
 
     * {
       font-size: 12px !important;

package/src/app/(main)/chat/@session/_layout/Desktop/PanelBody.tsx

@@ -9,7 +9,9 @@ const useStyles = createStyles(
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: 8px 8px 0;
+
+    padding-block: 8px 0;
+    padding-inline: 8px;
   `,
 );
 

package/src/app/(main)/chat/@session/_layout/Desktop/SessionHeader.tsx

@@ -22,7 +22,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   top: css`
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
   `,
 }));
 

package/src/app/(main)/chat/@session/features/SessionListContent/ListItem/index.tsx

@@ -11,16 +11,13 @@ const useStyles = createStyles(({ css, token }) => {
   return {
     container: css`
       position: relative;
-
       margin-block: 2px;
-      padding-right: 16px;
-      padding-left: 8px;
-
+      padding-inline: 8px 16px;
       border-radius: ${token.borderRadius}px;
     `,
     mobile: css`
       margin-block: 0;
-      padding-left: 12px;
+      padding-inline-start: 12px;
       border-radius: 0;
     `,
     title: css`

package/src/app/(main)/chat/@session/features/SkeletonList.tsx

@@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 const useStyles = createStyles(({ css }) => ({
   paragraph: css`
     height: 12px !important;
-    margin-top: 12px !important;
+    margin-block-start: 12px !important;
 
     > li {
       height: 12px !important;
@@ -16,8 +16,7 @@ const useStyles = createStyles(({ css }) => ({
   `,
   title: css`
     height: 14px !important;
-    margin-top: 4px !important;
-    margin-bottom: 12px !important;
+    margin-block: 4px 12px !important;
 
     > li {
       height: 14px !important;

package/src/app/(main)/chat/features/Migration/Start.tsx

@@ -35,7 +35,7 @@ const useStyles = createStyles(({ css, token, isDarkMode, responsive }) => ({
   intro: css`
     ${responsive.mobile} {
       width: 350px;
-      margin-top: 24px;
+      margin-block-start: 24px;
       line-height: ${token.lineHeight};
     }
   `,

package/src/app/(main)/chat/settings/features/SubmitAgentButton/style.ts

@@ -10,8 +10,9 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
   `,
   container: css`
     position: relative;
-    padding: 16px 16px 24px;
-    border-bottom: 1px solid ${token.colorBorderSecondary};
+    padding-block: 16px 24px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${token.colorBorderSecondary};
   `,
   date: css`
     font-size: 12px;
@@ -28,7 +29,7 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
     }
   `,
   nav: css`
-    padding-top: 4px;
+    padding-block-start: 4px;
 
     .${prefixCls}-tabs-tab {
       margin: 4px !important;

package/src/app/(main)/market/@detail/features/TokenTag.tsx

@@ -5,7 +5,8 @@ import { useTokenCount } from '@/hooks/useTokenCount';
 
 const useStyles = createStyles(
   ({ css, token }) => css`
-    padding: 2px 5px;
+    padding-block: 2px;
+    padding-inline: 5px;
 
     font-size: 12px;
     line-height: 1;

package/src/app/(main)/market/@detail/features/style.ts

@@ -6,8 +6,9 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
   `,
   container: css`
     position: relative;
-    padding: 16px 16px 24px;
-    border-bottom: 1px solid ${token.colorBorderSecondary};
+    padding-block: 16px 24px;
+    padding-inline: 16px;
+    border-block-end: 1px solid ${token.colorBorderSecondary};
   `,
   desc: css`
     color: ${token.colorTextSecondary};
@@ -24,7 +25,7 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
     color: ${token.colorTextDescription};
   `,
   title: css`
-    margin-bottom: 0;
+    margin-block-end: 0;
     font-weight: bold;
     text-align: center;
   `,

package/src/app/(main)/market/_layout/Desktop/DetailSidebar.tsx

@@ -19,7 +19,7 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
     background: ${token.colorBgContainer};
   `,
   header: css`
-    border-bottom: 1px solid ${token.colorBorder};
+    border-block-end: 1px solid ${token.colorBorder};
   `,
   noScrollbar: stylish.noScrollbar,
 }));

package/src/app/(main)/market/_layout/Desktop/Hero.tsx

@@ -8,7 +8,8 @@ import { Center } from 'react-layout-kit';
 const useStyles = createStyles(({ css, responsive }) => ({
   background: css`
     width: 80%;
-    margin: -60px 0 -20px;
+    margin-block: -60px -20px;
+    margin-inline: 0;
 
     ${responsive.md} {
       display: none;
@@ -17,7 +18,7 @@ const useStyles = createStyles(({ css, responsive }) => ({
   title: css`
     z-index: 2;
 
-    margin-top: 24px;
+    margin-block-start: 24px;
 
     font-size: min(56px, 5vw);
     font-weight: 800;

package/src/app/(main)/market/features/AgentCard/AgentCardBanner.tsx

@@ -10,7 +10,7 @@ export const useStyles = createStyles(({ css, token }) => ({
     overflow: hidden;
 
     height: 64px;
-    margin-bottom: -56px;
+    margin-block-end: -56px;
 
     background: ${token.colorFillSecondary};
   `,

package/src/app/(main)/market/features/AgentCard/index.tsx

@@ -39,7 +39,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   `,
   desc: css`
     min-height: 44px;
-    margin-bottom: 0 !important;
+    margin-block-end: 0 !important;
     color: ${token.colorTextDescription};
   `,
   inner: css`
@@ -49,7 +49,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     color: ${token.colorTextDescription};
   `,
   title: css`
-    margin-bottom: 0 !important;
+    margin-block-end: 0 !important;
     font-size: 18px !important;
     font-weight: bold;
   `,

package/src/app/(main)/market/features/AgentList.tsx

@@ -20,7 +20,7 @@ const useStyles = createStyles(({ css, responsive }) => ({
     min-height: 332px;
   `,
   title: css`
-    margin-top: 0.5em;
+    margin-block-start: 0.5em;
     font-size: 24px;
     font-weight: 600;
     ${responsive.mobile} {

package/src/app/(main)/profile/[[...slugs]]/Client.tsx

@@ -28,11 +28,12 @@ export const useStyles = createStyles(
 
         width: 280px;
         max-width: unset;
-        margin-right: 0;
-        padding: 24px 12px 16px;
+        margin-inline-end: 0;
+        padding-block: 24px 16px;
+        padding-inline: 12px;
 
         background: ${token.colorBgContainer};
-        border-right: 1px solid ${token.colorSplit};
+        border-inline-end: 1px solid ${token.colorSplit};
       `,
       navbarMobileMenuRow: cx(
         mobile &&

package/src/app/(main)/settings/_layout/Desktop/SideBar.tsx

@@ -8,7 +8,8 @@ import BrandWatermark from '@/components/BrandWatermark';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
-    padding: 24px 12px 16px;
+    padding-block: 24px 16px;
+    padding-inline: 12px;
     background: ${token.colorBgContainer};
     border-inline-end: 1px solid ${token.colorBorder};
   `,
@@ -17,7 +18,8 @@ const useStyles = createStyles(({ token, css }) => ({
     color: ${token.colorTextDescription};
   `,
   header: css`
-    padding: 0 0.75rem;
+    padding-block: 0;
+    padding-inline: 0.75rem;
   `,
   logo: css`
     fill: ${token.colorText};

package/src/app/(main)/settings/about/features/ItemCard.tsx

@@ -9,7 +9,8 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   card: css`
     cursor: pointer;
 
-    padding: 12px 16px;
+    padding-block: 12px;
+    padding-inline: 16px;
 
     background: ${isDarkMode ? token.colorFillTertiary : token.colorBgContainer};
     border: 1px solid ${token.colorFillSecondary};

package/src/app/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx

@@ -18,8 +18,12 @@ import { GlobalLLMProviderKey } from '@/types/user/settings';
 const useStyles = createStyles(({ css, token }) => ({
   hover: css`
     cursor: pointer;
-    padding: 4px 8px;
+
+    padding-block: 4px;
+    padding-inline: 8px;
+
     border-radius: ${token.borderRadius}px;
+
     transition: all 0.2s ease-in-out;
 
     &:hover {

package/src/app/(main)/settings/llm/components/ProviderModelList/index.tsx

@@ -33,7 +33,7 @@ const styles = {
   reset: css`
     position: absolute;
     z-index: 20;
-    top: 50%;
+    inset-block-start: 50%;
     inset-inline-end: 28px;
     transform: translateY(-50%);
   `,

package/src/app/(main)/welcome/features/Hero.tsx

@@ -16,7 +16,7 @@ const useStyles = createStyles(({ css, token }) => {
       text-wrap: balance;
     `,
     title: css`
-      margin-bottom: 0;
+      margin-block-end: 0;
 
       font-size: min(56px, 7vw);
       font-weight: 800;

package/src/components/Menu/index.tsx

@@ -18,11 +18,11 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
       border-color: ${token.colorFillTertiary};
 
       &:first-child {
-        margin-top: 0;
+        margin-block-start: 0;
       }
 
       &:last-child {
-        margin-bottom: 0;
+        margin-block-end: 0;
       }
     }
 
@@ -33,7 +33,8 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
 
       height: unset;
       min-height: 2rem;
-      padding: 0.375rem 0.75rem;
+      padding-block: 0.375rem;
+      padding-inline: 0.75rem;
 
       line-height: 2;
 

package/src/components/Notification/index.tsx

@@ -11,13 +11,13 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   cancelIcon: css`
     position: absolute;
     z-index: 100;
-    top: 8px;
-    right: 8px;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
   `,
   container: css`
     position: absolute;
     z-index: 1100;
-    bottom: 16px;
+    inset-block-end: 16px;
     inset-inline-end: 20px;
 
     overflow: hidden;
@@ -28,7 +28,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     box-shadow: ${token.boxShadowSecondary};
   `,
   mobileContainer: css`
-    bottom: 8px;
+    inset-block-end: 8px;
     inset-inline-start: 8px;
   `,
   wrapper: css`