@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.
Files changed (115) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/StackspotAIWidget.d.ts.map +1 -1
  3. package/dist/StackspotAIWidget.js +2 -1
  4. package/dist/StackspotAIWidget.js.map +1 -1
  5. package/dist/app-metadata.json +11 -3
  6. package/dist/chat-interceptors/send-message.d.ts.map +1 -1
  7. package/dist/chat-interceptors/send-message.js +3 -1
  8. package/dist/chat-interceptors/send-message.js.map +1 -1
  9. package/dist/components/AnimatedOpacity.d.ts +8 -0
  10. package/dist/components/AnimatedOpacity.d.ts.map +1 -0
  11. package/dist/components/AnimatedOpacity.js +46 -0
  12. package/dist/components/AnimatedOpacity.js.map +1 -0
  13. package/dist/components/Code.d.ts +2 -1
  14. package/dist/components/Code.d.ts.map +1 -1
  15. package/dist/components/Code.js +4 -4
  16. package/dist/components/Code.js.map +1 -1
  17. package/dist/components/Modal.d.ts +9 -0
  18. package/dist/components/Modal.d.ts.map +1 -0
  19. package/dist/components/Modal.js +58 -0
  20. package/dist/components/Modal.js.map +1 -0
  21. package/dist/layout.css +21 -0
  22. package/dist/state/ChatEntry.d.ts +21 -2
  23. package/dist/state/ChatEntry.d.ts.map +1 -1
  24. package/dist/state/ChatEntry.js.map +1 -1
  25. package/dist/state/WidgetState.d.ts +8 -1
  26. package/dist/state/WidgetState.d.ts.map +1 -1
  27. package/dist/state/WidgetState.js.map +1 -1
  28. package/dist/utils/error.d.ts +2 -0
  29. package/dist/utils/error.d.ts.map +1 -0
  30. package/dist/utils/error.js +54 -0
  31. package/dist/utils/error.js.map +1 -0
  32. package/dist/views/Chat/ChatMessage.d.ts +1 -1
  33. package/dist/views/Chat/ChatMessage.d.ts.map +1 -1
  34. package/dist/views/Chat/ChatMessage.js +4 -3
  35. package/dist/views/Chat/ChatMessage.js.map +1 -1
  36. package/dist/views/Chat/StepsList.d.ts +9 -0
  37. package/dist/views/Chat/StepsList.d.ts.map +1 -0
  38. package/dist/views/Chat/StepsList.js +51 -0
  39. package/dist/views/Chat/StepsList.js.map +1 -0
  40. package/dist/views/Chat/styled.d.ts +3 -1
  41. package/dist/views/Chat/styled.d.ts.map +1 -1
  42. package/dist/views/Chat/styled.js +56 -0
  43. package/dist/views/Chat/styled.js.map +1 -1
  44. package/dist/views/Stacks.js +1 -0
  45. package/dist/views/Stacks.js.map +1 -1
  46. package/dist/views/Tools/FlowChart/HandleGroup.d.ts +7 -0
  47. package/dist/views/Tools/FlowChart/HandleGroup.d.ts.map +1 -0
  48. package/dist/views/Tools/FlowChart/HandleGroup.js +4 -0
  49. package/dist/views/Tools/FlowChart/HandleGroup.js.map +1 -0
  50. package/dist/views/Tools/FlowChart/NodeStep.d.ts +7 -0
  51. package/dist/views/Tools/FlowChart/NodeStep.d.ts.map +1 -0
  52. package/dist/views/Tools/FlowChart/NodeStep.js +15 -0
  53. package/dist/views/Tools/FlowChart/NodeStep.js.map +1 -0
  54. package/dist/views/Tools/FlowChart/index.d.ts +9 -0
  55. package/dist/views/Tools/FlowChart/index.d.ts.map +1 -0
  56. package/dist/views/Tools/FlowChart/index.js +52 -0
  57. package/dist/views/Tools/FlowChart/index.js.map +1 -0
  58. package/dist/views/Tools/FlowChart/layout.d.ts +17 -0
  59. package/dist/views/Tools/FlowChart/layout.d.ts.map +1 -0
  60. package/dist/views/Tools/FlowChart/layout.js +40 -0
  61. package/dist/views/Tools/FlowChart/layout.js.map +1 -0
  62. package/dist/views/Tools/FlowChart/styled.d.ts +15 -0
  63. package/dist/views/Tools/FlowChart/styled.d.ts.map +1 -0
  64. package/dist/views/Tools/FlowChart/styled.js +181 -0
  65. package/dist/views/Tools/FlowChart/styled.js.map +1 -0
  66. package/dist/views/Tools/FlowChart/types.d.ts +13 -0
  67. package/dist/views/Tools/FlowChart/types.d.ts.map +1 -0
  68. package/dist/views/Tools/FlowChart/types.js +2 -0
  69. package/dist/views/Tools/FlowChart/types.js.map +1 -0
  70. package/dist/views/Tools/StepModal.d.ts +9 -0
  71. package/dist/views/Tools/StepModal.d.ts.map +1 -0
  72. package/dist/views/Tools/StepModal.js +156 -0
  73. package/dist/views/Tools/StepModal.js.map +1 -0
  74. package/dist/views/Tools/ToolsPanel.d.ts +6 -0
  75. package/dist/views/Tools/ToolsPanel.d.ts.map +1 -0
  76. package/dist/views/Tools/ToolsPanel.js +14 -0
  77. package/dist/views/Tools/ToolsPanel.js.map +1 -0
  78. package/dist/views/Tools/dictionary.d.ts +41 -0
  79. package/dist/views/Tools/dictionary.d.ts.map +1 -0
  80. package/dist/views/Tools/dictionary.js +43 -0
  81. package/dist/views/Tools/dictionary.js.map +1 -0
  82. package/dist/views/Tools/index.d.ts +5 -0
  83. package/dist/views/Tools/index.d.ts.map +1 -0
  84. package/dist/views/Tools/index.js +31 -0
  85. package/dist/views/Tools/index.js.map +1 -0
  86. package/dist/views/Tools/utils.d.ts +6 -0
  87. package/dist/views/Tools/utils.d.ts.map +1 -0
  88. package/dist/views/Tools/utils.js +32 -0
  89. package/dist/views/Tools/utils.js.map +1 -0
  90. package/package.json +5 -3
  91. package/src/StackspotAIWidget.tsx +2 -0
  92. package/src/app-metadata.json +11 -3
  93. package/src/chat-interceptors/send-message.ts +8 -3
  94. package/src/components/AnimatedOpacity.tsx +55 -0
  95. package/src/components/Code.tsx +5 -3
  96. package/src/components/Modal.tsx +87 -0
  97. package/src/layout.css +21 -0
  98. package/src/state/ChatEntry.ts +25 -1
  99. package/src/state/WidgetState.ts +5 -1
  100. package/src/utils/error.ts +56 -0
  101. package/src/views/Chat/ChatMessage.tsx +7 -5
  102. package/src/views/Chat/StepsList.tsx +97 -0
  103. package/src/views/Chat/styled.ts +62 -1
  104. package/src/views/Stacks.tsx +1 -0
  105. package/src/views/Tools/FlowChart/HandleGroup.tsx +12 -0
  106. package/src/views/Tools/FlowChart/NodeStep.tsx +57 -0
  107. package/src/views/Tools/FlowChart/index.tsx +71 -0
  108. package/src/views/Tools/FlowChart/layout.ts +49 -0
  109. package/src/views/Tools/FlowChart/styled.ts +182 -0
  110. package/src/views/Tools/FlowChart/types.ts +14 -0
  111. package/src/views/Tools/StepModal.tsx +247 -0
  112. package/src/views/Tools/ToolsPanel.tsx +24 -0
  113. package/src/views/Tools/dictionary.ts +46 -0
  114. package/src/views/Tools/index.tsx +37 -0
  115. 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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -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":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAC3E,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAA;AAC7E,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAQ/C,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;wBAsBZ,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;0BAUpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;4BAiBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAuC5B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;CAI3C,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;sBAET,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;WACjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;8BAKH,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;CAgBnD,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAuB,EAAE,EAAE;IACnD,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAC9B,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7D,OAAO,CACL,KAAC,cAAc,IAAC,SAAS,EAAC,qBAAqB,YAC7C,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAK,SAAS,EAAC,OAAO,aACnB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,YAAY,GAAG,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,SAAS,EAAC,YAAY,YAAC,KAAC,GAAG,KAAG,GAAU,EACjH,KAAC,IAAI,IAAC,WAAW,EAAC,WAAW,YAAE,IAAI,CAAC,IAAI,GAAQ,EAC/C,IAAI,CAAC,QAAQ,IAAI,KAAC,IAAI,IAAC,WAAW,EAAC,WAAW,EAAC,SAAS,EAAC,UAAU,YACjE,WAAW,CAAC,CAAC,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GACjD,EACN,IAAI,CAAC,WAAW,IAAI,KAAC,UAAU,IAC9B,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,WAAW,CAAC,CAAC,YAAY,EAAE,eAAe,IAAI,MAAM,CAAC,CAAC,EACjE,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,gBAC9B,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,YAE9C,KAAC,WAAW,KAAG,GACJ,IACT,EACL,eAAe,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,EAAC,WAAW,EAAC,WAAW,YAAE,IAAI,CAAC,WAAW,GAAQ,IAC/F,GACS,CAClB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAS,EAAE,EAAE;IAC9E,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAC9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAA;IACnD,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,CAAA;IACnC,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IACpG,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,SAAS,CAAC,CAAA;IACrC,SAAS,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAE1D,MAAM,UAAU,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC1C,eAAK,SAAS,EAAC,MAAM,aACnB,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,EAC1B,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,aAAE,CAAC,CAAC,KAAK,SAAS,EACtE,IAAI,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAC,YAAY,EAAC,eAAe,EAAE,KAAK,YAAG,IAAI,CAAC,KAAK,GAAQ,KAH9E,IAAI,CAAC,EAAE,CAI5B,CACP,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC1E,eAAK,SAAS,EAAC,aAAa,aAC1B,KAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,YAAE,CAAC,CAAC,QAAQ,GAAS,EAC9D,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,EAC1B,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,aAAE,CAAC,CAAC,QAAQ,SAAS,EAC1E,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,IAAI,CAAC,MAAM,GAAQ,KAJlB,IAAI,CAAC,EAAE,CAKnC,CACP,CAAC,CAAA;IAEF,SAAS,UAAU,CAAC,MAAc;QAChC,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,SAAS,GAAG,MAAM,CAAC,EAAE,EAAE,CAAA;QAClD,IAAI,IAAI;YAAE,SAAS,CAAC,IAAI,CAAC,CAAA;IAC3B,CAAC;IAED,MAAM,KAAK,GAAG,CACZ,MAAC,IAAI,IAAC,IAAI,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC/D,KAAC,IAAI,IAAC,UAAU,EAAC,IAAI,YAAE,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,GAAQ,EAC3D,MAAC,YAAY,eACX,MAAC,IAAI,IAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,YAAY,aAC3C,IAAI,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,OAAO,EACvC,IAAI,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,OAAO,EACvC,IAAI,EAAE,MAAM,KAAK,SAAS,IAAI,GAAG,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,IACjH,EACP,eAAK,SAAS,EAAC,WAAW,aACvB,IAAI,EAAE,IAAI,KAAK,UAAU,IAAI,CAC5B,KAAC,UAAU,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,YAAY,gBAAc,CAAC,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,YACtH,KAAC,WAAW,KAAG,GACJ,CACd,EACA,IAAI,EAAE,IAAI,KAAK,MAAM,IAAI,MAAC,IAAI,IAAC,UAAU,EAAC,YAAY,aAAE,SAAS,OAAG,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,IAAQ,EAC1G,IAAI,EAAE,IAAI,KAAK,QAAQ,IAAI,CAC1B,KAAC,UAAU,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,gBAAc,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,YAC7G,KAAC,YAAY,KAAG,GACL,CACd,IACG,IACO,IACV,CACR,CAAA;IAED,OAAO,CACL,MAAC,KAAK,IAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,aAChD,IAAI,EAAE,IAAI,KAAK,QAAQ,IAAI,KAAC,aAAa,IAAC,SAAS,EAAC,qBAAqB,YACvE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,cAAE,KAAK,CAAC,OAAO,GAAY,CAAC,CAAC,CAAC,KAAC,IAAI,cAAE,KAAK,CAAC,OAAO,GAAQ,GAC5E,EACf,IAAI,EAAE,KAAK,IAAI,MAAC,aAAa,eAC5B,KAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,uBAAe,EACxD,KAAC,IAAI,cAAE,IAAI,CAAC,KAAK,GAAQ,EACxB,UAAU,IACG,EACf,CAAC,WAAW,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,CAAC,IAAI,CACxC,MAAC,aAAa,eACX,WAAW,EACX,IAAI,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,MAAM,IAAI,8BACvC,KAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,YAAE,CAAC,CAAC,QAAQ,GAAS,EAC9D,KAAC,IAAI,cAAE,IAAI,CAAC,MAAM,GAAQ,IACzB,IACW,CACjB,IACK,CACT,CAAA;AACH,CAAC,CAAA"}
@@ -0,0 +1,6 @@
1
+ declare const ToolsPanel: ({ chatId, messageId }: {
2
+ chatId: string;
3
+ messageId: number;
4
+ }) => import("react/jsx-runtime").JSX.Element | null;
5
+ export default ToolsPanel;
6
+ //# sourceMappingURL=ToolsPanel.d.ts.map
@@ -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,5 @@
1
+ /**
2
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
3
+ */
4
+ export declare const Tools: () => null;
5
+ //# sourceMappingURL=index.d.ts.map
@@ -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.9.0",
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.48.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
  }