@stack-spot/ai-chat-widget 1.2.0 → 1.3.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 (178) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/StackspotAIWidget.d.ts +1 -6
  3. package/dist/StackspotAIWidget.d.ts.map +1 -1
  4. package/dist/StackspotAIWidget.js +6 -11
  5. package/dist/StackspotAIWidget.js.map +1 -1
  6. package/dist/chat-interceptors/quick-commands.js +1 -1
  7. package/dist/chat-interceptors/quick-commands.js.map +1 -1
  8. package/dist/chat-interceptors/send-message.d.ts.map +1 -1
  9. package/dist/chat-interceptors/send-message.js +21 -2
  10. package/dist/chat-interceptors/send-message.js.map +1 -1
  11. package/dist/components/AutoFocus.d.ts.map +1 -1
  12. package/dist/components/AutoFocus.js +8 -1
  13. package/dist/components/AutoFocus.js.map +1 -1
  14. package/dist/components/FadingOverflow.js +2 -2
  15. package/dist/components/FadingOverflow.js.map +1 -1
  16. package/dist/components/QuickStartButton.d.ts +6 -1
  17. package/dist/components/QuickStartButton.d.ts.map +1 -1
  18. package/dist/components/QuickStartButton.js +6 -2
  19. package/dist/components/QuickStartButton.js.map +1 -1
  20. package/dist/components/RightPanelForm.d.ts.map +1 -1
  21. package/dist/components/RightPanelForm.js +2 -1
  22. package/dist/components/RightPanelForm.js.map +1 -1
  23. package/dist/context/hooks.d.ts +1 -1
  24. package/dist/context/hooks.d.ts.map +1 -1
  25. package/dist/context/hooks.js +4 -5
  26. package/dist/context/hooks.js.map +1 -1
  27. package/dist/features.d.ts +16 -17
  28. package/dist/features.d.ts.map +1 -1
  29. package/dist/features.js +17 -9
  30. package/dist/features.js.map +1 -1
  31. package/dist/index.d.ts +4 -0
  32. package/dist/index.d.ts.map +1 -1
  33. package/dist/index.js +3 -0
  34. package/dist/index.js.map +1 -1
  35. package/dist/layout.css +7 -0
  36. package/dist/state/ChatState.d.ts +23 -3
  37. package/dist/state/ChatState.d.ts.map +1 -1
  38. package/dist/state/ChatState.js +5 -2
  39. package/dist/state/ChatState.js.map +1 -1
  40. package/dist/state/ChatTabsController.d.ts +21 -3
  41. package/dist/state/ChatTabsController.d.ts.map +1 -1
  42. package/dist/state/ChatTabsController.js +49 -11
  43. package/dist/state/ChatTabsController.js.map +1 -1
  44. package/dist/state/WidgetState.d.ts +22 -10
  45. package/dist/state/WidgetState.d.ts.map +1 -1
  46. package/dist/state/WidgetState.js +24 -9
  47. package/dist/state/WidgetState.js.map +1 -1
  48. package/dist/views/Agents/AgentDescription.d.ts +9 -0
  49. package/dist/views/Agents/AgentDescription.d.ts.map +1 -0
  50. package/dist/views/Agents/AgentDescription.js +21 -0
  51. package/dist/views/Agents/AgentDescription.js.map +1 -0
  52. package/dist/views/Agents/AgentsPanel.d.ts +5 -0
  53. package/dist/views/Agents/AgentsPanel.d.ts.map +1 -0
  54. package/dist/views/Agents/AgentsPanel.js +19 -0
  55. package/dist/views/Agents/AgentsPanel.js.map +1 -0
  56. package/dist/views/Agents/AgentsTab.d.ts +5 -0
  57. package/dist/views/Agents/AgentsTab.d.ts.map +1 -0
  58. package/dist/views/Agents/AgentsTab.js +43 -0
  59. package/dist/views/Agents/AgentsTab.js.map +1 -0
  60. package/dist/views/Agents/dictionary.d.ts +2 -0
  61. package/dist/views/Agents/dictionary.d.ts.map +1 -0
  62. package/dist/views/Agents/dictionary.js +35 -0
  63. package/dist/views/Agents/dictionary.js.map +1 -0
  64. package/dist/views/Agents/index.d.ts +5 -0
  65. package/dist/views/Agents/index.d.ts.map +1 -0
  66. package/dist/views/Agents/index.js +21 -0
  67. package/dist/views/Agents/index.js.map +1 -0
  68. package/dist/views/Agents/styled.d.ts +3 -0
  69. package/dist/views/Agents/styled.d.ts.map +1 -0
  70. package/dist/views/Agents/styled.js +58 -0
  71. package/dist/views/Agents/styled.js.map +1 -0
  72. package/dist/views/Chat/ChatMessage.d.ts.map +1 -1
  73. package/dist/views/Chat/ChatMessage.js +1 -1
  74. package/dist/views/Chat/ChatMessage.js.map +1 -1
  75. package/dist/views/Chat/index.js +1 -1
  76. package/dist/views/Chat/index.js.map +1 -1
  77. package/dist/views/Chat/styled.js +1 -1
  78. package/dist/views/ChatTabSelection.d.ts +1 -5
  79. package/dist/views/ChatTabSelection.d.ts.map +1 -1
  80. package/dist/views/ChatTabSelection.js +6 -5
  81. package/dist/views/ChatTabSelection.js.map +1 -1
  82. package/dist/views/Editor.d.ts.map +1 -1
  83. package/dist/views/Editor.js +4 -1
  84. package/dist/views/Editor.js.map +1 -1
  85. package/dist/views/Home/BuiltInAgent.d.ts +6 -0
  86. package/dist/views/Home/BuiltInAgent.d.ts.map +1 -0
  87. package/dist/views/{Home.js → Home/BuiltInAgent.js} +7 -41
  88. package/dist/views/Home/BuiltInAgent.js.map +1 -0
  89. package/dist/views/Home/CustomAgent.d.ts +5 -0
  90. package/dist/views/Home/CustomAgent.d.ts.map +1 -0
  91. package/dist/views/Home/CustomAgent.js +24 -0
  92. package/dist/views/Home/CustomAgent.js.map +1 -0
  93. package/dist/views/Home/index.d.ts +8 -0
  94. package/dist/views/Home/index.d.ts.map +1 -0
  95. package/dist/views/Home/index.js +15 -0
  96. package/dist/views/Home/index.js.map +1 -0
  97. package/dist/views/Home/styled.d.ts +2 -0
  98. package/dist/views/Home/styled.d.ts.map +1 -0
  99. package/dist/views/Home/styled.js +59 -0
  100. package/dist/views/Home/styled.js.map +1 -0
  101. package/dist/views/Home/types.d.ts +7 -0
  102. package/dist/views/Home/types.d.ts.map +1 -0
  103. package/dist/views/Home/types.js +2 -0
  104. package/dist/views/Home/types.js.map +1 -0
  105. package/dist/views/KnowledgeSources.js +1 -1
  106. package/dist/views/KnowledgeSources.js.map +1 -1
  107. package/dist/views/MessageInput/ButtonGroup.d.ts +1 -6
  108. package/dist/views/MessageInput/ButtonGroup.d.ts.map +1 -1
  109. package/dist/views/MessageInput/ButtonGroup.js +12 -4
  110. package/dist/views/MessageInput/ButtonGroup.js.map +1 -1
  111. package/dist/views/MessageInput/InfoBar.d.ts.map +1 -1
  112. package/dist/views/MessageInput/InfoBar.js +16 -6
  113. package/dist/views/MessageInput/InfoBar.js.map +1 -1
  114. package/dist/views/MessageInput/QuickCommandSelector.js +3 -3
  115. package/dist/views/MessageInput/QuickCommandSelector.js.map +1 -1
  116. package/dist/views/MessageInput/dictionary.d.ts +1 -1
  117. package/dist/views/MessageInput/index.d.ts +1 -9
  118. package/dist/views/MessageInput/index.d.ts.map +1 -1
  119. package/dist/views/MessageInput/index.js +2 -2
  120. package/dist/views/MessageInput/index.js.map +1 -1
  121. package/dist/views/MessageInput/styled.d.ts.map +1 -1
  122. package/dist/views/MessageInput/styled.js +6 -2
  123. package/dist/views/MessageInput/styled.js.map +1 -1
  124. package/dist/views/MinimizedHeader.d.ts.map +1 -1
  125. package/dist/views/MinimizedHeader.js +2 -3
  126. package/dist/views/MinimizedHeader.js.map +1 -1
  127. package/dist/views/Stacks.js +2 -1
  128. package/dist/views/Stacks.js.map +1 -1
  129. package/dist/views/Workspaces.js +2 -1
  130. package/dist/views/Workspaces.js.map +1 -1
  131. package/package.json +3 -4
  132. package/src/StackspotAIWidget.tsx +6 -16
  133. package/src/chat-interceptors/quick-commands.ts +1 -1
  134. package/src/chat-interceptors/send-message.ts +22 -2
  135. package/src/components/AutoFocus.tsx +9 -1
  136. package/src/components/FadingOverflow.tsx +2 -2
  137. package/src/components/QuickStartButton.tsx +17 -5
  138. package/src/components/RightPanelForm.tsx +2 -1
  139. package/src/context/hooks.ts +7 -8
  140. package/src/features.ts +27 -24
  141. package/src/index.ts +6 -0
  142. package/src/layout.css +7 -0
  143. package/src/state/ChatState.ts +26 -4
  144. package/src/state/ChatTabsController.ts +50 -11
  145. package/src/state/WidgetState.ts +39 -13
  146. package/src/views/Agents/AgentDescription.tsx +48 -0
  147. package/src/views/Agents/AgentsPanel.tsx +19 -0
  148. package/src/views/Agents/AgentsTab.tsx +80 -0
  149. package/src/views/Agents/dictionary.ts +36 -0
  150. package/src/views/Agents/index.tsx +26 -0
  151. package/src/views/Agents/styled.ts +59 -0
  152. package/src/views/Chat/ChatMessage.tsx +19 -17
  153. package/src/views/Chat/index.tsx +1 -1
  154. package/src/views/Chat/styled.ts +1 -1
  155. package/src/views/ChatTabSelection.tsx +7 -9
  156. package/src/views/Editor.tsx +4 -1
  157. package/src/views/{Home.tsx → Home/BuiltInAgent.tsx} +7 -48
  158. package/src/views/Home/CustomAgent.tsx +39 -0
  159. package/src/views/Home/index.tsx +20 -0
  160. package/src/views/Home/styled.ts +59 -0
  161. package/src/views/Home/types.ts +6 -0
  162. package/src/views/KnowledgeSources.tsx +2 -2
  163. package/src/views/MessageInput/ButtonGroup.tsx +15 -12
  164. package/src/views/MessageInput/InfoBar.tsx +25 -9
  165. package/src/views/MessageInput/QuickCommandSelector.tsx +3 -3
  166. package/src/views/MessageInput/index.tsx +1 -10
  167. package/src/views/MessageInput/styled.ts +6 -2
  168. package/src/views/MinimizedHeader.tsx +2 -3
  169. package/src/views/Stacks.tsx +3 -2
  170. package/src/views/Workspaces.tsx +3 -2
  171. package/dist/views/Agents.d.ts +0 -2
  172. package/dist/views/Agents.d.ts.map +0 -1
  173. package/dist/views/Agents.js +0 -146
  174. package/dist/views/Agents.js.map +0 -1
  175. package/dist/views/Home.d.ts +0 -14
  176. package/dist/views/Home.d.ts.map +0 -1
  177. package/dist/views/Home.js.map +0 -1
  178. package/src/views/Agents.tsx +0 -203
