@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Bubble/loading.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface LoadingProps {
+  prefixCls?: string;
+}
+
+const Loading: React.FC<Readonly<LoadingProps>> = ({ prefixCls }) => (
+  <span className={`${prefixCls}-dot`}>
+    <i className={`${prefixCls}-dot-item`} key={`item-${1}`} />
+    <i className={`${prefixCls}-dot-item`} key={`item-${2}`} />
+    <i className={`${prefixCls}-dot-item`} key={`item-${3}`} />
+  </span>
+);
+
+export default Loading;

package/components/Bubble/style/avatar.ts

@@ -0,0 +1,43 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-bubble-avatar {
+  display: inline-flex;
+  justify-content: center;
+  align-self: flex-start;
+
+  &-loading .${(p) => p.theme.prefixCls}-avatar::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 200%;
+    background-image: url('data:image/png;base64,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');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    transform: rotate(-45deg);
+    filter: blur(2px);
+    animation: light_sweeping 1.5s infinite linear;
+  }
+}
+
+@keyframes light_sweeping {
+  0% {
+    transform: translate(-40%, -80%);
+    opacity: 0.2;
+  }
+
+  45% {
+    transform: translate(20%, 20%);
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: translate(40%, 80%);
+    opacity: 0.2;
+  }
+}
+
+`;

package/components/Bubble/style/footer.ts

@@ -0,0 +1,45 @@
+import { createGlobalStyle } from 'antd-style';
+
+const Style = createGlobalStyle`
+.${(p) => p.theme.prefixCls}-bubble-footer {
+  width: 100%;
+  margin-top: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.${(p) => p.theme.prefixCls}-bubble-footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &-item {
+    cursor: pointer;
+    color: ${(p) => p.theme.colorText}
+  }
+}
+
+.${(p) => p.theme.prefixCls}-bubble-footer-count {
+  display: flex;
+  align-items: center;
+
+  &-item {
+    color: ${(p) => p.theme.colorTextTertiary};
+    line-height: 1;
+    padding-right: 13px;
+    margin-left: 13px;
+    border-right: 1px solid ${(p) => p.theme.colorBorder};
+    white-space: nowrap;
+
+    &:last-of-type {
+      padding-right: 0;
+      border-right: 0;
+    }
+  }
+}
+`;
+
+export default Style;

package/components/Bubble/style/index.ts

@@ -0,0 +1,192 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-bubble {
+  display: flex;
+
+  &-end,
+  &-user {
+    justify-content: flex-end;
+
+    .${(p) => p.theme.prefixCls}-bubble-content-wrapper {
+      align-items: flex-end;
+    }
+  }
+
+  &-content-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  &-content-wrapper-card {
+  }
+
+  &-content {
+    position: relative;
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+    color: ${(p) => p.theme.colorText};
+    font-size: ${(p) => p.theme.fontSize}px;
+    line-height: ${(p) => p.theme.lineHeight};
+    word-break: break-word;
+  }
+}
+
+.${(p) => p.theme.prefixCls}-bubble {
+  &-content {
+    &-filled {
+      padding: 12px 16px;
+      border-radius: ${(p) => p.theme.borderRadiusLG}px;
+      background-color: ${(p) => p.theme.colorPrimaryBg};
+    }
+  }
+}
+
+
+
+.${(p) => p.theme.prefixCls}-bubble-loading {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  filter: invert(1) brightness(100%) saturate(0%);
+
+  &-text {
+    opacity: 0;
+  }
+
+  &-dot1 {
+    width: 4px;
+    height: 4px;
+    border-radius: 999px;
+    background: linear-gradient(
+        ${(p) => p.theme.colorText},
+        ${(p) => p.theme.colorText}
+      ),
+      linear-gradient(
+        ${(p) => p.theme.colorBgBase},
+        ${(p) => p.theme.colorBgBase}
+      );
+    background-blend-mode: multiply;
+    animation: dot_01 2.5s infinite ease;
+  }
+  &-dot2 {
+    width: 4px;
+    height: 4px;
+    border-radius: 999px;
+    background: linear-gradient(
+        ${(p) => p.theme.colorTextTertiary},
+        ${(p) => p.theme.colorTextTertiary}
+      ),
+      linear-gradient(
+        ${(p) => p.theme.colorBgBase},
+        ${(p) => p.theme.colorBgBase}
+      );
+    background-blend-mode: multiply;
+    animation: dot_02 2.5s infinite ease;
+  }
+  &-dot3 {
+    width: 4px;
+    height: 4px;
+    border-radius: 999px;
+    background: linear-gradient(
+        ${(p) => p.theme.colorTextSecondary},
+        ${(p) => p.theme.colorTextSecondary}
+      ),
+      linear-gradient(
+        ${(p) => p.theme.colorBgBase},
+        ${(p) => p.theme.colorBgBase}
+      );
+    background-blend-mode: multiply;
+    animation: dot_03 2.5s infinite ease;
+  }
+}
+
+@keyframes dot_01 {
+  0% {
+    transform: translateX(0px) scale(1);
+    z-index: 3;
+  }
+
+  30.3% {
+    transform: translateX(15px) scale(1);
+    z-index: 3;
+  }
+  33.3% {
+    transform: translateX(15px) scale(1);
+    z-index: 1;
+  }
+  63.6% {
+    transform: translateX(7.5px) scale(0.75);
+    z-index: 1;
+  }
+  66.6% {
+    transform: translateX(7.5px) scale(0.75);
+    z-index: 2;
+  }
+  97% {
+    transform: translateX(0px) scale(1);
+    z-index: 2;
+  }
+}
+
+@keyframes dot_02 {
+  0% {
+    transform: translateX(0px) scale(1);
+    z-index: 2;
+  }
+  23.3% {
+    transform: translateX(-7.5px) scale(1.33333);
+    z-index: 2;
+  }
+
+  30.3% {
+    transform: translateX(-7.5px) scale(1.33333);
+    z-index: 3;
+  }
+  56.6% {
+    transform: translateX(7.5px) scale(1.33333);
+    z-index: 3;
+  }
+  63.6% {
+    transform: translateX(7.5px) scale(1.33333);
+    z-index: 1;
+  }
+  97% {
+    transform: translateX(0px) scale(1);
+    z-index: 1;
+  }
+}
+
+@keyframes dot_03 {
+  0% {
+    transform: translateX(0px) scale(1);
+    z-index: 1;
+  }
+  23.3% {
+    transform: translateX(-7.5px) scale(0.75);
+    z-index: 1;
+  }
+
+  30.3% {
+    transform: translateX(-7.5px) scale(0.75);
+    z-index: 2;
+  }
+  56.6% {
+    transform: translateX(-15px) scale(1);
+    z-index: 2;
+  }
+  63.6% {
+    transform: translateX(-15px) scale(1);
+    z-index: 3;
+  }
+  97% {
+    transform: translateX(0px) scale(1);
+    z-index: 3;
+  }
+}
+`;

