✨ feat: add ProChat

Author: arvinxx

src/ProChat/components/ChatList/Actions/Assistant.tsx

@@ -0,0 +1,31 @@
+import ActionIconGroup from '@/ActionIconGroup';
+import { RenderAction } from '@/ChatList';
+import { useChatListActionsBar } from '@/hooks/useChatListActionsBar';
+import { memo } from 'react';
+
+import { ErrorActionsBar } from './Error';
+
+export const AssistantActionsBar: RenderAction = memo(({ text, id, onActionClick, error }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+
+  if (id === 'default') return;
+
+  if (error) return <ErrorActionsBar onActionClick={onActionClick} text={text} />;
+
+  return (
+    <ActionIconGroup
+      dropdownMenu={[
+        edit,
+        copy,
+        regenerate,
+        divider,
+        // TODO: need a translate
+        divider,
+        del,
+      ]}
+      items={[regenerate, copy]}
+      onActionClick={onActionClick}
+      type="ghost"
+    />
+  );
+});

src/ProChat/components/ChatList/Actions/Error.tsx

@@ -0,0 +1,10 @@
+import ActionIconGroup from '@/ActionIconGroup';
+import { ActionsBarProps } from '@/ChatList/ActionsBar';
+import { useChatListActionsBar } from '@/hooks/useChatListActionsBar';
+import { memo } from 'react';
+
+export const ErrorActionsBar = memo<ActionsBarProps>(({ text, onActionClick }) => {
+  const { regenerate, del } = useChatListActionsBar(text);
+
+  return <ActionIconGroup items={[regenerate, del]} onActionClick={onActionClick} type="ghost" />;
+});

src/ProChat/components/ChatList/Actions/Fallback.tsx

@@ -0,0 +1,10 @@
+import { useChatListActionsBar } from '@/hooks/useChatListActionsBar';
+import { ActionIconGroup, RenderAction } from '@lobehub/ui';
+import { memo } from 'react';
+
+export const DefaultActionsBar: RenderAction = memo(({ text, onActionClick }) => {
+  const { del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup dropdownMenu={[del]} items={[]} onActionClick={onActionClick} type="ghost" />
+  );
+});

src/ProChat/components/ChatList/Actions/Function.tsx

@@ -0,0 +1,15 @@
+import { useChatListActionsBar } from '@/hooks/useChatListActionsBar';
+import { ActionIconGroup, RenderAction } from '@lobehub/ui';
+import { memo } from 'react';
+
+export const FunctionActionsBar: RenderAction = memo(({ text, onActionClick }) => {
+  const { regenerate, divider, del } = useChatListActionsBar(text);
+  return (
+    <ActionIconGroup
+      dropdownMenu={[regenerate, divider, del]}
+      items={[regenerate]}
+      onActionClick={onActionClick}
+      type="ghost"
+    />
+  );
+});

src/ProChat/components/ChatList/Actions/User.tsx

@@ -0,0 +1,24 @@
+import { useChatListActionsBar } from '@/hooks/useChatListActionsBar';
+import { ActionIconGroup, RenderAction } from '@lobehub/ui';
+import { memo } from 'react';
+
+export const UserActionsBar: RenderAction = memo(({ text, onActionClick }) => {
+  const { regenerate, edit, copy, divider, del } = useChatListActionsBar(text);
+
+  return (
+    <ActionIconGroup
+      dropdownMenu={[
+        edit,
+        copy,
+        regenerate,
+        divider,
+        // TODO: need a translate
+        divider,
+        del,
+      ]}
+      items={[regenerate, edit]}
+      onActionClick={onActionClick}
+      type="ghost"
+    />
+  );
+});

src/ProChat/components/ChatList/Actions/index.ts

