@gravity-ui/aikit 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/dist/components/pages/ChatContainer/ChatContainer.js +2 -1
- package/dist/components/pages/ChatContainer/__stories__/ChatContainer.stories.js +5 -1
- package/dist/components/pages/ChatContainer/types.d.ts +5 -1
- package/dist/components/pages/ChatContainer/useChatContainer.d.ts +1 -0
- package/dist/components/pages/ChatContainer/useChatContainer.js +9 -2
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -44,12 +44,13 @@ export function ChatContainer(props) {
|
|
|
44
44
|
return true;
|
|
45
45
|
}, [hideTitleOnEmptyChat, isChatEmpty, headerProps.showTitle]);
|
|
46
46
|
// Build props for Header
|
|
47
|
-
const finalHeaderProps = useMemo(() => (Object.assign(Object.assign({}, headerProps), { title: headerTitle, showTitle, baseActions: hookState.baseActions, handleNewChat: hookState.handleNewChat, handleHistoryToggle: hookState.handleHistoryToggle, handleClose: hookState.handleClose, historyButtonRef: hookState.historyButtonRef })), [
|
|
47
|
+
const finalHeaderProps = useMemo(() => (Object.assign(Object.assign({}, headerProps), { title: headerTitle, showTitle, baseActions: hookState.baseActions, handleNewChat: hookState.handleNewChat, handleHistoryToggle: hookState.handleHistoryToggle, handleFolding: hookState.handleFolding, handleClose: hookState.handleClose, historyButtonRef: hookState.historyButtonRef })), [
|
|
48
48
|
headerTitle,
|
|
49
49
|
showTitle,
|
|
50
50
|
hookState.baseActions,
|
|
51
51
|
hookState.handleNewChat,
|
|
52
52
|
hookState.handleHistoryToggle,
|
|
53
|
+
hookState.handleFolding,
|
|
53
54
|
hookState.handleClose,
|
|
54
55
|
hookState.historyButtonRef,
|
|
55
56
|
headerProps,
|
|
@@ -211,6 +211,7 @@ export const Playground = {
|
|
|
211
211
|
chats: mockChats,
|
|
212
212
|
showHistory: true,
|
|
213
213
|
showNewChat: true,
|
|
214
|
+
showFolding: false,
|
|
214
215
|
showClose: false,
|
|
215
216
|
welcomeConfig: {
|
|
216
217
|
title: 'Welcome to AI Chat',
|
|
@@ -225,6 +226,7 @@ export const Playground = {
|
|
|
225
226
|
const [messages, setMessages] = useState(addActionsToMessages(mockChatMessages[initialChat.id] || []));
|
|
226
227
|
const [status, setStatus] = useState(args.status || 'ready');
|
|
227
228
|
const [activeChat, setActiveChat] = useState(initialChat);
|
|
229
|
+
const [foldingState, setFoldingState] = useState('opened');
|
|
228
230
|
const handleSendMessage = async (data) => {
|
|
229
231
|
const userMessage = {
|
|
230
232
|
id: Date.now().toString(),
|
|
@@ -261,7 +263,9 @@ export const Playground = {
|
|
|
261
263
|
const handleCancel = async () => {
|
|
262
264
|
setStatus('ready');
|
|
263
265
|
};
|
|
264
|
-
return (_jsx(ChatContainer, Object.assign({}, args, {
|
|
266
|
+
return (_jsx(ChatContainer, Object.assign({}, args, { headerProps: {
|
|
267
|
+
foldingState,
|
|
268
|
+
}, messages: messages, activeChat: activeChat, onSendMessage: handleSendMessage, onCancel: handleCancel, onSelectChat: handleSelectChat, onCreateChat: handleCreateChat, onFold: setFoldingState, status: status })));
|
|
265
269
|
},
|
|
266
270
|
decorators: defaultDecorators,
|
|
267
271
|
};
|
|
@@ -111,6 +111,8 @@ export interface ChatContainerProps {
|
|
|
111
111
|
onDeleteChat?: (chat: ChatType) => void;
|
|
112
112
|
/** Callback when user deletes all chats */
|
|
113
113
|
onDeleteAllChats?: () => Promise<void>;
|
|
114
|
+
/** Callback when user folds or unfolds the chat */
|
|
115
|
+
onFold?: (value: 'collapsed' | 'opened') => void;
|
|
114
116
|
/** Callback when user closes the chat */
|
|
115
117
|
onClose?: () => void;
|
|
116
118
|
/** Callback when user cancels streaming */
|
|
@@ -132,7 +134,7 @@ export interface ChatContainerProps {
|
|
|
132
134
|
/** MessageList configuration for actions and loader behavior */
|
|
133
135
|
messageListConfig?: MessageListConfig;
|
|
134
136
|
/** Props override for Header component */
|
|
135
|
-
headerProps?: Partial<Omit<HeaderProps, 'handleNewChat' | 'handleHistoryToggle' | 'handleClose'>>;
|
|
137
|
+
headerProps?: Partial<Omit<HeaderProps, 'handleNewChat' | 'handleHistoryToggle' | 'handleFolding' | 'handleClose'>>;
|
|
136
138
|
/** Props override for ChatContent component */
|
|
137
139
|
contentProps?: Partial<Omit<ChatContentProps, 'view' | 'messageListProps'>>;
|
|
138
140
|
/** Props override for EmptyContainer (welcome screen) */
|
|
@@ -151,6 +153,8 @@ export interface ChatContainerProps {
|
|
|
151
153
|
showHistory?: boolean;
|
|
152
154
|
/** Show new chat button */
|
|
153
155
|
showNewChat?: boolean;
|
|
156
|
+
/** Show folding button */
|
|
157
|
+
showFolding?: boolean;
|
|
154
158
|
/** Show close button */
|
|
155
159
|
showClose?: boolean;
|
|
156
160
|
/** Hide header title when chat is empty */
|
|
@@ -13,6 +13,7 @@ export declare function useChatContainer(props: ChatContainerProps): {
|
|
|
13
13
|
historyButtonRef: import("react").RefObject<HTMLElement>;
|
|
14
14
|
handleNewChat: () => void;
|
|
15
15
|
handleHistoryToggle: () => void;
|
|
16
|
+
handleFolding: (value: "collapsed" | "opened") => void;
|
|
16
17
|
handleClose: () => void;
|
|
17
18
|
handleSelectChat: (chat: ChatContainerProps["activeChat"]) => void;
|
|
18
19
|
handleHistoryOpenChange: (open: boolean) => void;
|
|
@@ -7,7 +7,7 @@ import { HeaderAction } from '../../organisms/Header';
|
|
|
7
7
|
* @returns object with state and handlers
|
|
8
8
|
*/
|
|
9
9
|
export function useChatContainer(props) {
|
|
10
|
-
const { messages = [], activeChat, onCreateChat, onClose, onSelectChat, showHistory = true, showNewChat = true, showClose = false, } = props;
|
|
10
|
+
const { messages = [], activeChat, onCreateChat, onClose, onFold, onSelectChat, showHistory = true, showNewChat = true, showFolding = false, showClose = false, } = props;
|
|
11
11
|
// Refs for History integration with Header
|
|
12
12
|
const historyButtonRef = useRef(null);
|
|
13
13
|
const [isHistoryOpen, setIsHistoryOpen] = useState(false);
|
|
@@ -29,6 +29,9 @@ export function useChatContainer(props) {
|
|
|
29
29
|
const handleHistoryToggle = useCallback(() => {
|
|
30
30
|
setIsHistoryOpen((prev) => !prev);
|
|
31
31
|
}, []);
|
|
32
|
+
const handleFolding = useCallback((value) => {
|
|
33
|
+
onFold === null || onFold === void 0 ? void 0 : onFold(value);
|
|
34
|
+
}, [onFold]);
|
|
32
35
|
// Handler for closing
|
|
33
36
|
const handleClose = useCallback(() => {
|
|
34
37
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
@@ -53,11 +56,14 @@ export function useChatContainer(props) {
|
|
|
53
56
|
if (showHistory) {
|
|
54
57
|
actions.push(HeaderAction.History);
|
|
55
58
|
}
|
|
59
|
+
if (showFolding) {
|
|
60
|
+
actions.push(HeaderAction.Folding);
|
|
61
|
+
}
|
|
56
62
|
if (showClose) {
|
|
57
63
|
actions.push(HeaderAction.Close);
|
|
58
64
|
}
|
|
59
65
|
return actions;
|
|
60
|
-
}, [showNewChat, showHistory, showClose, chatContentView]);
|
|
66
|
+
}, [showNewChat, showHistory, showFolding, showClose, chatContentView]);
|
|
61
67
|
return {
|
|
62
68
|
// State
|
|
63
69
|
chatContentView,
|
|
@@ -68,6 +74,7 @@ export function useChatContainer(props) {
|
|
|
68
74
|
// Handlers
|
|
69
75
|
handleNewChat,
|
|
70
76
|
handleHistoryToggle,
|
|
77
|
+
handleFolding,
|
|
71
78
|
handleClose,
|
|
72
79
|
handleSelectChat,
|
|
73
80
|
handleHistoryOpenChange,
|