@stack-spot/ai-chat-widget 1.13.2-beta.0 → 1.14.0-beta.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 (185) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/StackspotAIWidget.d.ts.map +1 -1
  3. package/dist/StackspotAIWidget.js +3 -2
  4. package/dist/StackspotAIWidget.js.map +1 -1
  5. package/dist/app-metadata.json +3 -3
  6. package/dist/chat-interceptors/CustomInputs.d.ts +2 -2
  7. package/dist/chat-interceptors/CustomInputs.d.ts.map +1 -1
  8. package/dist/chat-interceptors/CustomInputs.js.map +1 -1
  9. package/dist/chat-interceptors/quick-commands.js.map +1 -1
  10. package/dist/chat-interceptors/send-message.d.ts.map +1 -1
  11. package/dist/chat-interceptors/send-message.js +2 -0
  12. package/dist/chat-interceptors/send-message.js.map +1 -1
  13. package/dist/components/Markdown.d.ts.map +1 -1
  14. package/dist/components/Markdown.js +1 -1
  15. package/dist/components/Markdown.js.map +1 -1
  16. package/dist/components/StackedBadge.d.ts +14 -0
  17. package/dist/components/StackedBadge.d.ts.map +1 -0
  18. package/dist/components/StackedBadge.js +56 -0
  19. package/dist/components/StackedBadge.js.map +1 -0
  20. package/dist/components/ToolBadge.d.ts +14 -0
  21. package/dist/components/ToolBadge.d.ts.map +1 -0
  22. package/dist/components/ToolBadge.js +108 -0
  23. package/dist/components/ToolBadge.js.map +1 -0
  24. package/dist/index.d.ts +1 -1
  25. package/dist/index.d.ts.map +1 -1
  26. package/dist/state/ChatEntry.d.ts +12 -19
  27. package/dist/state/ChatEntry.d.ts.map +1 -1
  28. package/dist/state/ChatEntry.js.map +1 -1
  29. package/dist/state/ChatState.d.ts +2 -5
  30. package/dist/state/ChatState.d.ts.map +1 -1
  31. package/dist/state/WidgetState.d.ts +3 -4
  32. package/dist/state/WidgetState.d.ts.map +1 -1
  33. package/dist/state/WidgetState.js +1 -12
  34. package/dist/state/WidgetState.js.map +1 -1
  35. package/dist/state/types.d.ts +3 -1
  36. package/dist/state/types.d.ts.map +1 -1
  37. package/dist/utils/tools.d.ts +7 -0
  38. package/dist/utils/tools.d.ts.map +1 -0
  39. package/dist/utils/tools.js +9 -0
  40. package/dist/utils/tools.js.map +1 -0
  41. package/dist/views/Agents/AgentDescription.d.ts.map +1 -1
  42. package/dist/views/Agents/AgentDescription.js +11 -1
  43. package/dist/views/Agents/AgentDescription.js.map +1 -1
  44. package/dist/views/Agents/AgentsTab.d.ts.map +1 -1
  45. package/dist/views/Agents/AgentsTab.js +4 -8
  46. package/dist/views/Agents/AgentsTab.js.map +1 -1
  47. package/dist/views/Agents/dictionary.d.ts +1 -1
  48. package/dist/views/Agents/dictionary.d.ts.map +1 -1
  49. package/dist/views/Agents/dictionary.js +2 -0
  50. package/dist/views/Agents/dictionary.js.map +1 -1
  51. package/dist/views/Agents/styled.js +1 -1
  52. package/dist/views/Chat/AgentInfo.d.ts +2 -2
  53. package/dist/views/Chat/AgentInfo.d.ts.map +1 -1
  54. package/dist/views/Chat/AgentInfo.js +3 -3
  55. package/dist/views/Chat/AgentInfo.js.map +1 -1
  56. package/dist/views/Chat/ChatMessage.d.ts.map +1 -1
  57. package/dist/views/Chat/ChatMessage.js +22 -4
  58. package/dist/views/Chat/ChatMessage.js.map +1 -1
  59. package/dist/views/Chat/StepsList.d.ts +2 -2
  60. package/dist/views/Chat/StepsList.d.ts.map +1 -1
  61. package/dist/views/Chat/StepsList.js +2 -2
  62. package/dist/views/Chat/StepsList.js.map +1 -1
  63. package/dist/views/Chat/styled.d.ts.map +1 -1
  64. package/dist/views/Chat/styled.js +21 -12
  65. package/dist/views/Chat/styled.js.map +1 -1
  66. package/dist/views/ChatHistory/utils.d.ts +2 -2
  67. package/dist/views/ChatHistory/utils.d.ts.map +1 -1
  68. package/dist/views/ChatTabSelection.d.ts.map +1 -1
  69. package/dist/views/ChatTabSelection.js +16 -2
  70. package/dist/views/ChatTabSelection.js.map +1 -1
  71. package/dist/views/MessageInput/AgentSelector.d.ts.map +1 -1
  72. package/dist/views/MessageInput/AgentSelector.js +5 -9
  73. package/dist/views/MessageInput/AgentSelector.js.map +1 -1
  74. package/dist/views/MessageInput/ButtonAgent.d.ts.map +1 -1
  75. package/dist/views/MessageInput/ButtonAgent.js +21 -2
  76. package/dist/views/MessageInput/ButtonAgent.js.map +1 -1
  77. package/dist/views/MessageInput/index.js +2 -2
  78. package/dist/views/MessageInput/index.js.map +1 -1
  79. package/dist/views/{Tools → Steps}/FlowChart/HandleGroup.d.ts.map +1 -1
  80. package/dist/views/{Tools → Steps}/FlowChart/HandleGroup.js.map +1 -1
  81. package/dist/views/{Tools → Steps}/FlowChart/NodeStep.d.ts.map +1 -1
  82. package/dist/views/Steps/FlowChart/NodeStep.js +13 -0
  83. package/dist/views/Steps/FlowChart/NodeStep.js.map +1 -0
  84. package/dist/views/Steps/FlowChart/index.d.ts +10 -0
  85. package/dist/views/Steps/FlowChart/index.d.ts.map +1 -0
  86. package/dist/views/{Tools → Steps}/FlowChart/index.js +1 -5
  87. package/dist/views/{Tools → Steps}/FlowChart/index.js.map +1 -1
  88. package/dist/views/{Tools → Steps}/FlowChart/layout.d.ts.map +1 -1
  89. package/dist/views/{Tools → Steps}/FlowChart/layout.js.map +1 -1
  90. package/dist/views/{Tools → Steps}/FlowChart/styled.d.ts.map +1 -1
  91. package/dist/views/{Tools → Steps}/FlowChart/styled.js +0 -49
  92. package/dist/views/{Tools → Steps}/FlowChart/styled.js.map +1 -1
  93. package/dist/views/{Tools → Steps}/FlowChart/types.d.ts +3 -3
  94. package/dist/views/Steps/FlowChart/types.d.ts.map +1 -0
  95. package/dist/views/Steps/FlowChart/types.js.map +1 -0
  96. package/dist/views/Steps/StepModal.d.ts +9 -0
  97. package/dist/views/Steps/StepModal.d.ts.map +1 -0
  98. package/dist/views/Steps/StepModal.js +124 -0
  99. package/dist/views/Steps/StepModal.js.map +1 -0
  100. package/dist/views/Steps/StepsPanel.d.ts +6 -0
  101. package/dist/views/Steps/StepsPanel.d.ts.map +1 -0
  102. package/dist/views/{Tools/ToolsPanel.js → Steps/StepsPanel.js} +3 -3
  103. package/dist/views/{Tools/ToolsPanel.js.map → Steps/StepsPanel.js.map} +1 -1
  104. package/dist/views/{Tools → Steps}/dictionary.d.ts +9 -11
  105. package/dist/views/Steps/dictionary.d.ts.map +1 -0
  106. package/dist/views/{Tools → Steps}/dictionary.js +9 -11
  107. package/dist/views/Steps/dictionary.js.map +1 -0
  108. package/dist/views/{Tools → Steps}/index.d.ts +1 -1
  109. package/dist/views/Steps/index.d.ts.map +1 -0
  110. package/dist/views/{Tools → Steps}/index.js +10 -10
  111. package/dist/views/{Tools → Steps}/index.js.map +1 -1
  112. package/dist/views/Steps/utils.d.ts +6 -0
  113. package/dist/views/Steps/utils.d.ts.map +1 -0
  114. package/dist/views/{Tools → Steps}/utils.js.map +1 -1
  115. package/dist/views/Tools.d.ts +2 -0
  116. package/dist/views/Tools.d.ts.map +1 -0
  117. package/dist/views/Tools.js +51 -0
  118. package/dist/views/Tools.js.map +1 -0
  119. package/package.json +2 -2
  120. package/src/StackspotAIWidget.tsx +2 -0
  121. package/src/app-metadata.json +3 -3
  122. package/src/chat-interceptors/CustomInputs.ts +3 -3
  123. package/src/chat-interceptors/quick-commands.ts +2 -2
  124. package/src/chat-interceptors/send-message.ts +4 -2
  125. package/src/components/Markdown.tsx +1 -0
  126. package/src/components/StackedBadge.tsx +77 -0
  127. package/src/components/ToolBadge.tsx +146 -0
  128. package/src/index.ts +1 -1
  129. package/src/state/ChatEntry.ts +12 -20
  130. package/src/state/ChatState.ts +2 -2
  131. package/src/state/WidgetState.ts +4 -16
  132. package/src/state/types.ts +4 -1
  133. package/src/utils/agent.ts +1 -1
  134. package/src/utils/tools.ts +11 -0
  135. package/src/views/Agents/AgentDescription.tsx +14 -0
  136. package/src/views/Agents/AgentsTab.tsx +5 -10
  137. package/src/views/Agents/dictionary.ts +2 -0
  138. package/src/views/Agents/styled.ts +1 -1
  139. package/src/views/Chat/AgentInfo.tsx +6 -6
  140. package/src/views/Chat/ChatMessage.tsx +34 -4
  141. package/src/views/Chat/StepsList.tsx +6 -6
  142. package/src/views/Chat/styled.ts +21 -12
  143. package/src/views/ChatHistory/utils.ts +2 -2
  144. package/src/views/ChatTabSelection.tsx +22 -4
  145. package/src/views/MessageInput/AgentSelector.tsx +7 -9
  146. package/src/views/MessageInput/ButtonAgent.tsx +26 -2
  147. package/src/views/MessageInput/index.tsx +2 -2
  148. package/src/views/{Tools → Steps}/FlowChart/NodeStep.tsx +11 -23
  149. package/src/views/{Tools → Steps}/FlowChart/index.tsx +3 -7
  150. package/src/views/{Tools → Steps}/FlowChart/styled.ts +0 -49
  151. package/src/views/{Tools → Steps}/FlowChart/types.ts +3 -3
  152. package/src/views/Steps/StepModal.tsx +216 -0
  153. package/src/views/{Tools/ToolsPanel.tsx → Steps/StepsPanel.tsx} +2 -2
  154. package/src/views/{Tools → Steps}/dictionary.ts +9 -11
  155. package/src/views/{Tools → Steps}/index.tsx +10 -10
  156. package/src/views/{Tools → Steps}/utils.tsx +4 -4
  157. package/src/views/Tools.tsx +71 -0
  158. package/dist/views/Tools/FlowChart/NodeStep.js +0 -15
  159. package/dist/views/Tools/FlowChart/NodeStep.js.map +0 -1
  160. package/dist/views/Tools/FlowChart/index.d.ts +0 -9
  161. package/dist/views/Tools/FlowChart/index.d.ts.map +0 -1
  162. package/dist/views/Tools/FlowChart/types.d.ts.map +0 -1
  163. package/dist/views/Tools/FlowChart/types.js.map +0 -1
  164. package/dist/views/Tools/StepModal.d.ts +0 -9
  165. package/dist/views/Tools/StepModal.d.ts.map +0 -1
  166. package/dist/views/Tools/StepModal.js +0 -156
  167. package/dist/views/Tools/StepModal.js.map +0 -1
  168. package/dist/views/Tools/ToolsPanel.d.ts +0 -6
  169. package/dist/views/Tools/ToolsPanel.d.ts.map +0 -1
  170. package/dist/views/Tools/dictionary.d.ts.map +0 -1
  171. package/dist/views/Tools/dictionary.js.map +0 -1
  172. package/dist/views/Tools/index.d.ts.map +0 -1
  173. package/dist/views/Tools/utils.d.ts +0 -6
  174. package/dist/views/Tools/utils.d.ts.map +0 -1
  175. package/src/views/Tools/StepModal.tsx +0 -247
  176. /package/dist/views/{Tools → Steps}/FlowChart/HandleGroup.d.ts +0 -0
  177. /package/dist/views/{Tools → Steps}/FlowChart/HandleGroup.js +0 -0
  178. /package/dist/views/{Tools → Steps}/FlowChart/NodeStep.d.ts +0 -0
  179. /package/dist/views/{Tools → Steps}/FlowChart/layout.d.ts +0 -0
  180. /package/dist/views/{Tools → Steps}/FlowChart/layout.js +0 -0
  181. /package/dist/views/{Tools → Steps}/FlowChart/styled.d.ts +0 -0
  182. /package/dist/views/{Tools → Steps}/FlowChart/types.js +0 -0
  183. /package/dist/views/{Tools → Steps}/utils.js +0 -0
  184. /package/src/views/{Tools → Steps}/FlowChart/HandleGroup.tsx +0 -0
  185. /package/src/views/{Tools → Steps}/FlowChart/layout.ts +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"file":"NodeStep.js","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/NodeStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAO3C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,EAAS,EAAE,EAAE;IAChF,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CAAC,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,EAC7D,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,EAAE,EAChD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,aAEpC,6BACE,KAAC,OAAO,cAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAW,EAC3C,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,GAAQ,EAC7D,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IACpB,EACR,IAAI,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC9D,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,eAAK,SAAS,EAAC,cAAc,aACpD,KAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,YAAY,CAAC,CAAC,YACrF,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,GACnC,EACN,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CACvB,eAAK,SAAS,EAAC,YAAY,aACzB,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,CAAC,CAAC,KAAK,GAAQ,EAC9C,uBACG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CACzB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACvB,uBACG,KAAK;wCACJ,CAAC,CAAC,cAAK,GAAG,EAAE,IAAI,gBAAc,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI;wCAC/D,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,gBAAa,IAAI,EAAE,KAAK,EAAE,IAAI,YAAE,KAAC,GAAG,KAAG,GAAU,IAHhE,EAAE,CAKN,CACN,CACF,GACE,IACD,CACP,IACG,EACN,KAAC,WAAW,IAAC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,GAAI,IACzF,CACP,CAAA;AACH,CAAC,CAAA"}