package/components/Bubble/style/list.ts

@@ -0,0 +1,51 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-bubble-list-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.${(p) => p.theme.prefixCls}-bubble-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px 16px 0 16px;
+
+  &::after {
+    display: block;
+    content: ' ';
+    height: 16px;
+  }
+}
+
+.${(p) => p.theme.prefixCls}-bubble-list-scroll-to-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 10px;
+  display: flex;
+  justify-content: center;
+  transition: all 0.2s;
+  z-index: 10;
+
+  &-hide {
+    opacity: 0;
+    transform: translateY(100%);
+    pointer-events: none;
+  }
+
+  &-show {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+
+  button {
+    &:hover {
+      border-color: ${(p) => p.theme.colorPrimaryBorder} !important;
+      background-color: ${(p) => p.theme.colorPrimaryBg} !important;
+      color: ${(p) => p.theme.colorPrimary} !important;
+    }
+  }
+}
+`;

package/components/ChatAnywhere/Chat/Ref.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useMessages } from '../hooks/useMessages';
+import { useInput } from '../hooks/useInput';
+import { useSessionList } from '../hooks/useSessionList';
+
+export default React.forwardRef(function Ref(_, ref) {
+
+  const messageContext = useMessages();
+  const inputContext = useInput();
+  const sessionContext = useSessionList();
+
+
+  React.useImperativeHandle(ref, () => ({
+    ...messageContext,
+    ...inputContext,
+    ...sessionContext,
+  }));
+
+  return null;
+})

package/components/ChatAnywhere/Chat/index.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef, useState } from 'react';
+import Bubble from '../../Bubble';
+import Input from '../Input';
+import { useProviderContext } from '@agentscope-ai/chat';
+import cls from 'classnames';
+import { useTimeout } from 'ahooks';
+import { Disclaimer } from '@agentscope-ai/chat';
+import { useChatAnywhere } from '../hooks/ChatAnywhereProvider';
+import Style from './style';
+
+export default forwardRef(function (_, ref) {
+  const messages = useChatAnywhere(v => v.messages);
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('chat-anywhere');
+  const uiConfig = useChatAnywhere(v => v.uiConfig);
+  const [ready, setReady] = useState(false);
+
+  useTimeout(() => {
+    setReady(true);
+  }, 300);
+
+
+  const chatClassName = cls(
+    `${prefixCls}-chat`,
+    {
+      [`${prefixCls}-chat-hide`]: !ready,
+    }
+  );
+
+  const emptyMessage = !messages?.length;
+
+  return <>
+    <Style />
+    <div className={chatClassName}>
+      <Bubble.List
+        style={{ height: 0, flex: emptyMessage ? 0 : 1 }}
+        // @ts-ignore
+        ref={ref.chatRef}
+        items={messages}
+      />
+      {
+        emptyMessage ? <div className={`${chatClassName}-welcome`}>{uiConfig?.welcome}</div> : null
+      }
+      <div
+        className={`${chatClassName}-sender`}
+        style={uiConfig?.disclaimer ? { marginBottom: 16 } : {}}
+      >
+        {/* @ts-ignore */}
+        <Input ref={ref.inputRef}/>
+      </div>
+      {
+        uiConfig?.disclaimer && <Disclaimer style={{ position: 'absolute', bottom: 0, width: '100%' }} desc={uiConfig?.disclaimer} />
+      }
+    </div>
+  </>
+})

package/components/ChatAnywhere/Chat/style.ts

@@ -0,0 +1,59 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-chat-anywhere-chat {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s;
+  opacity: 1;
+
+  .${(p) => p.theme.prefixCls}-bubble-list {
+    position: relative;
+    margin: 0 auto;
+    max-width: 850px;
+    min-width: 300px;
+  }
+
+  .${(p) => p.theme.prefixCls}-chat-anywhere-sender-wrapper {
+    max-width: 850px;
+    min-width: 300px;
+    padding: 0 16px 16px 16px;
+    margin: 0 auto;
+  }
+
+  &-hide {
+    opacity: 0;
+  }
+
+  &-welcome {
+    max-width: 850px;
+    min-width: 300px;
+    width: -webkit-fill-available;
+    padding: 16px;
+    margin: 0 auto;
+    height: 100%;
+    display: flex;
+    align-items: safe center;
+    justify-content: safe center;
+    overflow: auto;
+  }
+}
+
+
+
+
+@media screen and (max-width: 768px) {
+  button {
+    cursor: default !important;
+  }
+
+  .${(p) => p.theme.prefixCls}-conversations .${(p) => p.theme.prefixCls}-conversations-item {
+    cursor: default !important;
+
+  }
+}
+
+
+`;

