listpage-next 0.0.99 → 0.0.101

package/dist/features/ChatClient/components/Bubble/index.d.ts

@@ -0,0 +1,2 @@
+import { BubbleProps } from './types';
+export declare const Bubble: (props: BubbleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/Bubble/index.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useHover } from "ahooks";
+import styled_components from "styled-components";
+const Bubble = (props)=>{
+    const { children, feedback, role = "user", placement = 'user' === role ? 'end' : 'start', showFeedback = (hovered)=>hovered } = props;
+    const ref = useRef(null);
+    const hovered = useHover(ref);
+    const content = "user" === role ? /*#__PURE__*/ jsx(UserContentWrapper, {
+        children: children
+    }) : /*#__PURE__*/ jsx(AssistantContentWrapper, {
+        children: children
+    });
+    return /*#__PURE__*/ jsxs(BubbleContainer, {
+        placement: placement,
+        ref: ref,
+        children: [
+            content,
+            /*#__PURE__*/ jsx(ToolContainer, {
+                children: showFeedback(hovered) && feedback
+            })
+        ]
+    });
+};
+const BubbleContainer = styled_components.div`
+    display: flex;
+    flex-direction: column;
+    align-items: ${(props)=>"start" === props.placement ? "flex-start" : "flex-end"};
+    margin-top: 16px;
+`;
+const UserContentWrapper = styled_components.div`
+    color: #000000d9;
+    padding: 9px 16px;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;    
+    min-width: 0px;
+    font-family: sans-serif;
+
+    width: fit-content;
+    background-color: #0000000a;
+    border-radius: 12px;
+    max-width: 450px;
+`;
+const AssistantContentWrapper = styled_components.div`
+    color: #000000d9;
+    padding: 9px 16px;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    min-width: 0px;
+    font-family: sans-serif;
+`;
+const ToolContainer = styled_components.div`
+  height: 40px;
+`;
+export { Bubble };

package/dist/features/ChatClient/components/Bubble/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export type BubbleProps = {
+    children?: ReactNode;
+    feedback?: ReactNode;
+    placement?: "start" | "end";
+    role?: "user" | "assistant";
+    showFeedback?: (hovered: boolean) => boolean;
+};

package/dist/features/ChatClient/components/ChatGuidance/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { PureChatSender } from "../ChatSender/index.js";
 import { ChatGuidanceContainer, ChatGuidanceContent, GreetingText, SenderContainer } from "./styles.js";