@@ -1,9 +0,0 @@
1
- import '@xyflow/react/dist/style.css';
2
- import { ChatEntry, ChatEntryStep } from '../../../state/ChatEntry.js';
3
- interface Props {
4
- message: ChatEntry;
5
- onClick: (step: ChatEntryStep, index: number) => void;
6
- }
7
- export declare const FlowChart: ({ message, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
8
- export {};
9
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,8BAA8B,CAAA;AAGrC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAKnE,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS,GAAI,sBAAsB,KAAK,4CAiDpD,CAAA"}
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/views/Tools/FlowChart/types.ts"],"names":[],"mappings":""}
@@ -1,9 +0,0 @@
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
@@ -1 +0,0 @@
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"}
@@ -1,156 +0,0 @@
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
@@ -1 +0,0 @@
1
- {"version":3,"file":"StepModal.js","sourceRoot":"","sources":["../../../src/views/Tools/StepModal.tsx"],"names":[],"mappings":"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"}
@@ -1,6 +0,0 @@
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
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/index.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,KAAK,YAwBjB,CAAA"}
@@ -1,6 +0,0 @@
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
@@ -1 +0,0 @@
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"}
@@ -1,247 +0,0 @@
1
- import { Flex, IconBox, Text } from '@citric/core'
2
- import { ChevronDown, ChevronLeft, ChevronRight, Cog } from '@citric/icons'
3
- import { Badge, IconButton } from '@citric/ui'
4
- import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
5
- import { listToClass, theme } from '@stack-spot/portal-theme'
6
- import { interpolate } from '@stack-spot/portal-translate'
7
- import { useEffect, useMemo, useState } from 'react'
8
- import { styled } from 'styled-components'
9
- import { Code } from '../../components/Code'
10
- import { Markdown } from '../../components/Markdown'
11
- import { Modal } from '../../components/Modal'
12
- import { useChatEntry } from '../../context/hooks'
13
- import { AgentTool, ChatEntry } from '../../state/ChatEntry'
14
- import { useToolsDictionary } from './dictionary'
15
- import { getTitle, toPrecision } from './utils'
16
-
17
- interface Props {
18
- message: ChatEntry,
19
- stepId: string | undefined,
20
- onClose: () => void,
21
- }
22
-
23
- const StyledSection = styled.section`
24
- padding: 18px 14px;
25
- border-bottom: 1px solid var(--light-600);
26
- display: flex;
27
- flex-direction: column;
28
- gap: 12px;
29
- align-items: start;
30
-
31
- &:last-child {
32
- border-bottom: none;
33
- }
34
-
35
- &.restrict-image-size img {
36
- max-width: 100%;
37
- }
38
-
39
- .tool {
40
- display: flex;
41
- flex-direction: column;
42
- align-items: start;
43
- align-self: stretch;
44
- gap: 6px;
45
- background-color: ${theme.color.light[500]};
46
- border-radius: 5px;
47
- padding: 6px;
48
-
49
- &.output {
50
- padding: 0;
51
- background-color: transparent;
52
- }
53
-
54
- .tool-header-wrapper {
55
- background-color: ${theme.color.light[300]};
56
- border-radius: 8px;
57
- }
58
-
59
- .tool-header {
60
- padding: 4px 8px 4px 4px;
61
- display: flex;
62
- flex-direction: column;
63
- gap: 12px;
64
- position: relative;
65
-
66
- &:before {
67
- content: '';
68
- top: 32px;
69
- bottom: 8px;
70
- left: 15px;
71
- width: 1px;
72
- background-color: ${theme.color.light[700]};
73
- opacity: 0.3;
74
- position: absolute;
75
- }
76
-
77
- .title {
78
- display: flex;
79
- gap: 8px;
80
- align-items: center;
81
- .tool-image {
82
- width: 24px;
83
- height: 24px;
84
- border-radius: 50%;
85
- overflow: hidden;
86
- flex-shrink: 0;
87
- }
88
- }
89
-
90
- .btn-expand {
91
- transition: transform 0.3s ease-in-out;
92
- &.open {
93
- transform: rotate(180deg);
94
- }
95
- }
96
-
97
- .duration {
98
- opacity: 0.7;
99
- text-align: right;
100
- }
101
-
102
- .description {
103
- padding: 0 0 10px 20px;
104
- opacity: 0.7;
105
- }
106
- }
107
-
108
- .tool-input {
109
- align-self: stretch;
110
- &, .highlighter {
111
- background: ${theme.color.light[300]} !important;
112
- }
113
- }
114
- }
115
- `
116
-
117
- const ExecutionBox = styled.div`
118
- border-radius: 4px;
119
- background-color: ${theme.color.light[500]};
120
- color: ${theme.color.light[700]};
121
- display: flex;
122
- align-items: center;
123
- .time {
124
- padding: 6px 8px;
125
- border-right: 1px solid ${theme.color.light[600]};
126
- }
127
- .navigator {
128
- display: flex;
129
- gap: 4px;
130
- align-items: center;
131
- padding: 2px 8px;
132
- button {
133
- width: 12px;
134
- height: 12px;
135
- padding: 0;
136
- }
137
- small {
138
- line-height: 0.75rem;
139
- }
140
- }
141
- `
142
-
143
- const ToolHeader = ({ tool }: { tool: AgentTool }) => {
144
- const t = useToolsDictionary()
145
- const [showDescription, setShowDescription] = useState(false)
146
- return (
147
- <AnimatedHeight className="tool-header-wrapper">
148
- <div className="tool-header">
149
- <div className="title">
150
- {tool.image ? <img src={tool.image} className="tool-image" /> : <IconBox className="tool-image"><Cog /></IconBox>}
151
- <Text colorScheme="light.700">{tool.name}</Text>
152
- {tool.duration && <Text colorScheme="light.700" className="duration">
153
- {interpolate(t.thoughtFor, toPrecision(tool.duration))}
154
- </Text>}
155
- {tool.description && <IconButton
156
- size="xs"
157
- className={listToClass(['btn-expand', showDescription && 'open'])}
158
- onClick={() => setShowDescription(v => !v)}
159
- aria-label={showDescription ? t.close : t.open}
160
- >
161
- <ChevronDown />
162
- </IconButton>}
163
- </div>
164
- {showDescription && <Text className="description" colorScheme="light.700">{tool.description}</Text>}
165
- </div>
166
- </AnimatedHeight>
167
- )
168
- }
169
-
170
- export const StepModal = ({ message, stepId: initialStepId, onClose }: Props) => {
171
- const t = useToolsDictionary()
172
- const [stepId, setStepId] = useState(initialStepId)
173
- const entry = useChatEntry(message)
174
- const stepIndex = useMemo(() => entry.steps?.findIndex(s => s.id === stepId) ?? -1, [entry, stepId])
175
- const step = entry.steps?.[stepIndex]
176
- useEffect(() => setStepId(initialStepId), [initialStepId])
177
-
178
- const inputTools = step?.tools?.map(tool => (
179
- <div className="tool" key={tool.id}>
180
- <ToolHeader tool={tool} />
181
- <Text appearance="microtext1" colorScheme="light.700">{t.input}:</Text>
182
- {tool.input && <Code language="json" className="tool-input" showLineNumbers={false}>{tool.input}</Code>}
183
- </div>
184
- ))
185
-
186
- const outputTools = step?.tools?.filter(tool => !!tool.output)?.map(tool => (
187
- <div className="tool output" key={tool.id}>
188
- <Badge appearance="square" palette="moss">{t.response}</Badge>
189
- <ToolHeader tool={tool} />
190
- <Text appearance="microtext1" colorScheme="light.700">{t.response}:</Text>
191
- <Text appearance="microtext1">{tool.output}</Text>
192
- </div>
193
- ))
194
-
195
- function changeStep(amount: number) {
196
- const next = entry.steps?.[stepIndex + amount]?.id
197
- if (next) setStepId(next)
198
- }
199
-
200
- const title = (
201
- <Flex flex={1} justifyContent="space-between" alignItems="center">
202
- <Text appearance="h6">{getTitle(t, step, stepIndex)}</Text>
203
- <ExecutionBox>
204
- <Text className="time" appearance="microtext1">
205
- {step?.status === 'running' && t.running}
206
- {step?.status === 'pending' && t.pending}
207
- {step?.status === 'success' && `${t.executionTime}: ${step?.duration ? `${toPrecision(step?.duration)}s` : t.unknown}`}
208
- </Text>
209
- <div className="navigator">
210
- {step?.type !== 'planning' && (
211
- <IconButton size="xs" appearance="text" title={t.previousStep} aria-label={t.previousStep} onClick={() => changeStep(-1)}>
212
- <ChevronLeft />
213
- </IconButton>
214
- )}
215
- {step?.type === 'step' && <Text appearance="microtext1">{stepIndex}/{(entry.steps?.length ?? 0) - 2}</Text>}
216
- {step?.type !== 'answer' && (
217
- <IconButton size="xs" appearance="text" title={t.nextStep} aria-label={t.nextStep} onClick={() => changeStep(1)}>
218
- <ChevronRight />
219
- </IconButton>
220
- )}
221
- </div>
222
- </ExecutionBox>
223
- </Flex>
224
- )
225
-
226
- return (
227
- <Modal open={!!step} onClose={onClose} title={title}>
228
- {step?.type === 'answer' && <StyledSection className="restrict-image-size">
229
- {entry.type === 'md' ? <Markdown>{entry.content}</Markdown> : <Text>{entry.content}</Text>}
230
- </StyledSection>}
231
- {step?.input && <StyledSection>
232
- <Badge appearance="square" palette="blue">Prompt</Badge>
233
- <Text>{step.input}</Text>
234
- {inputTools}
235
- </StyledSection>}
236
- {(outputTools?.length || step?.output) && (
237
- <StyledSection>
238
- {outputTools}
239
- {step?.output && !outputTools?.length && <>
240
- <Badge appearance="square" palette="moss">{t.response}</Badge>
241
- <Text>{step.output}</Text>
242
- </>}
243
- </StyledSection>
244
- )}
245
- </Modal>
246
- )
247
- }
File without changes
File without changes
File without changes
File without changes