package/components/ChatAnywhere/Header/index.tsx

@@ -0,0 +1,37 @@
+import React, { useContext, useState } from "react";
+import { useProviderContext } from "@agentscope-ai/chat";
+import { isMobileHook } from "../Layout";
+import { useChatAnywhere } from "../hooks/ChatAnywhereProvider";
+import { useSessionList } from "../hooks/useSessionList";
+import Style from './style';
+import { IconButton } from "@agentscope-ai/design";
+import { SparkOperateLeftLine, SparkOperateRightLine } from "@agentscope-ai/icons";
+
+export default function () {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('chat-anywhere-header');
+  const uiConfig = useChatAnywhere(v => v.uiConfig)
+  const {
+    sessionListShow,
+    setSessionListShow
+  } = useSessionList();
+  const isMobile = isMobileHook();
+
+  return <>
+    <Style />
+    <div className={prefixCls}>
+      {
+        isMobile && <IconButton
+          style={{ marginLeft: 12 }}
+          bordered={false}
+          onClick={() => setSessionListShow(!sessionListShow)}
+          icon={
+            sessionListShow ? <SparkOperateLeftLine /> : <SparkOperateRightLine />
+          }>
+        </IconButton>
+      }
+
+      {uiConfig.header}
+    </div>
+  </>
+}

package/components/ChatAnywhere/Header/style.ts

@@ -0,0 +1,27 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-chat-anywhere-header {
+  height: 64px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  backdrop-filter: blur(100px);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-header
+  ~ .${(p) => p.theme.prefixCls}-chat-anywhere-chat
+  .${(p) => p.theme.prefixCls}-bubble-list {
+  &::before {
+    content: ' ';
+    display: block;
+    height: 24px;
+    flex: 0 0 24px;
+  }
+}
+
+`;