@@ -11,13 +11,13 @@ interface InfoBadgeProps {
11
11
  label: string,
12
12
  color: ColorPaletteName,
13
13
  dismiss: string,
14
- onDismiss: () => void,
14
+ onDismiss?: () => void,
15
15
  }
16
16
 
17
17
  const InfoBadge = ({ label, color, dismiss, onDismiss }: InfoBadgeProps) => (
18
18
  <Badge appearance="square" palette={color} className="info-badge">
19
19
  {label}
20
- <IconButton onClick={onDismiss} title={dismiss} arial-label={dismiss}><TimesMini /></IconButton>
20
+ {onDismiss && <IconButton onClick={onDismiss} title={dismiss} arial-label={dismiss}><TimesMini /></IconButton>}
21
21
  </Badge>
22
22
  )
23
23
 
@@ -35,16 +35,25 @@ export const InfoBar = () => {
35
35
  const currentWorkspace = useCurrentChatState('workspace')
36
36
  const currentKnowledgeSources = useCurrentChatState('knowledgeSources')
37
37
  const currentSelection = useCurrentChatState('codeSelection')
38
+ const features = useCurrentChatState('features')
38
39
  const visible = !!(currentStack || currentWorkspace || currentKnowledgeSources?.length || currentSelection)
39
40
  const ksToRender = useMemo(() => currentKnowledgeSources?.map(ks => {
40
- const onDismiss = () => chat.set('knowledgeSources', currentKnowledgeSources.filter(({ id }) => id !== ks.id))
41
+ const onDismiss = features.knowledgeSource
42
+ ? (() => chat.set('knowledgeSources', currentKnowledgeSources.filter(({ id }) => id !== ks.id)))
43
+ : undefined
41
44
  return <li key={ks.id}><InfoBadge label={ks.label} dismiss={t.removeKS} color="teal" onDismiss={onDismiss} /></li>
42
45
  }), [currentKnowledgeSources])
46
+ const shouldRenderRemoveAllButton = (
47
+ currentSelection
48
+ || (features.stack && currentStack)
49
+ || (features.workspace && currentWorkspace)
50
+ || (features.knowledgeSource && !!ksToRender?.length)
51
+ )
43
52
 
44
53
  const removeAll = useCallback(() => {
45
- chat.set('knowledgeSources', [])
46
- chat.set('stack', undefined)
47
- chat.set('workspace', undefined)
54
+ if (features.knowledgeSource) chat.set('knowledgeSources', [])
55
+ if (features.stack) chat.set('stack', undefined)
56
+ if (features.workspace) chat.set('workspace', undefined)
48
57
  removeCodeSelection()
49
58
  }, [])
50
59
 
@@ -57,7 +66,9 @@ export const InfoBar = () => {
57
66
  <div className={listToClass(['info-bar', visible && 'visible'])}>
58
67
  <div className="space"></div>
59
68
  <div className="content">
60
- <IconButton aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}><Times /></IconButton>
69
+ {shouldRenderRemoveAllButton && (
70
+ <IconButton aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}><Times /></IconButton>
71
+ )}
61
72
  <FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