@@ -0,0 +1,13 @@
+import { ChatListProps } from '@lobehub/ui';
+
+import { AssistantActionsBar } from './Assistant';
+import { DefaultActionsBar } from './Fallback';
+import { FunctionActionsBar } from './Function';
+import { UserActionsBar } from './User';
+
+export const renderActions: ChatListProps['renderActions'] = {
+  assistant: AssistantActionsBar,
+  function: FunctionActionsBar,
+  system: DefaultActionsBar,
+  user: UserActionsBar,
+};

src/ProChat/components/ChatList/Extras/Assistant.tsx

@@ -0,0 +1,30 @@
+import Tag from '@/components/Tag';
+import { RenderMessageExtra } from '@/index';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/ProChat/store';
+import { agentSelectors } from '@/ProChat/store/selectors';
+
+export const AssistantMessageExtra: RenderMessageExtra = memo(({ extra }) => {
+  const model = useChatStore(agentSelectors.currentAgentModel);
+
+  const showModelTag = extra?.fromModel && model !== extra?.fromModel;
+  const hasTranslate = !!extra?.translate;
+
+  const showExtra = showModelTag || hasTranslate;
+
+  if (!showExtra) return;
+
+  return (
+    <Flexbox gap={8} style={{ marginTop: 8 }}>
+      {showModelTag && (
+        <div>
+          {/*TODO: need a model icons */}
+          <Tag>{extra?.fromModel as string}</Tag>
+        </div>
+      )}
+    </Flexbox>
+  );
+});

src/ProChat/components/ChatList/Extras/User.tsx

@@ -0,0 +1,18 @@
+import { RenderMessageExtra } from '@/index';
+import { Divider } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+export const UserMessageExtra: RenderMessageExtra = memo(({ extra }) => {
+  const hasTranslate = !!extra?.translate;
+
+  return (
+    <Flexbox gap={8} style={{ marginTop: hasTranslate ? 8 : 0 }}>
+      {extra?.translate && (
+        <div>
+          <Divider style={{ margin: '12px 0' }} />
+        </div>
+      )}
+    </Flexbox>
+  );
+});

src/ProChat/components/ChatList/Extras/index.ts

@@ -0,0 +1,9 @@
+import { ChatListProps } from '@lobehub/ui';
+
+import { AssistantMessageExtra } from './Assistant';
+import { UserMessageExtra } from './User';
+
+export const renderMessagesExtra: ChatListProps['renderMessagesExtra'] = {
+  assistant: AssistantMessageExtra,
+  user: UserMessageExtra,
+};

src/ProChat/components/ChatList/Loading.tsx

@@ -0,0 +1,53 @@
+import { useTheme } from 'antd-style';
+
+const Svg = () => (
+  <svg viewBox="0 0 32 24" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="0" cy="12" r="0" transform="translate(8 0)">
+      <animate
+        attributeName="r"
+        begin="0"
+        calcMode="spline"
+        dur="1.2s"
+        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
+        keyTimes="0;0.2;0.7;1"
+        repeatCount="indefinite"
+        values="0; 4; 0; 0"
+      />
+    </circle>
+    <circle cx="0" cy="12" r="0" transform="translate(16 0)">
+      <animate
+        attributeName="r"
+        begin="0.3"
+        calcMode="spline"
+        dur="1.2s"
+        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
+        keyTimes="0;0.2;0.7;1"
+        repeatCount="indefinite"
+        values="0; 4; 0; 0"
+      />
+    </circle>
+    <circle cx="0" cy="12" r="0" transform="translate(24 0)">
+      <animate
+        attributeName="r"
+        begin="0.6"
+        calcMode="spline"
+        dur="1.2s"
+        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
+        keyTimes="0;0.2;0.7;1"
+        repeatCount="indefinite"
+        values="0; 4; 0; 0"
+      />
+    </circle>
+  </svg>
+);
+
+const BubblesLoading = () => {
+  const { colorTextTertiary } = useTheme();
+  return (
+    <div style={{ fill: colorTextTertiary, height: 24, width: 32 }}>
+      <Svg />
+    </div>
+  );
+};
+
+export default BubblesLoading;