-import { Header } from "../ClientContent/Header.js";
+import { Header } from "../ChatContent/Header.js";
 const ChatGuidance = (props)=>{
     const { greetingText, extra, style, placeholder, offset, onSubmit } = props;
     return /*#__PURE__*/ jsxs(ChatGuidanceContainer, {

package/dist/features/ChatClient/components/Reasoning/index.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export declare const Reasoning: ({ thinking, children }: {
+    thinking?: boolean;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/components/Reasoning/index.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowsAltOutlined, ShrinkOutlined } from "@ant-design/icons";
+import { useUpdateEffect } from "ahooks";
+import { useState } from "react";
+import { styled } from "styled-components";
+const Reasoning = ({ thinking, children })=>{
+    const [collapsed, setCollapsed] = useState(false);
+    useUpdateEffect(()=>{
+        if (!thinking) setCollapsed(true);
+    }, [
+        thinking
+    ]);
+    return /*#__PURE__*/ jsxs(ReasoningContainer, {
+        style: {
+            padding: collapsed ? '6px 12px' : '0px 12px 13px 12px',
+            backgroundColor: collapsed ? void 0 : '#fff'
+        },
+        children: [
+            /*#__PURE__*/ jsxs(ReasoningHeader, {
+                onClick: ()=>setCollapsed(!collapsed),
+                style: {
+                    padding: collapsed ? '0' : '7px 0px',
+                    height: collapsed ? 42 : 56
+                },
+                children: [
+                    /*#__PURE__*/ jsx(ReasoningTitle, {
+                        children: thinking ? /*#__PURE__*/ jsx(ReasoningTitleAnimation, {
+                            children: "深度思考中"
+                        }) : '已完成思考'
+                    }),
+                    /*#__PURE__*/ jsx(ReasoningIcon, {
+                        children: collapsed ? /*#__PURE__*/ jsx(ArrowsAltOutlined, {}) : /*#__PURE__*/ jsx(ShrinkOutlined, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ReasoningContent, {
+                style: {
+                    height: collapsed ? 0 : 'auto'
+                },
+                children: children
+            })
+        ]
+    });
+};
+const ReasoningContainer = styled.div`
+  background-color: #fff;
+  cursor: pointer;
+  border: 1px solid #ebebeb;
+  border-radius: 12px;
+  margin-bottom: 20px;
+  transition: height 0.3s ease-in-out;
+  &:hover {
+    background-color: #0000000a;
+  }
+`;
+const ReasoningHeader = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+const ReasoningContent = styled.div`
+    color: #00000080 !important;
+    overflow: hidden;
+`;
+const ReasoningTitle = styled.div`
+    color: #000c;
+    font-size: 14px;
+    font-weight: 500;
+`;
+const ReasoningIcon = styled.div`
+    align-items: center;
+    border: 1px solid #00000014;
+    border-radius: 8px;
+    display: flex;
+    height: 28px;
+    justify-content: center;
+    padding: 5px 8px;
+    width: 28px;
+
+    &:hover {
+    background-color: #0000000a;
+    }
+`;
+const ReasoningTitleAnimation = styled.span`
+    /* 文字流光动画 */
+    @keyframes textShine {
+        to {
+            background-position: 200% center;
+        }
+    }
+
+    background: linear-gradient(
+        90deg,
+    #3b82f6,
+    #93c5fd,
+    #3b82f6,
+    #93c5fd,
+    #3b82f6
+    );
+    background-size: 200% auto;
+    color: #000;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: textShine 3s linear infinite;
+`;
+export { Reasoning };

package/dist/features/ChatClient/context/client.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { InfiniteListProps, InfiniteListRef, RenderActions } from "../../../components/InfiniteList";
-import { BaseMessageInfo, Message, SendMessageRequest } from "./message";
+import { BaseMessageInfo, Message, SendMessageRequest } from "./types";
 import { BubbleListRef } from "./useBubbleListRef";
 export type ChatRequest<SessionData = any, MessageInfo extends BaseMessageInfo = any> = {
     getConversations: InfiniteListProps<SessionData>['request'];

package/dist/features/ChatClient/context/index.d.ts

@@ -1,2 +1,3 @@
 export * from './client';
 export * from './message';
+export * from './types';

package/dist/features/ChatClient/context/index.js

@@ -1,2 +1,3 @@
 export * from "./client.js";
 export * from "./message.js";
+export * from "./types.js";

package/dist/features/ChatClient/context/message.d.ts

@@ -1,28 +1,10 @@
 import { ReactNode } from 'react';
-export type MessageStatus = 'loading' | 'success' | 'failed';
-export type BaseMessageInfo = {
-    id: string;
-    role: string;
-    content: string;
-    reasoning?: string;
-    [key: string]: any;
-};
-export type Message<MessageInfo extends BaseMessageInfo = any> = {
-    id: string;
-    status: MessageStatus;
-    info: MessageInfo;
-};
+import { BaseMessageInfo, Message, SendMessageRequest } from './types';
 export type MessageContextValue<MessageInfo extends BaseMessageInfo = any> = {
     messages: Message<MessageInfo>[];
     sendMessage: (info: MessageInfo, callback?: (info: MessageInfo) => void) => void;
     isRequesting: boolean;
 };
-export type SendMessageRequest<MessageInfo extends BaseMessageInfo = any> = (info: MessageInfo, callbacks: {
-    onCreated: (info: MessageInfo) => void;
-    onUpdate: (id: string, info: MessageInfo) => void;
-    onSuccess: (id: string, info: MessageInfo) => void;
-    onError: (id: string, info: MessageInfo) => void;
-}) => Promise<void>;
 export declare const MessageContext: import("react").Context<MessageContextValue<any>>;
 export declare const MessageProvider: <MessageInfo extends BaseMessageInfo = any>({ initialMessages, children, request, }: {
     children: ReactNode;

package/dist/features/ChatClient/context/message.js

@@ -19,7 +19,7 @@ const MessageProvider = ({ initialMessages, children, request })=>{
     const createAssistantMessage = useCallback(()=>{
         const message = {
             id: 'placeholder',
-            status: 'loading',
+            status: 'pending',
             info: {
                 id: 'placeholder',
                 role: 'assistant',
@@ -31,7 +31,7 @@ const MessageProvider = ({ initialMessages, children, request })=>{
     const createUserMessage = useCallback((info)=>{
         const message = {
             id: 'placeholder',
-            status: 'loading',
+            status: 'pending',
             info: {
                 ...info,
                 id: 'placeholder'
@@ -62,7 +62,7 @@ const MessageProvider = ({ initialMessages, children, request })=>{
         const index = messagesRef.current.findIndex((msg)=>msg.id === id);
         if (-1 !== index) {
             const message = messagesRef.current[index];
-            message.status = 'loading';
+            message.status = 'pending';
             message.info = info;
             message.id = info.id;
         }

package/dist/features/ChatClient/context/types.d.ts

@@ -0,0 +1,19 @@
+export type MessageStatus = 'pending' | 'success' | 'failed';
+export type BaseMessageInfo = {
+    id: string;
+    role: string;
+    content: string;
+    reasoning?: string;
+    [key: string]: any;
+};
+export type Message<MessageInfo extends BaseMessageInfo = any> = {
+    id: string;
+    status: MessageStatus;
+    info: MessageInfo;
+};
+export type SendMessageRequest<MessageInfo extends BaseMessageInfo = any> = (info: MessageInfo, callbacks: {
+    onCreated: (info: MessageInfo) => void;
+    onUpdate: (id: string, info: MessageInfo) => void;
+    onSuccess: (id: string, info: MessageInfo) => void;
+    onError: (id: string, info: MessageInfo) => void;
+}) => Promise<void>;

package/dist/features/ChatClient/context/useChatContext.d.ts

@@ -1,5 +1,5 @@
 export declare function useChatContext(): {
-    messages: import("./message").Message<any>[];
+    messages: import("./types").Message<any>[];
     sendMessage: (info: any, callback?: ((info: any) => void) | undefined) => void;
     deleteConversation: ((key: string) => void) | undefined;
     updateConversation: ((key: string, item: any) => void) | undefined;

package/dist/features/ChatClient/index.d.ts

@@ -1,4 +1,7 @@
-export * from './components/Layout';
+export * from './components/ChatPage';
 export * from './components/ChatGuidance';
-export * from './components/ClientContent';
+export * from './components/ChatContent';
+export * from './components/Bubble';
+export * from './components/Reasoning';
 export { useChatContext } from './context/useChatContext';
+export * from './context/types';

package/dist/features/ChatClient/index.js

@@ -1,5 +1,8 @@
 import { useChatContext } from "./context/useChatContext.js";
-export * from "./components/Layout/index.js";
+export * from "./components/ChatPage/index.js";
 export * from "./components/ChatGuidance/index.js";
-export * from "./components/ClientContent/index.js";
+export * from "./components/ChatContent/index.js";
+export * from "./components/Bubble/index.js";
+export * from "./components/Reasoning/index.js";
+export * from "./context/types.js";
 export { useChatContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.99",
+  "version": "0.0.101",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",