62
73
  <ul>
63
74
  {currentSelection && (
@@ -67,7 +78,12 @@ export const InfoBar = () => {
67
78
  )}
68
79
  {currentStack && (
69
80
  <li>
70
- <InfoBadge label={currentStack.label} dismiss={t.removeStack} color="cyan" onDismiss={() => chat.set('stack', undefined)} />
81
+ <InfoBadge
82
+ label={currentStack.label}
83
+ dismiss={t.removeStack}
84
+ color="cyan"
85
+ onDismiss={features.stack ? (() => chat.set('stack', undefined)) : undefined}
86
+ />
71
87
  </li>
72
88
  )}
73
89
  {currentWorkspace && (
@@ -76,7 +92,7 @@ export const InfoBar = () => {
76
92
  label={currentWorkspace.label}
77
93
  dismiss={t.removeWorkspace}
78
94
  color="pink"
79
- onDismiss={() => chat.set('workspace', undefined)}
95
+ onDismiss={features.workspace ? (() => chat.set('workspace', undefined)) : undefined}
80
96
  />
81
97
  </li>
82
98
  )}
@@ -8,7 +8,7 @@ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
8
8
  import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
9
9
  import { Fading } from '../../components/Fading'
10
10
  import { FallbackBoundary } from '../../components/FallbackBoundary'
11
- import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
11
+ import { useCurrentChat, useCurrentChatState } from '../../context/hooks'
12
12
  import { quickCommandRegex } from '../../regex'
13
13
  import { getUrlToStackSpotAI } from '../../utils/url'
14
14
 
@@ -139,8 +139,8 @@ export const QuickCommandSelector = ({ inputRef }: Props) => {
139
139
  const filter = useMemo(() => value === '/' || quickCommandRegex.test(value) ? value.substring(1) : undefined, [value])
140
140
  const [isClosed, setClosed] = useState(false)
141
141
  const selectorRef = useRef<HTMLDivElement>(null)
142
- const areQuickCommandsEnabled = useWidgetState('areQuickCommandsEnabled')
143
- const shouldRender = !!areQuickCommandsEnabled && filter !== undefined && !isClosed
142
+ const isEnabled = useCurrentChatState('features').quickCommands
143
+ const shouldRender = isEnabled && filter !== undefined && !isClosed
144
144
 
145
145
  // Resets the closed state whenever the message input is cleared
146
146
  useEffect(() => {
@@ -3,7 +3,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
3
3
  import { AdaptiveTextArea } from '../../components/AdaptiveTextArea'
4
4
  import { ProgressBar } from '../../components/ProgressBar'
5
5
  import { useCurrentChat, useCurrentChatState, useWidgetState } from '../../context/hooks'
6
- import { MessageInputFeatures } from '../../features'
7
6
  import { quickCommandRegex } from '../../regex'
8
7
  import { ChatEntry } from '../../state/ChatEntry'
9
8
  import { ButtonGroup } from './ButtonGroup'
@@ -12,19 +11,12 @@ import { InfoBar } from './InfoBar'
12
11
  import { QuickCommandSelector } from './QuickCommandSelector'
13
12
  import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
14
13
 
15
- interface Props {
16
- /**
17
- * The features enabled and accessible through the message input.
18
- */
19
- features: MessageInputFeatures,
20
- }
21
-
22
14
  /**
23
15
  * This renders the MessageInput part of the layout which includes the progress bar, the actual textarea, the badges telling what is
24
16
  * going to be used for the question and the buttons to send, cancel, set the workspace, among others. This also includes the Quick
25
17
  * Commands panel for auto completing.
26
18
  */
27
- export const MessageInput = ({ features }: Props) => {
19
+ export const MessageInput = () => {
28
20
  const t = useMessageInputDictionary()
29
21
  const [focused, setFocused] = useState(false)
30
22
  const [expanded, setExpanded] = useState(true)
@@ -77,7 +69,6 @@ export const MessageInput = ({ features }: Props) => {
77
69
  maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
78
70
  />
79
71
  <ButtonGroup
80
- features={features}
81
72
  onSend={onSend}
82
73
  onCancel={() => chat.abort()}
83
74
  expanded={expanded}
@@ -13,6 +13,7 @@ export const MessageInputBox = styled.div`
13
13
 
14
14
  > .info-bar {
15
15
  margin-top: 8px;
16
+ margin-bottom: -3px;
16
17
  position: relative;
17
18
  overflow: hidden;
18
19
 
@@ -35,15 +36,18 @@ export const MessageInputBox = styled.div`
35
36
  border-top-left-radius: 10px;
36
37
  border-top-right-radius: 10px;
37
38
  height: ${INFO_BAR_HEIGHT}px;
38
- padding: 0 4px;
39
+ padding: 6px 4px 0;
39
40
  background-color: ${theme.color.light[500]};
40
41
  display: flex;
41
42
  flex-direction: row;
42
- align-items: center;
43
43
  gap: 6px;
44
44
 
45
45
  .list-overflow {
46
46
  max-width: calc(100% - 30px); // close button + gap
47
+ height: 24px;
48
+ &:first-child {
49
+ margin-left: 0.25rem; // space added to the left when the close all button isn't rendered
50
+ }
47
51
  }
48
52
 
49
53
  ul {
@@ -6,7 +6,7 @@ import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
6
6
  import { useCallback, useRef, useState } from 'react'
7
7
  import { styled } from 'styled-components'
8
8
  import { FadingOverflow } from '../components/FadingOverflow'
9
- import { useChatState, useChatTabs } from '../context/hooks'
9
+ import { useCurrentChatState } from '../context/hooks'
10
10
  import { MinimizedActions } from '../types'
11
11
 
12
12
  const Header = styled.header`
@@ -53,8 +53,7 @@ const Header = styled.header`
53
53
  */
54
54
  export const MinimizedHeader = ({ onClose, onCollapse, onExpand }: MinimizedActions) => {
55
55
  const t = useTranslate(dictionary)
56
- const { active } = useChatTabs()
57
- const label = useChatState(active, 'label')
56
+ const label = useCurrentChatState('label')
58
57
  const [collapsed, setCollapsed] = useState(false)
59
58
  const ref = useRef<HTMLElement>(null)
60
59
  const showButtons = onClose || onCollapse || onExpand
@@ -75,10 +75,11 @@ const StacksTab = ({ visibility }: { visibility: VisibilityLevelEnum }) => {
75
75
  }
76
76
  className="option-list"
77
77
  />}
78
- {!!stacks.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
78
+ {!!stacks.length && !filtered.length &&
79
+ <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder"/>}
79
80
  {!stacks.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
80
81
  </div>
81
- <Button onClick={submit} disabled={!value}>{t.apply}</Button>
82
+ {!!filtered.length && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
82
83
  </>
83
84
  )
84
85
  }
@@ -65,10 +65,11 @@ const WorkspacesPanel = () => {
65
65
  }
66
66
  className="option-list"
67
67
  />}
68
- {!!workspaces.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
68
+ {!!workspaces.length && !filtered.length &&
69
+ <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} className="no-data-placeholder" />}
69
70
  {!workspaces.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
70
71
  </div>
71
- <Button onClick={submit} disabled={!value}>{t.apply}</Button>
72
+ {!!filtered.length && <Button onClick={submit} disabled={!value}>{t.apply}</Button>}
72
73
  </>
73
74
  )
74
75
  }
@@ -1,2 +0,0 @@
1
- export declare const Agents: () => null;
2
- //# sourceMappingURL=Agents.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Agents.d.ts","sourceRoot":"","sources":["../../src/views/Agents.tsx"],"names":[],"mappings":"AAoEA,eAAO,MAAM,MAAM,YAclB,CAAA"}
@@ -1,146 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Button, Text } from '@citric/core';
3
- import { Search } from '@citric/icons';
4
- import { Badge } from '@citric/ui';
5
- import { Placeholder } from '@stack-spot/portal-components/Placeholder';
6
- import { MiniLogo } from '@stack-spot/portal-components/svg';
7
- import { agentClient } from '@stack-spot/portal-network';
8
- import { theme } from '@stack-spot/portal-theme';
9
- import { useTranslate } from '@stack-spot/portal-translate';
10
- import { useEffect, useMemo, useState } from 'react';
11
- import { styled } from 'styled-components';
12
- import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup.js';
13
- import { IconInput } from '../components/IconInput.js';
14
- import { RightPanelTabs } from '../components/RightPanelTabs.js';
15
- import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks.js';
16
- import { useRightPanel } from '../right-panel/hooks.js';
17
- const AgentLabel = styled.div `
18
- display: flex;
19
- flex-direction: row;
20
- align-items: center;
21
- gap: 6px;
22
-
23
- img, svg {
24
- width: 20px;
25
- height: 20px;
26
- border-radius: 50%;
27
- overflow: hidden;
28
- }
29
- `;
30
- const AgentDescription = styled.div `
31
- color: ${theme.color.light[700]};
32
- line-height: 18px;
33
-
34
- section {
35
- border-bottom: 1px solid ${theme.color.light[600]};
36
- padding-bottom: 10px;
37
- margin-bottom: 10px;
38
-
39
- &:last-child {
40
- padding-bottom: 0;
41
- margin-bottom: 0;
42
- border-bottom: none;
43
- }
44
-
45
- .title {
46
- display: block;
47
- margin-bottom: 6px;
48
- }
49
- }
50
-
51
- ul {
52
- padding: 0;
53
- margin: 0;
54
- list-style: none;
55
- display: flex;
56
- flex-direction: row;
57
- flex-wrap: wrap;
58
- white-space: nowrap;
59
- gap: 6px;
60
-
61
- li {
62
- margin: 3px 0;
63
- }
64
- }
65
- `;
66
- export const Agents = () => {
67
- const t = useTranslate(dictionary);
68
- const panel = useWidgetState('panel');
69
- const { open } = useRightPanel();
70
- const widget = useWidget();
71
- useEffect(() => {
72
- if (panel === 'agent')
73
- open(_jsx(AgentsPanel, {}), { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) });
74
- }, [panel, t]);
75
- return null;
76
- };
77
- /**
78
- * Renders the Agent selection form in the Right Panel if this is the panel that is currently opened.
79
- */
80
- const AgentsPanel = () => {
81
- const t = useTranslate(dictionary);
82
- const chat = useCurrentChat();
83
- return _jsx(RightPanelTabs, { tabs: [
84
- { title: t.builtin, content: _jsx(AgentsTab, { visibility: "BUILT-IN" }, "builtin") },
85
- { title: t.personal, content: _jsx(AgentsTab, { visibility: "PERSONAL" }, "personal") },
86
- { title: t.shared, content: _jsx(AgentsTab, { visibility: "SHARED" }, "shared") },
87
- { title: t.account, content: _jsx(AgentsTab, { visibility: "ACCOUNT" }, "account") },
88
- ] }, chat.id);
89
- };
90
- const AgentsTab = ({ visibility }) => {
91
- const t = useTranslate(dictionary);
92
- const { close } = useRightPanel();
93
- const chat = useCurrentChat();
94
- const [filter, setFilter] = useState('');
95
- const defaultAgent = useMemo(() => ({
96
- name: 'Stackspot AI',
97
- description: t.defaultAgentDescription,
98
- llm_config: { model_slug: 'gpt4o' },
99
- }), []);
100
- const agents = visibility === 'BUILT-IN' ? agentClient.publicAgents.useQuery({}) : agentClient.agents.useQuery({ visibility });
101
- const [value, setValue] = useState(agents.find(a => a.id === chat.get('agent')?.id) ?? defaultAgent);
102
- const filtered = useMemo(() => {
103
- const ags = visibility === 'BUILT-IN' ? [defaultAgent, ...agents] : agents;
104
- return filter ? ags.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : ags;
105
- }, [agents, filter, value]);
106
- function submit() {
107
- if (value) {
108
- chat.set('agent', value.id ? { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN' } : undefined);
109
- }
110
- close();
111
- }
112
- return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "content", children: [_jsx(IconInput, { icon: _jsx(Search, {}), value: filter, onChange: setFilter, className: "search" }), !!filtered.length && _jsx(DescribedRadioGroup, { options: filtered, keygen: a => a.id, value: value, onChange: setValue, renderLabel: ({ name, avatar, id }) => (_jsxs(AgentLabel, { children: [id ? (avatar && _jsx("img", { src: avatar })) : _jsx(MiniLogo, {}), _jsx(Text, { children: name })] })), renderDescription: ({ description, llm_config: llmc, knowledge_sources_config: ksc }) => (_jsxs(AgentDescription, { children: [description && _jsxs("section", { children: [_jsx(Text, { appearance: "microtext1", className: "title", children: "Description" }), _jsx(Text, { children: description })] }), !!ksc?.knowledge_sources?.length && _jsxs("section", { children: [_jsx(Text, { appearance: "microtext1", className: "title", children: "Knowledge sources" }), _jsx("ul", { children: ksc.knowledge_sources.map((ks, index) => _jsx("li", { children: _jsx(Badge, { palette: "teal", appearance: "square", children: ks }) }, index)) })] }), llmc?.model_slug && _jsxs("section", { children: [_jsx(Text, { appearance: "microtext1", className: "title", children: "LLM" }), _jsx(Badge, { palette: "orange", appearance: "square", children: llmc.model_slug })] })] })), optionClassName: a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
113
- ? 'filtered-out'
114
- : '', className: "option-list" }), !!agents.length && !filtered.length && _jsx(Placeholder, { title: t.noSearchResults, description: t.noSearchResultsDescription }), !agents.length && _jsx(Placeholder, { title: t.noData, description: t.noDataDescription })] }), _jsx(Button, { onClick: submit, disabled: !value, children: t.apply })] }));
115
- };
116
- const dictionary = {
117
- en: {
118
- title: 'Agents',
119
- description: 'By selecting an Agent, it will be consulted to generate the answers.',
120
- personal: 'Personal',
121
- builtin: 'Built-in',
122
- shared: 'Shared',
123
- account: 'Account',
124
- apply: 'Apply',
125
- noSearchResults: "Your search didn't yield results.",
126
- noSearchResultsDescription: 'Please, try another search term.',
127
- noData: 'There are no agents in this category yet.',
128
- noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new agents.',
129
- defaultAgentDescription: 'The StackSpot CodeGen is an advanced artificial intelligence agent designed to optimize and accelerate software development. Integrated directly into your integrated development environment, StackSpot CodeGen offers real-time code suggestions, helping developers write high-quality code more efficiently. With robust features such as creating Stacks AI, customized knowledge sources, and quick commands, StackSpot CodeGen contextualizes your development needs to provide the best answers and code suggestions.',
130
- },
131
- pt: {
132
- title: 'Agentes',
133
- description: 'Ao selecionar um Agente, ele será consultado para gerar as respostas.',
134
- personal: 'Pessoal',
135
- builtin: 'Embutido',
136
- shared: 'Compartilhado',
137
- account: 'Conta',
138
- apply: 'Aplicar',
139
- noSearchResults: 'Sua busca não produziu resultados.',
140
- noSearchResultsDescription: 'Por favor, tente outra busca.',
141
- noData: 'Ainda não há agentes nesta categoria.',
142
- noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos agentes.',
143
- defaultAgentDescription: 'O StackSpot CodeGen é um agente de inteligência artificial avançado projetado para otimizar e acelerar o desenvolvimento de software. Integrado diretamente ao seu ambiente de desenvolvimento, o StackSpot CodeGen oferece sugestões de código em tempo real, ajudando os desenvolvedores a escreverem código de alta qualidade de forma mais eficiente. Com recursos robustos, como a criação de Stacks AI, Knowledge Sources personalizadas e comandos rápidos, o StackSpot CodeGen contextualiza suas necessidades de desenvolvimento para fornecer as melhores respostas e sugestões de código.',
144
- },
145
- };
146
- //# sourceMappingURL=Agents.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Agents.js","sourceRoot":"","sources":["../../src/views/Agents.tsx"],"names":[],"mappings":"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"}
@@ -1,14 +0,0 @@
1
- interface Props {
2
- /**
3
- * The name of the user currently logged in.
4
- */
5
- username: string;
6
- }
7
- /**
8
- * Renders the default home page for the chat. This shows up when no message has been sent yet.
9
- *
10
- * The home page can be replaced by providing children to the component `StackspotAIWidget`.
11
- */
12
- export declare const Home: ({ username }: Props) => import("react/jsx-runtime").JSX.Element;
13
- export {};
14
- //# sourceMappingURL=Home.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/views/Home.tsx"],"names":[],"mappings":"AASA,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAmCD;;;;GAIG;AACH,eAAO,MAAM,IAAI,iBAAkB,KAAK,4CA2CvC,CAAA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Home.js","sourceRoot":"","sources":["../../src/views/Home.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAS9C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BzB,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC1C,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IAE7B,SAAS,IAAI,CAAC,OAAe;QAC3B,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAA;IACtD,CAAC;IAED,OAAO,CACL,MAAC,OAAO,IAAC,SAAS,EAAC,WAAW,aAC5B,cAAI,SAAS,EAAC,OAAO,aAAE,CAAC,CAAC,KAAK,QAAI,QAAQ,IAAM,EAChD,aAAI,SAAS,EAAC,UAAU,YAAE,CAAC,CAAC,QAAQ,GAAM,EAC1C,eAAK,SAAS,EAAC,WAAW,aACxB,KAAC,gBAAgB,IACf,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,EACvC,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,GAClC,EACF,KAAC,gBAAgB,IACf,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,EACrC,IAAI,EAAE,KAAC,eAAe,KAAG,EACzB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAChC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAC5B,EACF,KAAC,gBAAgB,IACf,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,EACzC,IAAI,EAAE,KAAC,SAAS,KAAG,EACnB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EAChC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAC5B,EACF,KAAC,gBAAgB,IACf,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,EACrC,IAAI,EAAE,KAAC,YAAY,KAAG,EACtB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,EAClC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,GAC9B,IACE,IACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,gGAAgG;QAC1G,eAAe,EAAE,uBAAuB;QACxC,aAAa,EAAE,6BAA6B;QAC5C,iBAAiB,EAAE,qBAAqB;QACxC,aAAa,EAAE,0BAA0B;KAC1C;IACD,EAAE,EAAE;QACF,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,uGAAuG;QACjH,eAAe,EAAE,yBAAyB;QAC1C,aAAa,EAAE,8BAA8B;QAC7C,iBAAiB,EAAE,4BAA4B;QAC/C,aAAa,EAAE,2BAA2B;KAC3C;CACmB,CAAA"}
@@ -1,203 +0,0 @@
1
- import { Button, Text } from '@citric/core'
2
- import { Search } from '@citric/icons'
3
- import { Badge } from '@citric/ui'
4
- import { Placeholder } from '@stack-spot/portal-components/Placeholder'
5
- import { MiniLogo } from '@stack-spot/portal-components/svg'
6
- import { agentClient } from '@stack-spot/portal-network'
7
- import { AgentResponse, VisibilityLevel } from '@stack-spot/portal-network/api/agent'
8
- import { theme } from '@stack-spot/portal-theme'
9
- import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
10
- import { useEffect, useMemo, useState } from 'react'
11
- import { styled } from 'styled-components'
12
- import { DescribedRadioGroup } from '../components/form/DescribedRadioGroup'
13
- import { IconInput } from '../components/IconInput'
14
- import { RightPanelTabs } from '../components/RightPanelTabs'
15
- import { useCurrentChat, useWidget, useWidgetState } from '../context/hooks'
16
- import { useRightPanel } from '../right-panel/hooks'
17
-
18
- const AgentLabel = styled.div`
19
- display: flex;
20
- flex-direction: row;
21
- align-items: center;
22
- gap: 6px;
23
-
24
- img, svg {
25
- width: 20px;
26
- height: 20px;
27
- border-radius: 50%;
28
- overflow: hidden;
29
- }
30
- `
31
-
32
- const AgentDescription = styled.div`
33
- color: ${theme.color.light[700]};
34
- line-height: 18px;
35
-
36
- section {
37
- border-bottom: 1px solid ${theme.color.light[600]};
38
- padding-bottom: 10px;
39
- margin-bottom: 10px;
40
-
41
- &:last-child {
42
- padding-bottom: 0;
43
- margin-bottom: 0;
44
- border-bottom: none;
45
- }
46
-
47
- .title {
48
- display: block;
49
- margin-bottom: 6px;
50
- }
51
- }
52
-
53
- ul {
54
- padding: 0;
55
- margin: 0;
56
- list-style: none;
57
- display: flex;
58
- flex-direction: row;
59
- flex-wrap: wrap;
60
- white-space: nowrap;
61
- gap: 6px;
62
-
63
- li {
64
- margin: 3px 0;
65
- }
66
- }
67
- `
68
-
69
- export const Agents = () => {
70
- const t = useTranslate(dictionary)
71
- const panel = useWidgetState('panel')
72
- const { open } = useRightPanel()
73
- const widget = useWidget()
74
-
75
- useEffect(() => {
76
- if (panel === 'agent') open(
77
- <AgentsPanel />,
78
- { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) },
79
- )
80
- }, [panel, t])
81
-
82
- return null
83
- }
84
-
85
- /**
86
- * Renders the Agent selection form in the Right Panel if this is the panel that is currently opened.
87
- */
88
- const AgentsPanel = () => {
89
- const t = useTranslate(dictionary)
90
- const chat = useCurrentChat()
91
-
92
- return <RightPanelTabs key={chat.id} tabs={[
93
- { title: t.builtin, content: <AgentsTab key="builtin" visibility="BUILT-IN" /> },
94
- { title: t.personal, content: <AgentsTab key="personal" visibility="PERSONAL" /> },
95
- { title: t.shared, content: <AgentsTab key="shared" visibility="SHARED" /> },
96
- { title: t.account, content: <AgentsTab key="account" visibility="ACCOUNT" /> },
97
- ]} />
98
- }
99
-
100
- const AgentsTab = ({ visibility }: { visibility: VisibilityLevel | 'BUILT-IN' }) => {
101
- const t = useTranslate(dictionary)
102
- const { close } = useRightPanel()
103
- const chat = useCurrentChat()
104
- const [filter, setFilter] = useState('')
105
- const defaultAgent = useMemo(() => ({
106
- name: 'Stackspot AI',
107
- description: t.defaultAgentDescription,
108
- llm_config: { model_slug: 'gpt4o' },
109
- } as AgentResponse), [])
110
- const agents = visibility === 'BUILT-IN' ? agentClient.publicAgents.useQuery({}) : agentClient.agents.useQuery({ visibility })
111
- const [value, setValue] = useState<AgentResponse | undefined>(agents.find(a => a.id === chat.get('agent')?.id) ?? defaultAgent)
112
- const filtered = useMemo(
113
- () => {
114
- const ags = visibility === 'BUILT-IN' ? [defaultAgent as AgentResponse, ...agents] : agents
115
- return filter ? ags.filter(a => a === value || a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) : ags
116
- },
117
- [agents, filter, value],
118
- )
119
-
120
- function submit() {
121
- if (value) {
122
- chat.set('agent', value.id ? { id: value.id, label: value.name, image: value.avatar, builtIn: visibility === 'BUILT-IN' } : undefined)
123
- }
124
- close()
125
- }
126
-
127
- return (
128
- <>
129
- <div className="content">
130
- <IconInput icon={<Search />} value={filter} onChange={setFilter} className="search" />
131
- {!!filtered.length && <DescribedRadioGroup
132
- options={filtered}
133
- keygen={a => a.id}
134
- value={value}
135
- onChange={setValue}
136
- renderLabel={({ name, avatar, id }) => (
137
- <AgentLabel>
138
- {id ? (avatar && <img src={avatar} />) : <MiniLogo />}
139
- <Text>{name}</Text>
140
- </AgentLabel>
141
- )}
142
- renderDescription={({ description, llm_config: llmc, knowledge_sources_config: ksc }) => (
143
- <AgentDescription>
144
- {description && <section>
145
- <Text appearance="microtext1" className="title">Description</Text>
146
- <Text>{description}</Text>
147
- </section>}
148
- {!!ksc?.knowledge_sources?.length && <section>
149
- <Text appearance="microtext1" className="title">Knowledge sources</Text>
150
- <ul>
151
- {ksc.knowledge_sources.map((ks, index) => <li key={index}><Badge palette="teal" appearance="square">{ks}</Badge></li>)}
152
- </ul>
153
- </section>}
154
- {llmc?.model_slug && <section>
155
- <Text appearance="microtext1" className="title">LLM</Text>
156
- <Badge palette="orange" appearance="square">{llmc.model_slug}</Badge>
157
- </section>}
158
- </AgentDescription>
159
- )}
160
- optionClassName={a => (a === value && filter && !a.name.toLocaleLowerCase().includes(filter.toLocaleLowerCase()))
161
- ? 'filtered-out'
162
- : ''
163
- }
164
- className="option-list"
165
- />}
166
- {!!agents.length && !filtered.length && <Placeholder title={t.noSearchResults} description={t.noSearchResultsDescription} />}
167
- {!agents.length && <Placeholder title={t.noData} description={t.noDataDescription} />}
168
- </div>
169
- <Button onClick={submit} disabled={!value}>{t.apply}</Button>
170
- </>
171
- )
172
- }
173
-
174
- const dictionary = {
175
- en: {
176
- title: 'Agents',
177
- description: 'By selecting an Agent, it will be consulted to generate the answers.',
178
- personal: 'Personal',
179
- builtin: 'Built-in',
180
- shared: 'Shared',
181
- account: 'Account',
182
- apply: 'Apply',
183
- noSearchResults: "Your search didn't yield results.",
184
- noSearchResultsDescription: 'Please, try another search term.',
185
- noData: 'There are no agents in this category yet.',
186
- noDataDescription: 'Use the tabs above to try other categories or use the AI portal to create new agents.',
187
- defaultAgentDescription: 'The StackSpot CodeGen is an advanced artificial intelligence agent designed to optimize and accelerate software development. Integrated directly into your integrated development environment, StackSpot CodeGen offers real-time code suggestions, helping developers write high-quality code more efficiently. With robust features such as creating Stacks AI, customized knowledge sources, and quick commands, StackSpot CodeGen contextualizes your development needs to provide the best answers and code suggestions.',
188
- },
189
- pt: {
190
- title: 'Agentes',
191
- description: 'Ao selecionar um Agente, ele será consultado para gerar as respostas.',
192
- personal: 'Pessoal',
193
- builtin: 'Embutido',
194
- shared: 'Compartilhado',
195
- account: 'Conta',
196
- apply: 'Aplicar',
197
- noSearchResults: 'Sua busca não produziu resultados.',
198
- noSearchResultsDescription: 'Por favor, tente outra busca.',
199
- noData: 'Ainda não há agentes nesta categoria.',
200
- noDataDescription: 'Use as abas acima para tentar outras categorias ou use o Portal AI para criar novos agentes.',
201
- defaultAgentDescription: 'O StackSpot CodeGen é um agente de inteligência artificial avançado projetado para otimizar e acelerar o desenvolvimento de software. Integrado diretamente ao seu ambiente de desenvolvimento, o StackSpot CodeGen oferece sugestões de código em tempo real, ajudando os desenvolvedores a escreverem código de alta qualidade de forma mais eficiente. Com recursos robustos, como a criação de Stacks AI, Knowledge Sources personalizadas e comandos rápidos, o StackSpot CodeGen contextualiza suas necessidades de desenvolvimento para fornecer as melhores respostas e sugestões de código.',
202
- },
203
- } satisfies Dictionary