@stack-spot/ai-chat-widget 1.9.0 → 1.10.1
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/CHANGELOG.md +14 -0
- package/dist/StackspotAIWidget.d.ts.map +1 -1
- package/dist/StackspotAIWidget.js +2 -1
- package/dist/StackspotAIWidget.js.map +1 -1
- package/dist/app-metadata.json +11 -3
- package/dist/chat-interceptors/send-message.d.ts.map +1 -1
- package/dist/chat-interceptors/send-message.js +3 -1
- package/dist/chat-interceptors/send-message.js.map +1 -1
- package/dist/components/AnimatedOpacity.d.ts +8 -0
- package/dist/components/AnimatedOpacity.d.ts.map +1 -0
- package/dist/components/AnimatedOpacity.js +46 -0
- package/dist/components/AnimatedOpacity.js.map +1 -0
- package/dist/components/Code.d.ts +2 -1
- package/dist/components/Code.d.ts.map +1 -1
- package/dist/components/Code.js +4 -4
- package/dist/components/Code.js.map +1 -1
- package/dist/components/Modal.d.ts +9 -0
- package/dist/components/Modal.d.ts.map +1 -0
- package/dist/components/Modal.js +58 -0
- package/dist/components/Modal.js.map +1 -0
- package/dist/layout.css +21 -0
- package/dist/state/ChatEntry.d.ts +21 -2
- package/dist/state/ChatEntry.d.ts.map +1 -1
- package/dist/state/ChatEntry.js.map +1 -1
- package/dist/state/WidgetState.d.ts +8 -1
- package/dist/state/WidgetState.d.ts.map +1 -1
- package/dist/state/WidgetState.js.map +1 -1
- package/dist/utils/error.d.ts +2 -0
- package/dist/utils/error.d.ts.map +1 -0
- package/dist/utils/error.js +54 -0
- package/dist/utils/error.js.map +1 -0
- package/dist/views/Chat/ChatMessage.d.ts +1 -1
- package/dist/views/Chat/ChatMessage.d.ts.map +1 -1
- package/dist/views/Chat/ChatMessage.js +4 -3
- package/dist/views/Chat/ChatMessage.js.map +1 -1
- package/dist/views/Chat/StepsList.d.ts +9 -0
- package/dist/views/Chat/StepsList.d.ts.map +1 -0
- package/dist/views/Chat/StepsList.js +51 -0
- package/dist/views/Chat/StepsList.js.map +1 -0
- package/dist/views/Chat/styled.d.ts +3 -1
- package/dist/views/Chat/styled.d.ts.map +1 -1
- package/dist/views/Chat/styled.js +56 -0
- package/dist/views/Chat/styled.js.map +1 -1
- package/dist/views/Stacks.js +1 -0
- package/dist/views/Stacks.js.map +1 -1
- package/dist/views/Tools/FlowChart/HandleGroup.d.ts +7 -0
- package/dist/views/Tools/FlowChart/HandleGroup.d.ts.map +1 -0
- package/dist/views/Tools/FlowChart/HandleGroup.js +4 -0
- package/dist/views/Tools/FlowChart/HandleGroup.js.map +1 -0
- package/dist/views/Tools/FlowChart/NodeStep.d.ts +7 -0
- package/dist/views/Tools/FlowChart/NodeStep.d.ts.map +1 -0
- package/dist/views/Tools/FlowChart/NodeStep.js +15 -0
- package/dist/views/Tools/FlowChart/NodeStep.js.map +1 -0
- package/dist/views/Tools/FlowChart/index.d.ts +9 -0
- package/dist/views/Tools/FlowChart/index.d.ts.map +1 -0
- package/dist/views/Tools/FlowChart/index.js +52 -0
- package/dist/views/Tools/FlowChart/index.js.map +1 -0
- package/dist/views/Tools/FlowChart/layout.d.ts +17 -0
- package/dist/views/Tools/FlowChart/layout.d.ts.map +1 -0
- package/dist/views/Tools/FlowChart/layout.js +40 -0
- package/dist/views/Tools/FlowChart/layout.js.map +1 -0
- package/dist/views/Tools/FlowChart/styled.d.ts +15 -0
- package/dist/views/Tools/FlowChart/styled.d.ts.map +1 -0
- package/dist/views/Tools/FlowChart/styled.js +181 -0
- package/dist/views/Tools/FlowChart/styled.js.map +1 -0
- package/dist/views/Tools/FlowChart/types.d.ts +13 -0
- package/dist/views/Tools/FlowChart/types.d.ts.map +1 -0
- package/dist/views/Tools/FlowChart/types.js +2 -0
- package/dist/views/Tools/FlowChart/types.js.map +1 -0
- package/dist/views/Tools/StepModal.d.ts +9 -0
- package/dist/views/Tools/StepModal.d.ts.map +1 -0
- package/dist/views/Tools/StepModal.js +156 -0
- package/dist/views/Tools/StepModal.js.map +1 -0
- package/dist/views/Tools/ToolsPanel.d.ts +6 -0
- package/dist/views/Tools/ToolsPanel.d.ts.map +1 -0
- package/dist/views/Tools/ToolsPanel.js +14 -0
- package/dist/views/Tools/ToolsPanel.js.map +1 -0
- package/dist/views/Tools/dictionary.d.ts +41 -0
- package/dist/views/Tools/dictionary.d.ts.map +1 -0
- package/dist/views/Tools/dictionary.js +43 -0
- package/dist/views/Tools/dictionary.js.map +1 -0
- package/dist/views/Tools/index.d.ts +5 -0
- package/dist/views/Tools/index.d.ts.map +1 -0
- package/dist/views/Tools/index.js +31 -0
- package/dist/views/Tools/index.js.map +1 -0
- package/dist/views/Tools/utils.d.ts +6 -0
- package/dist/views/Tools/utils.d.ts.map +1 -0
- package/dist/views/Tools/utils.js +32 -0
- package/dist/views/Tools/utils.js.map +1 -0
- package/package.json +5 -3
- package/src/StackspotAIWidget.tsx +2 -0
- package/src/app-metadata.json +11 -3
- package/src/chat-interceptors/send-message.ts +8 -3
- package/src/components/AnimatedOpacity.tsx +55 -0
- package/src/components/Code.tsx +5 -3
- package/src/components/Modal.tsx +87 -0
- package/src/layout.css +21 -0
- package/src/state/ChatEntry.ts +25 -1
- package/src/state/WidgetState.ts +5 -1
- package/src/utils/error.ts +56 -0
- package/src/views/Chat/ChatMessage.tsx +7 -5
- package/src/views/Chat/StepsList.tsx +97 -0
- package/src/views/Chat/styled.ts +62 -1
- package/src/views/Stacks.tsx +1 -0
- package/src/views/Tools/FlowChart/HandleGroup.tsx +12 -0
- package/src/views/Tools/FlowChart/NodeStep.tsx +57 -0
- package/src/views/Tools/FlowChart/index.tsx +71 -0
- package/src/views/Tools/FlowChart/layout.ts +49 -0
- package/src/views/Tools/FlowChart/styled.ts +182 -0
- package/src/views/Tools/FlowChart/types.ts +14 -0
- package/src/views/Tools/StepModal.tsx +247 -0
- package/src/views/Tools/ToolsPanel.tsx +24 -0
- package/src/views/Tools/dictionary.ts +46 -0
- package/src/views/Tools/index.tsx +37 -0
- package/src/views/Tools/utils.tsx +34 -0
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { theme } from '@stack-spot/portal-theme';
|
|
2
|
+
import { styled } from 'styled-components';
|
|
3
|
+
export const stepNodeSize = { width: 160, height: 167 };
|
|
4
|
+
export const planningNodeSize = { width: 160, height: 61 };
|
|
5
|
+
export const answerNodeSize = { width: 160, height: 40 };
|
|
6
|
+
export const runningColor = '#0097FA';
|
|
7
|
+
export const FlowChartBox = styled.div `
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
|
|
11
|
+
.chart-node {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
gap: 10px;
|
|
15
|
+
padding: 6px;
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
border: 1px solid ${theme.color.light[600]};
|
|
18
|
+
background-color: ${theme.color.light[500]};
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
|
|
22
|
+
&.running .source-handle {
|
|
23
|
+
background-color: ${runningColor};
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.pending .source-handle {
|
|
27
|
+
opacity: 0.3;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&.step {
|
|
31
|
+
width: ${stepNodeSize.width}px;
|
|
32
|
+
height: ${stepNodeSize.height}px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&.planning {
|
|
36
|
+
width: ${planningNodeSize.width}px;
|
|
37
|
+
height: ${planningNodeSize.height}px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&.answer {
|
|
41
|
+
width: ${answerNodeSize.width}px;
|
|
42
|
+
height: ${answerNodeSize.height}px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
header {
|
|
46
|
+
display: flex;
|
|
47
|
+
gap: 4px;
|
|
48
|
+
align-items: center;
|
|
49
|
+
.step-index {
|
|
50
|
+
flex: 1;
|
|
51
|
+
white-space: nowrap;
|
|
52
|
+
text-overflow: ellipsis;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.step-title {
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
text-overflow: ellipsis;
|
|
59
|
+
color: ${theme.color.light[700]};
|
|
60
|
+
overflow-x: clip;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.step-details {
|
|
64
|
+
background-color: ${theme.color.light[400]};
|
|
65
|
+
border-radius: 2px;
|
|
66
|
+
padding: 8px;
|
|
67
|
+
flex: 1;
|
|
68
|
+
display: flex;
|
|
69
|
+
flex-direction: column;
|
|
70
|
+
align-items: start;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
gap: 10px;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
|
|
75
|
+
.step-description {
|
|
76
|
+
flex: 1;
|
|
77
|
+
line-height: 18px;
|
|
78
|
+
max-height: 72px; // line-height * 4
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
display: -webkit-box;
|
|
81
|
+
-webkit-line-clamp: 4;
|
|
82
|
+
-webkit-box-orient: vertical;
|
|
83
|
+
|
|
84
|
+
&.with-tools {
|
|
85
|
+
max-height: 36px; // line-height * 2
|
|
86
|
+
-webkit-line-clamp: 2;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.step-tools {
|
|
91
|
+
border-radius: 25px;
|
|
92
|
+
background-color: ${theme.color.light[600]};
|
|
93
|
+
border: 1px solid ${theme.color.light[500]};
|
|
94
|
+
color: ${theme.color.light[700]};
|
|
95
|
+
padding: 2px 7px;
|
|
96
|
+
display: flex;
|
|
97
|
+
gap: 5px;
|
|
98
|
+
align-items: center;
|
|
99
|
+
|
|
100
|
+
small {
|
|
101
|
+
line-height: 0.75rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
ul {
|
|
105
|
+
list-style: none;
|
|
106
|
+
margin: 0;
|
|
107
|
+
padding: 0;
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
|
|
111
|
+
li {
|
|
112
|
+
border: 1px solid ${theme.color.light[600]};
|
|
113
|
+
background-color: ${theme.color.light[400]};
|
|
114
|
+
border-radius: 50%;
|
|
115
|
+
width: 16px;
|
|
116
|
+
height: 16px;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
|
|
122
|
+
&:not(:first-child) {
|
|
123
|
+
margin-left: -12px;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
i {
|
|
128
|
+
width: 12px;
|
|
129
|
+
height: 12px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
img, svg {
|
|
133
|
+
width: 100%;
|
|
134
|
+
height: 100%;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.source-handle {
|
|
142
|
+
background-color: ${theme.color.light[700]};
|
|
143
|
+
border: none;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.target-handle {
|
|
147
|
+
opacity: 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.controls {
|
|
151
|
+
background-color: ${theme.color.light[300]};
|
|
152
|
+
border-radius: 4px;
|
|
153
|
+
border: none;
|
|
154
|
+
display: flex;
|
|
155
|
+
|
|
156
|
+
button {
|
|
157
|
+
background: transparent;
|
|
158
|
+
border: none;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.edge {
|
|
163
|
+
path {
|
|
164
|
+
stroke: ${theme.color.light[700]};
|
|
165
|
+
stroke-width: 2px;
|
|
166
|
+
}
|
|
167
|
+
&.pending path {
|
|
168
|
+
opacity: 0.3;
|
|
169
|
+
}
|
|
170
|
+
&.running path {
|
|
171
|
+
stroke: ${runningColor};
|
|
172
|
+
stroke-dasharray: 5, 5;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.react-flow__attribution {
|
|
177
|
+
background-color: transparent;
|
|
178
|
+
opacity: 0.1;
|
|
179
|
+
}
|
|
180
|
+
`;
|
|
181
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAA;AACvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAA;AAC1D,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAA;AACxD,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAA;AAErC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;wBAUd,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;wBACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;0BAKpB,YAAY;;;;;;;;eAQvB,YAAY,CAAC,KAAK;gBACjB,YAAY,CAAC,MAAM;;;;eAIpB,gBAAgB,CAAC,KAAK;gBACrB,gBAAgB,CAAC,MAAM;;;;eAIxB,cAAc,CAAC,KAAK;gBACnB,cAAc,CAAC,MAAM;;;;;;;;;;;;;;;;;eAiBtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;0BAKX,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA4BpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;4BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;iBACjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;gCAkBP,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;gCACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B9B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;wBAStB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;gBAa9B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;gBAOtB,YAAY;;;;;;;;;CAS3B,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ChatEntryStep } from '../../../state/ChatEntry.js';
|
|
2
|
+
export interface NodeData {
|
|
3
|
+
nextStatus: ChatEntryStep['status'] | undefined;
|
|
4
|
+
onClick?: () => void;
|
|
5
|
+
step: ChatEntryStep;
|
|
6
|
+
index: number;
|
|
7
|
+
}
|
|
8
|
+
export interface NodeWithoutLayout {
|
|
9
|
+
id: string;
|
|
10
|
+
type: 'step' | 'planning' | 'answer';
|
|
11
|
+
data?: NodeData;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExD,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ChatEntry } from '../../state/ChatEntry.js';
|
|
2
|
+
interface Props {
|
|
3
|
+
message: ChatEntry;
|
|
4
|
+
stepId: string | undefined;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const StepModal: ({ message, stepId: initialStepId, onClose }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=StepModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepModal.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/StepModal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAa,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAI5D,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAqJD,eAAO,MAAM,SAAS,GAAI,6CAA6C,KAAK,4CA6E3E,CAAA"}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Flex, IconBox, Text } from '@citric/core';
|
|
3
|
+
import { ChevronDown, ChevronLeft, ChevronRight, Cog } from '@citric/icons';
|
|
4
|
+
import { Badge, IconButton } from '@citric/ui';
|
|
5
|
+
import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight';
|
|
6
|
+
import { listToClass, theme } from '@stack-spot/portal-theme';
|
|
7
|
+
import { interpolate } from '@stack-spot/portal-translate';
|
|
8
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
9
|
+
import { styled } from 'styled-components';
|
|
10
|
+
import { Code } from '../../components/Code.js';
|
|
11
|
+
import { Markdown } from '../../components/Markdown.js';
|
|
12
|
+
import { Modal } from '../../components/Modal.js';
|
|
13
|
+
import { useChatEntry } from '../../context/hooks.js';
|
|
14
|
+
import { useToolsDictionary } from './dictionary.js';
|
|
15
|
+
import { getTitle, toPrecision } from './utils.js';
|
|
16
|
+
const StyledSection = styled.section `
|
|
17
|
+
padding: 18px 14px;
|
|
18
|
+
border-bottom: 1px solid var(--light-600);
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
gap: 12px;
|
|
22
|
+
align-items: start;
|
|
23
|
+
|
|
24
|
+
&:last-child {
|
|
25
|
+
border-bottom: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&.restrict-image-size img {
|
|
29
|
+
max-width: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.tool {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
align-items: start;
|
|
36
|
+
align-self: stretch;
|
|
37
|
+
gap: 6px;
|
|
38
|
+
background-color: ${theme.color.light[500]};
|
|
39
|
+
border-radius: 5px;
|
|
40
|
+
padding: 6px;
|
|
41
|
+
|
|
42
|
+
&.output {
|
|
43
|
+
padding: 0;
|
|
44
|
+
background-color: transparent;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.tool-header-wrapper {
|
|
48
|
+
background-color: ${theme.color.light[300]};
|
|
49
|
+
border-radius: 8px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.tool-header {
|
|
53
|
+
padding: 4px 8px 4px 4px;
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
gap: 12px;
|
|
57
|
+
position: relative;
|
|
58
|
+
|
|
59
|
+
&:before {
|
|
60
|
+
content: '';
|
|
61
|
+
top: 32px;
|
|
62
|
+
bottom: 8px;
|
|
63
|
+
left: 15px;
|
|
64
|
+
width: 1px;
|
|
65
|
+
background-color: ${theme.color.light[700]};
|
|
66
|
+
opacity: 0.3;
|
|
67
|
+
position: absolute;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.title {
|
|
71
|
+
display: flex;
|
|
72
|
+
gap: 8px;
|
|
73
|
+
align-items: center;
|
|
74
|
+
.tool-image {
|
|
75
|
+
width: 24px;
|
|
76
|
+
height: 24px;
|
|
77
|
+
border-radius: 50%;
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
flex-shrink: 0;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.btn-expand {
|
|
84
|
+
transition: transform 0.3s ease-in-out;
|
|
85
|
+
&.open {
|
|
86
|
+
transform: rotate(180deg);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.duration {
|
|
91
|
+
opacity: 0.7;
|
|
92
|
+
text-align: right;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.description {
|
|
96
|
+
padding: 0 0 10px 20px;
|
|
97
|
+
opacity: 0.7;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.tool-input {
|
|
102
|
+
align-self: stretch;
|
|
103
|
+
&, .highlighter {
|
|
104
|
+
background: ${theme.color.light[300]} !important;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
`;
|
|
109
|
+
const ExecutionBox = styled.div `
|
|
110
|
+
border-radius: 4px;
|
|
111
|
+
background-color: ${theme.color.light[500]};
|
|
112
|
+
color: ${theme.color.light[700]};
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
.time {
|
|
116
|
+
padding: 6px 8px;
|
|
117
|
+
border-right: 1px solid ${theme.color.light[600]};
|
|
118
|
+
}
|
|
119
|
+
.navigator {
|
|
120
|
+
display: flex;
|
|
121
|
+
gap: 4px;
|
|
122
|
+
align-items: center;
|
|
123
|
+
padding: 2px 8px;
|
|
124
|
+
button {
|
|
125
|
+
width: 12px;
|
|
126
|
+
height: 12px;
|
|
127
|
+
padding: 0;
|
|
128
|
+
}
|
|
129
|
+
small {
|
|
130
|
+
line-height: 0.75rem;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
`;
|
|
134
|
+
const ToolHeader = ({ tool }) => {
|
|
135
|
+
const t = useToolsDictionary();
|
|
136
|
+
const [showDescription, setShowDescription] = useState(false);
|
|
137
|
+
return (_jsx(AnimatedHeight, { className: "tool-header-wrapper", children: _jsxs("div", { className: "tool-header", children: [_jsxs("div", { className: "title", children: [tool.image ? _jsx("img", { src: tool.image, className: "tool-image" }) : _jsx(IconBox, { className: "tool-image", children: _jsx(Cog, {}) }), _jsx(Text, { colorScheme: "light.700", children: tool.name }), tool.duration && _jsx(Text, { colorScheme: "light.700", className: "duration", children: interpolate(t.thoughtFor, toPrecision(tool.duration)) }), tool.description && _jsx(IconButton, { size: "xs", className: listToClass(['btn-expand', showDescription && 'open']), onClick: () => setShowDescription(v => !v), "aria-label": showDescription ? t.close : t.open, children: _jsx(ChevronDown, {}) })] }), showDescription && _jsx(Text, { className: "description", colorScheme: "light.700", children: tool.description })] }) }));
|
|
138
|
+
};
|
|
139
|
+
export const StepModal = ({ message, stepId: initialStepId, onClose }) => {
|
|
140
|
+
const t = useToolsDictionary();
|
|
141
|
+
const [stepId, setStepId] = useState(initialStepId);
|
|
142
|
+
const entry = useChatEntry(message);
|
|
143
|
+
const stepIndex = useMemo(() => entry.steps?.findIndex(s => s.id === stepId) ?? -1, [entry, stepId]);
|
|
144
|
+
const step = entry.steps?.[stepIndex];
|
|
145
|
+
useEffect(() => setStepId(initialStepId), [initialStepId]);
|
|
146
|
+
const inputTools = step?.tools?.map(tool => (_jsxs("div", { className: "tool", children: [_jsx(ToolHeader, { tool: tool }), _jsxs(Text, { appearance: "microtext1", colorScheme: "light.700", children: [t.input, ":"] }), tool.input && _jsx(Code, { language: "json", className: "tool-input", showLineNumbers: false, children: tool.input })] }, tool.id)));
|
|
147
|
+
const outputTools = step?.tools?.filter(tool => !!tool.output)?.map(tool => (_jsxs("div", { className: "tool output", children: [_jsx(Badge, { appearance: "square", palette: "moss", children: t.response }), _jsx(ToolHeader, { tool: tool }), _jsxs(Text, { appearance: "microtext1", colorScheme: "light.700", children: [t.response, ":"] }), _jsx(Text, { appearance: "microtext1", children: tool.output })] }, tool.id)));
|
|
148
|
+
function changeStep(amount) {
|
|
149
|
+
const next = entry.steps?.[stepIndex + amount]?.id;
|
|
150
|
+
if (next)
|
|
151
|
+
setStepId(next);
|
|
152
|
+
}
|
|
153
|
+
const title = (_jsxs(Flex, { flex: 1, justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { appearance: "h6", children: getTitle(t, step, stepIndex) }), _jsxs(ExecutionBox, { children: [_jsxs(Text, { className: "time", appearance: "microtext1", children: [step?.status === 'running' && t.running, step?.status === 'pending' && t.pending, step?.status === 'success' && `${t.executionTime}: ${step?.duration ? `${toPrecision(step?.duration)}s` : t.unknown}`] }), _jsxs("div", { className: "navigator", children: [step?.type !== 'planning' && (_jsx(IconButton, { size: "xs", appearance: "text", title: t.previousStep, "aria-label": t.previousStep, onClick: () => changeStep(-1), children: _jsx(ChevronLeft, {}) })), step?.type === 'step' && _jsxs(Text, { appearance: "microtext1", children: [stepIndex, "/", (entry.steps?.length ?? 0) - 2] }), step?.type !== 'answer' && (_jsx(IconButton, { size: "xs", appearance: "text", title: t.nextStep, "aria-label": t.nextStep, onClick: () => changeStep(1), children: _jsx(ChevronRight, {}) }))] })] })] }));
|
|
154
|
+
return (_jsxs(Modal, { open: !!step, onClose: onClose, title: title, children: [step?.type === 'answer' && _jsx(StyledSection, { className: "restrict-image-size", children: entry.type === 'md' ? _jsx(Markdown, { children: entry.content }) : _jsx(Text, { children: entry.content }) }), step?.input && _jsxs(StyledSection, { children: [_jsx(Badge, { appearance: "square", palette: "blue", children: "Prompt" }), _jsx(Text, { children: step.input }), inputTools] }), (outputTools?.length || step?.output) && (_jsxs(StyledSection, { children: [outputTools, step?.output && !outputTools?.length && _jsxs(_Fragment, { children: [_jsx(Badge, { appearance: "square", palette: "moss", children: t.response }), _jsx(Text, { children: step.output })] })] }))] }));
|
|
155
|
+
};
|
|
156
|
+
//# sourceMappingURL=StepModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepModal.js","sourceRoot":"","sources":["../../../src/views/Tools/StepModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolsPanel.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/ToolsPanel.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,UAAU,GAAI,uBAAuB;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,mDAc/E,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/* eslint-disable import/no-default-export */
|
|
3
|
+
import { useMemo, useState } from 'react';
|
|
4
|
+
import { useWidget } from '../../context/hooks.js';
|
|
5
|
+
import { FlowChart } from './FlowChart/index.js';
|
|
6
|
+
import { StepModal } from './StepModal.js';
|
|
7
|
+
const ToolsPanel = ({ chatId, messageId }) => {
|
|
8
|
+
const [currentStepId, setCurrentStepId] = useState();
|
|
9
|
+
const widget = useWidget();
|
|
10
|
+
const message = useMemo(() => widget.chatTabs.getAll().find(c => c.id === chatId)?.getMessages().find(m => m.id === messageId), [chatId, messageId]);
|
|
11
|
+
return message ? (_jsxs(_Fragment, { children: [_jsx(FlowChart, { message: message, onClick: (step) => setCurrentStepId(step.id) }), _jsx(StepModal, { message: message, stepId: currentStepId, onClose: () => setCurrentStepId(undefined) })] })) : null;
|
|
12
|
+
};
|
|
13
|
+
export default ToolsPanel;
|
|
14
|
+
//# sourceMappingURL=ToolsPanel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToolsPanel.js","sourceRoot":"","sources":["../../../src/views/Tools/ToolsPanel.tsx"],"names":[],"mappings":";AAAA,6CAA6C;AAE7C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAyC,EAAE,EAAE;IAClF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,EACtG,CAAC,MAAM,EAAE,SAAS,CAAC,CACpB,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,8BACE,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAI,EAC7E,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAI,IACjG,CACJ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export declare const dictionary: {
|
|
2
|
+
en: {
|
|
3
|
+
toolsDescription: string;
|
|
4
|
+
step: string;
|
|
5
|
+
response: string;
|
|
6
|
+
tools: string;
|
|
7
|
+
planning: string;
|
|
8
|
+
answer: string;
|
|
9
|
+
executionTime: string;
|
|
10
|
+
unknown: string;
|
|
11
|
+
running: string;
|
|
12
|
+
pending: string;
|
|
13
|
+
nextStep: string;
|
|
14
|
+
previousStep: string;
|
|
15
|
+
thoughtFor: string;
|
|
16
|
+
open: string;
|
|
17
|
+
close: string;
|
|
18
|
+
input: string;
|
|
19
|
+
};
|
|
20
|
+
pt: {
|
|
21
|
+
toolsDescription: string;
|
|
22
|
+
step: string;
|
|
23
|
+
response: string;
|
|
24
|
+
tools: string;
|
|
25
|
+
planning: string;
|
|
26
|
+
answer: string;
|
|
27
|
+
executionTime: string;
|
|
28
|
+
unknown: string;
|
|
29
|
+
running: string;
|
|
30
|
+
pending: string;
|
|
31
|
+
nextStep: string;
|
|
32
|
+
previousStep: string;
|
|
33
|
+
thoughtFor: string;
|
|
34
|
+
open: string;
|
|
35
|
+
close: string;
|
|
36
|
+
input: string;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
export declare function useToolsDictionary(): Record<"close" | "input" | "step" | "open" | "planning" | "answer" | "pending" | "running" | "tools" | "toolsDescription" | "response" | "executionTime" | "unknown" | "nextStep" | "previousStep" | "thoughtFor", string>;
|
|
40
|
+
export type ToolsDictionary = typeof dictionary['en'];
|
|
41
|
+
//# sourceMappingURL=dictionary.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/dictionary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCD,CAAA;AAEtB,wBAAgB,kBAAkB,+NAEjC;AAED,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useTranslate } from '@stack-spot/portal-translate';
|
|
2
|
+
export const dictionary = {
|
|
3
|
+
en: {
|
|
4
|
+
toolsDescription: 'A description for tools',
|
|
5
|
+
step: 'Step',
|
|
6
|
+
response: 'Response',
|
|
7
|
+
tools: 'Tools',
|
|
8
|
+
planning: 'Planning',
|
|
9
|
+
answer: 'Final answer',
|
|
10
|
+
executionTime: 'Time',
|
|
11
|
+
unknown: 'unknown',
|
|
12
|
+
running: 'Running',
|
|
13
|
+
pending: 'Pending',
|
|
14
|
+
nextStep: 'Next step',
|
|
15
|
+
previousStep: 'Previous step',
|
|
16
|
+
thoughtFor: 'Thought for $0 seconds',
|
|
17
|
+
open: 'Open',
|
|
18
|
+
close: 'Close',
|
|
19
|
+
input: 'Input',
|
|
20
|
+
},
|
|
21
|
+
pt: {
|
|
22
|
+
toolsDescription: 'Uma descrição para as Ferramentas',
|
|
23
|
+
step: 'Passo',
|
|
24
|
+
response: 'Resposta',
|
|
25
|
+
tools: 'Ferramentas',
|
|
26
|
+
planning: 'Planejamento',
|
|
27
|
+
answer: 'Resposta final',
|
|
28
|
+
executionTime: 'Tempo',
|
|
29
|
+
unknown: 'desconhecido',
|
|
30
|
+
running: 'Executando',
|
|
31
|
+
pending: 'Aguardando',
|
|
32
|
+
nextStep: 'Próximo passo',
|
|
33
|
+
previousStep: 'Passo anterior',
|
|
34
|
+
thoughtFor: 'Pensado por $0 segundos',
|
|
35
|
+
open: 'Open',
|
|
36
|
+
close: 'Close',
|
|
37
|
+
input: 'Entrada',
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
export function useToolsDictionary() {
|
|
41
|
+
return useTranslate(dictionary);
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=dictionary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/views/Tools/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEvE,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,EAAE,EAAE;QACF,gBAAgB,EAAE,yBAAyB;QAC3C,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,cAAc;QACtB,aAAa,EAAE,MAAM;QACrB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,WAAW;QACrB,YAAY,EAAE,eAAe;QAC7B,UAAU,EAAE,wBAAwB;QACpC,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,gBAAgB,EAAE,mCAAmC;QACrD,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,OAAO;QACtB,OAAO,EAAE,cAAc;QACvB,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,YAAY;QACrB,QAAQ,EAAE,eAAe;QACzB,YAAY,EAAE,gBAAgB;QAC9B,UAAU,EAAE,yBAAyB;QACrC,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,SAAS;KACjB;CACmB,CAAA;AAEtB,MAAM,UAAU,kBAAkB;IAChC,OAAO,YAAY,CAAC,UAAU,CAAC,CAAA;AACjC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/index.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,KAAK,YAwBjB,CAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Flex } from '@citric/core';
|
|
3
|
+
import { LoadingCircular } from '@citric/ui';
|
|
4
|
+
import { lazy, Suspense, useEffect } from 'react';
|
|
5
|
+
import { useWidget, useWidgetState } from '../../context/hooks.js';
|
|
6
|
+
import { useRightPanel } from '../../right-panel/hooks.js';
|
|
7
|
+
import { useToolsDictionary } from './dictionary.js';
|
|
8
|
+
const LazyToolsPanel = lazy(() => import('./ToolsPanel.js'));
|
|
9
|
+
/**
|
|
10
|
+
* Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
|
|
11
|
+
*/
|
|
12
|
+
export const Tools = () => {
|
|
13
|
+
const t = useToolsDictionary();
|
|
14
|
+
const panel = useWidgetState('panel');
|
|
15
|
+
const message = useWidgetState('currentMessageInToolsPanel');
|
|
16
|
+
const { open } = useRightPanel();
|
|
17
|
+
const widget = useWidget();
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (panel === 'tools' && message)
|
|
20
|
+
open(_jsx(Suspense, { fallback: _jsx(Flex, { alignItems: "center", justifyContent: "center", flex: 1, children: _jsx(LoadingCircular, {}) }), children: _jsx(LazyToolsPanel, { chatId: message.chatId, messageId: message.messageId }, message.messageId) }), {
|
|
21
|
+
title: t.tools,
|
|
22
|
+
description: t.toolsDescription,
|
|
23
|
+
onClose: () => {
|
|
24
|
+
widget.set('panel', undefined);
|
|
25
|
+
widget.set('currentMessageInToolsPanel', undefined);
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
}, [panel, t, message]);
|
|
29
|
+
return null;
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/Tools/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAEjD,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,EAAE,CAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAA;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAC9B,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IACrC,MAAM,OAAO,GAAG,cAAc,CAAC,4BAA4B,CAAC,CAAA;IAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAChC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,OAAO,IAAI,OAAO;YAAE,IAAI,CACpC,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,YAAE,KAAC,eAAe,KAAG,GAAO,YACvG,KAAC,cAAc,IAAyB,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,IAAvE,OAAO,CAAC,SAAS,CAA0D,GACvF,EACX;gBACE,KAAK,EAAE,CAAC,CAAC,KAAK;gBACd,WAAW,EAAE,CAAC,CAAC,gBAAgB;gBAC/B,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;oBAC9B,MAAM,CAAC,GAAG,CAAC,4BAA4B,EAAE,SAAS,CAAC,CAAA;gBACrD,CAAC;aACF,CACF,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAA;IAEvB,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ChatEntryStep } from '../../state/ChatEntry.js';
|
|
2
|
+
export declare function getStatusIcon(status: ChatEntryStep['status']): import("react/jsx-runtime").JSX.Element | null;
|
|
3
|
+
export declare function getTypeIcon(type: ChatEntryStep['type']): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatEntryStep | undefined, index: number): string;
|
|
5
|
+
export declare function toPrecision(n: number, precisionDigits?: number): number;
|
|
6
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/utils.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAErD,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,kDAO5D;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,2CAKtD;AAED,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,GAAG,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,UAOnI;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,SAAI,UAGzD"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { IconBox } from '@citric/core';
|
|
3
|
+
import { CheckCircleFill, ListUnordered, PlayFill, TimesCircleFill } from '@citric/icons';
|
|
4
|
+
import { LoadingCircular } from '@citric/ui';
|
|
5
|
+
export function getStatusIcon(status) {
|
|
6
|
+
switch (status) {
|
|
7
|
+
case 'success': return _jsx(IconBox, { colorIcon: "success.500", children: _jsx(CheckCircleFill, {}) });
|
|
8
|
+
case 'error': return _jsx(IconBox, { colorIcon: "danger.500", children: _jsx(TimesCircleFill, {}) });
|
|
9
|
+
case 'running': return _jsx(LoadingCircular, { colorScheme: "inverse", size: "xs" });
|
|
10
|
+
default: return null;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
export function getTypeIcon(type) {
|
|
14
|
+
switch (type) {
|
|
15
|
+
case 'planning': return _jsx(ListUnordered, {});
|
|
16
|
+
default: return _jsx(PlayFill, {});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
export function getTitle(translation, step, index) {
|
|
20
|
+
if (!step)
|
|
21
|
+
return '';
|
|
22
|
+
switch (step.type) {
|
|
23
|
+
case 'planning': return translation.planning;
|
|
24
|
+
case 'step': return `${translation.step} ${index}`;
|
|
25
|
+
case 'answer': return translation.answer;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
export function toPrecision(n, precisionDigits = 1) {
|
|
29
|
+
const factor = Math.pow(10, precisionDigits);
|
|
30
|
+
return Math.round(n * factor) / factor;
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/views/Tools/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAG5C,MAAM,UAAU,aAAa,CAAC,MAA+B;IAC3D,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,SAAS,CAAC,CAAC,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,aAAa,YAAC,KAAC,eAAe,KAAG,GAAU,CAAA;QACrF,KAAK,OAAO,CAAC,CAAC,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,YAAY,YAAC,KAAC,eAAe,KAAG,GAAU,CAAA;QAClF,KAAK,SAAS,CAAC,CAAC,OAAO,KAAC,eAAe,IAAC,WAAW,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAG,CAAA;QAC1E,OAAO,CAAC,CAAC,OAAO,IAAI,CAAA;IACtB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAA2B;IACrD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,UAAU,CAAC,CAAC,OAAO,KAAC,aAAa,KAAG,CAAA;QACzC,OAAO,CAAC,CAAC,OAAO,KAAC,QAAQ,KAAG,CAAA;IAC9B,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,WAA2D,EAAE,IAA+B,EAAE,KAAa;IAClI,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAA;IACpB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,UAAU,CAAC,CAAC,OAAO,WAAW,CAAC,QAAQ,CAAA;QAC5C,KAAK,MAAM,CAAC,CAAC,OAAO,GAAG,WAAW,CAAC,IAAI,IAAI,KAAK,EAAE,CAAA;QAClD,KAAK,QAAQ,CAAC,CAAC,OAAO,WAAW,CAAC,MAAM,CAAA;IAC1C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,CAAS,EAAE,eAAe,GAAG,CAAC;IACxD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,eAAe,CAAC,CAAA;IAC5C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM,CAAA;AACxC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/ai-chat-widget",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"@citric/icons": "^5.9.0",
|
|
15
15
|
"@citric/ui": "^6.7.0",
|
|
16
16
|
"@stack-spot/portal-components": "^2.8.1",
|
|
17
|
-
"@stack-spot/portal-network": "^0.
|
|
17
|
+
"@stack-spot/portal-network": "^0.102.0",
|
|
18
18
|
"@stack-spot/portal-theme": "^1.0.0",
|
|
19
19
|
"@stack-spot/portal-translate": "^1.1.0",
|
|
20
20
|
"lodash": "^4.17.0",
|
|
@@ -53,6 +53,8 @@
|
|
|
53
53
|
"react-markdown": "^9.0.1",
|
|
54
54
|
"react-syntax-highlighter": "^15.5.0",
|
|
55
55
|
"remark-gfm": "^4.0.0",
|
|
56
|
-
"ulid": "^2.3.0"
|
|
56
|
+
"ulid": "^2.3.0",
|
|
57
|
+
"@xyflow/react": "^12.3.2",
|
|
58
|
+
"@dagrejs/dagre": "^1.1.4"
|
|
57
59
|
}
|
|
58
60
|
}
|