@stack-spot/ai-chat-widget 1.20.2-beta.1 → 1.20.2-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app-metadata.json +5 -5
- package/dist/components/ProgressBar.d.ts +1 -5
- package/dist/components/ProgressBar.d.ts.map +1 -1
- package/dist/components/ProgressBar.js +6 -6
- package/dist/components/ProgressBar.js.map +1 -1
- package/dist/layout.css +1 -1
- package/dist/views/MessageInput/ButtonGroup.d.ts +29 -0
- package/dist/views/MessageInput/ButtonGroup.d.ts.map +1 -0
- package/dist/views/MessageInput/ButtonGroup.js +34 -0
- package/dist/views/MessageInput/ButtonGroup.js.map +1 -0
- package/dist/views/MessageInput/InfoBar.d.ts.map +1 -1
- package/dist/views/MessageInput/InfoBar.js +2 -2
- package/dist/views/MessageInput/InfoBar.js.map +1 -1
- package/dist/views/MessageInput/dictionary.js +2 -2
- package/dist/views/MessageInput/dictionary.js.map +1 -1
- package/dist/views/MessageInput/index.d.ts.map +1 -1
- package/dist/views/MessageInput/index.js +8 -4
- package/dist/views/MessageInput/index.js.map +1 -1
- package/dist/views/MessageInput/styled.d.ts +1 -6
- package/dist/views/MessageInput/styled.d.ts.map +1 -1
- package/dist/views/MessageInput/styled.js +9 -49
- package/dist/views/MessageInput/styled.js.map +1 -1
- package/package.json +2 -2
- package/src/app-metadata.json +5 -5
- package/src/components/ProgressBar.tsx +6 -13
- package/src/layout.css +1 -1
- package/src/views/MessageInput/ButtonGroup.tsx +109 -0
- package/src/views/MessageInput/InfoBar.tsx +2 -6
- package/src/views/MessageInput/dictionary.ts +2 -2
- package/src/views/MessageInput/index.tsx +18 -8
- package/src/views/MessageInput/styled.ts +10 -51
- package/dist/views/MessageInput/ButtonBar.d.ts +0 -17
- package/dist/views/MessageInput/ButtonBar.d.ts.map +0 -1
- package/dist/views/MessageInput/ButtonBar.js +0 -16
- package/dist/views/MessageInput/ButtonBar.js.map +0 -1
- package/dist/views/MessageInput/SelectContent.d.ts +0 -2
- package/dist/views/MessageInput/SelectContent.d.ts.map +0 -1
- package/dist/views/MessageInput/SelectContent.js +0 -19
- package/dist/views/MessageInput/SelectContent.js.map +0 -1
- package/src/views/MessageInput/ButtonBar.tsx +0 -55
- package/src/views/MessageInput/SelectContent.tsx +0 -41
package/dist/app-metadata.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/ai-chat-widget",
|
|
3
|
-
"version": "1.20.2-beta.
|
|
4
|
-
"date": "
|
|
3
|
+
"version": "1.20.2-beta.2",
|
|
4
|
+
"date": "Thu May 15 2025 15:36:15 GMT-0300 (Horário Padrão de Brasília)",
|
|
5
5
|
"dependencies": [
|
|
6
6
|
{
|
|
7
7
|
"name": "@stack-spot/app-metadata",
|
|
@@ -93,11 +93,11 @@
|
|
|
93
93
|
},
|
|
94
94
|
{
|
|
95
95
|
"name": "@citric/icons",
|
|
96
|
-
"version": "5.
|
|
96
|
+
"version": "5.11.0(react@18.2.0)"
|
|
97
97
|
},
|
|
98
98
|
{
|
|
99
99
|
"name": "@citric/ui",
|
|
100
|
-
"version": "6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.
|
|
100
|
+
"version": "6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
|
|
101
101
|
},
|
|
102
102
|
{
|
|
103
103
|
"name": "@dagrejs/dagre",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
},
|
|
110
110
|
{
|
|
111
111
|
"name": "@stack-spot/portal-components",
|
|
112
|
-
"version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.
|
|
112
|
+
"version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
115
|
"name": "@stack-spot/portal-network",
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { WithStyle } from '@stack-spot/portal-theme';
|
|
2
2
|
interface Props extends WithStyle {
|
|
3
|
-
/**
|
|
4
|
-
* Apply animation effects to the progress bar.
|
|
5
|
-
*/
|
|
6
|
-
animate?: boolean;
|
|
7
3
|
/**
|
|
8
4
|
* Whether or not the progress bar is visible.
|
|
9
5
|
*/
|
|
@@ -32,6 +28,6 @@ interface Props extends WithStyle {
|
|
|
32
28
|
* A progress bar with indefinite progress report. This renders a narrower bar on top of larger one that animates from the left to the
|
|
33
29
|
* right.
|
|
34
30
|
*/
|
|
35
|
-
export declare const ProgressBar: ({
|
|
31
|
+
export declare const ProgressBar: ({ visible, shimmer, backgroundColor, foregroundColor, shimmerColor, className, style, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
36
32
|
export {};
|
|
37
33
|
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGxE,UAAU,KAAM,SAAQ,SAAS;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAGxE,UAAU,KAAM,SAAQ,SAAS;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAClC;AAqHD;;;GAGG;AACH,eAAO,MAAM,WAAW,4FAQrB,KAAK,4CAmBP,CAAA"}
|
|
@@ -16,7 +16,7 @@ function gradientFromColorArray(colors) {
|
|
|
16
16
|
// the shimmering effect requires more space
|
|
17
17
|
const SHIMMER_PADDING = '10px';
|
|
18
18
|
const Styled = styled.div `
|
|
19
|
-
|
|
19
|
+
margin: 7px 0;
|
|
20
20
|
opacity: 0;
|
|
21
21
|
transition: opacity 0.5s;
|
|
22
22
|
|
|
@@ -100,8 +100,8 @@ const Styled = styled.div `
|
|
|
100
100
|
display: block;
|
|
101
101
|
width: 33%;
|
|
102
102
|
height: 100%;
|
|
103
|
-
background: ${({ $fg
|
|
104
|
-
animation:
|
|
103
|
+
background: ${({ $fg }) => gradientFromColorArray($fg)};
|
|
104
|
+
animation: slide 3s infinite forwards;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
@keyframes slide {
|
|
@@ -118,14 +118,14 @@ const Styled = styled.div `
|
|
|
118
118
|
* A progress bar with indefinite progress report. This renders a narrower bar on top of larger one that animates from the left to the
|
|
119
119
|
* right.
|
|
120
120
|
*/
|
|
121
|
-
export const ProgressBar = ({
|
|
121
|
+
export const ProgressBar = ({ visible = true, shimmer, backgroundColor = shimmer ? 'rgba(255, 255, 255, 0.4)' : theme.color.light[500], foregroundColor = shimmer ? ['#FFF0', '#FFF', '#FFF0'] : theme.color.primary[500], shimmerColor = ['#ff6633', '#d668cd', '#ff6633', '#FFF8', '#299cf4'], className, style, }) => {
|
|
122
122
|
const $bg = Array.isArray(backgroundColor) ? backgroundColor : [backgroundColor];
|
|
123
123
|
const $fg = Array.isArray(foregroundColor) ? foregroundColor : [...$bg, foregroundColor, ...$bg];
|
|
124
124
|
const $shimmer = Array.isArray(shimmerColor) ? shimmerColor : [shimmerColor];
|
|
125
125
|
const progress = _jsx("div", { className: "progress-bar" });
|
|
126
126
|
const result = shimmer
|
|
127
|
-
? (_jsxs("div", { className:
|
|
127
|
+
? (_jsxs("div", { className: "shimmer", children: [_jsx("div", { className: "colors" }), _jsx("div", { className: "progress-glow" }), progress] }))
|
|
128
128
|
: progress;
|
|
129
|
-
return (_jsx(Styled, { className: listToClass([className, visible && 'visible']), style: style, "$fg": $fg, "$bg": $bg, "$shimmer": $shimmer,
|
|
129
|
+
return (_jsx(Styled, { className: listToClass([className, visible && 'visible']), style: style, "$fg": $fg, "$bg": $bg, "$shimmer": $shimmer, children: result }));
|
|
130
130
|
};
|
|
131
131
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,EAAa,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/components/ProgressBar.tsx"],"names":[],"mappings":"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"}
|
package/dist/layout.css
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
interface ButtonGroupProps {
|
|
2
|
+
/**
|
|
3
|
+
* Whether or not the button group is expanded.
|
|
4
|
+
*/
|
|
5
|
+
expanded: boolean;
|
|
6
|
+
/**
|
|
7
|
+
* A function to set the button group as expanded or collapsed.
|
|
8
|
+
*/
|
|
9
|
+
setExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
|
10
|
+
/**
|
|
11
|
+
* Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
|
|
12
|
+
*/
|
|
13
|
+
isLoading: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* A function to run when the send button is clicked.
|
|
16
|
+
*/
|
|
17
|
+
onSend: () => void;
|
|
18
|
+
/**
|
|
19
|
+
* A function to run when the cancel button is clicked.
|
|
20
|
+
*/
|
|
21
|
+
onCancel: () => void;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
|
|
25
|
+
* editor, change the stack, etc.
|
|
26
|
+
*/
|
|
27
|
+
export declare const ButtonGroup: ({ onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export {};
|
|
29
|
+
//# sourceMappingURL=ButtonGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/ButtonGroup.tsx"],"names":[],"mappings":"AAOA,UAAU,gBAAgB;IACxB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,2DAA4D,gBAAgB,4CA0EnG,CAAA"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { ChevronRight, Code, KnowledgeSource, Send, Spaces, Stack, Times } from '@citric/icons';
|
|
3
|
+
import { IconButton } from '@citric/ui';
|
|
4
|
+
import { listToClass } from '@stack-spot/portal-theme';
|
|
5
|
+
import { useEffect, useRef } from 'react';
|
|
6
|
+
import { useCurrentChatState, useWidget } from '../../context/hooks.js';
|
|
7
|
+
import { useMessageInputDictionary } from './dictionary.js';
|
|
8
|
+
/**
|
|
9
|
+
* Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
|
|
10
|
+
* editor, change the stack, etc.
|
|
11
|
+
*/
|
|
12
|
+
export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading }) => {
|
|
13
|
+
const t = useMessageInputDictionary();
|
|
14
|
+
const widget = useWidget();
|
|
15
|
+
const featureButtonsWidth = useRef();
|
|
16
|
+
const featureButtons = useRef(null);
|
|
17
|
+
const features = useCurrentChatState('features');
|
|
18
|
+
const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.editor;
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (!featureButtons.current)
|
|
21
|
+
return;
|
|
22
|
+
const isHidden = featureButtons.current.style.width === '0px';
|
|
23
|
+
featureButtons.current.style.width = 'auto';
|
|
24
|
+
featureButtonsWidth.current = featureButtons.current.clientWidth;
|
|
25
|
+
if (isHidden)
|
|
26
|
+
featureButtons.current.style.width = '0px';
|
|
27
|
+
else
|
|
28
|
+
featureButtons.current.style.width = `${featureButtonsWidth.current}px`;
|
|
29
|
+
},
|
|
30
|
+
// don't use the whole features object here, it would make every chat tab change rerun this effect.
|
|
31
|
+
[features.workspace, features.knowledgeSource, features.stack, features.editor]);
|
|
32
|
+
return (_jsxs("div", { className: "button-group", children: [hasFeatureButtons && _jsxs(_Fragment, { children: [_jsxs("div", { ref: featureButtons, className: listToClass(['feature-buttons', expanded && 'expanded']), style: { width: expanded ? featureButtonsWidth.current : 0 }, children: [features.workspace && (_jsx(IconButton, { "aria-label": t.spot, title: t.spot, onClick: () => widget.set('panel', 'workspace'), children: _jsx(Spaces, {}) })), features.knowledgeSource && (_jsx(IconButton, { "aria-label": t.knowledgeSource, title: t.knowledgeSource, onClick: () => widget.set('panel', 'ks'), children: _jsx(KnowledgeSource, {}) })), features.stack && (_jsx(IconButton, { "aria-label": t.stack, title: t.stack, onClick: () => widget.set('panel', 'stack'), children: _jsx(Stack, {}) })), features.editor && (_jsx(IconButton, { "aria-label": t.code, title: t.code, onClick: () => widget.set('panel', 'editor'), children: _jsx(Code, {}) }))] }), _jsx(IconButton, { title: expanded ? t.collapse : t.expand, className: listToClass(['expand', !expanded && 'collapsed']), "aria-label": expanded ? t.collapse : t.expand, onClick: () => setExpanded(v => !v), children: _jsx(ChevronRight, {}) })] }), isLoading ? (_jsx(IconButton, { "aria-label": t.cancel, onClick: onCancel, className: "send", title: t.cancel, children: _jsx(Times, {}) })) : (_jsx(IconButton, { "aria-label": t.send, onClick: onSend, className: "send", title: t.send, children: _jsx(Send, {}) }))] }));
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=ButtonGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sourceRoot":"","sources":["../../../src/views/MessageInput/ButtonGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBar.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/InfoBar.tsx"],"names":[],"mappings":"AA6BA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,+
|
|
1
|
+
{"version":3,"file":"InfoBar.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/InfoBar.tsx"],"names":[],"mappings":"AA6BA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,+CA0EnB,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Text } from '@citric/core';
|
|
3
|
-
import { TimesMini } from '@citric/icons';
|
|
3
|
+
import { Times, TimesMini } from '@citric/icons';
|
|
4
4
|
import { Badge, IconButton } from '@citric/ui';
|
|
5
5
|
import { loader } from '@monaco-editor/react';
|
|
6
6
|
import { listToClass } from '@stack-spot/portal-theme';
|
|
@@ -49,6 +49,6 @@ export const InfoBar = () => {
|
|
|
49
49
|
const editor = loader.__getMonacoInstance()?.editor;
|
|
50
50
|
editor?.getEditors()[0].setSelection({ startLineNumber: 0, endLineNumber: 0, endColumn: 0, startColumn: 0 });
|
|
51
51
|
}, []);
|
|
52
|
-
return (_jsxs("div", { className: listToClass(['info-bar', visible && 'visible']), children: [_jsx("div", { className: "space" }), _jsxs("div", { className: "content", children: [shouldRenderRemoveAllButton && (_jsx(IconButton, {
|
|
52
|
+
return (_jsxs("div", { className: listToClass(['info-bar', visible && 'visible']), children: [_jsx("div", { className: "space" }), _jsxs("div", { className: "content", children: [shouldRenderRemoveAllButton && (_jsx(IconButton, { "aria-label": t.removeConfig, title: t.removeConfig, onClick: removeAll, children: _jsx(Times, {}) })), _jsx(FadingOverflow, { className: "list-overflow", scroll: "arrows", enableHorizontalScrollWithVerticalWheel: true, children: _jsxs("ul", { children: [currentSelection && (_jsx("li", { children: _jsx(InfoBadge, { label: t.selected, dismiss: t.removeSelection, color: "blue", onDismiss: removeCodeSelection }) })), currentStack && (_jsx("li", { children: _jsx(InfoBadge, { label: currentStack.label, dismiss: t.removeStack, color: "cyan", onDismiss: features.stack ? (() => chat.set('stack', undefined)) : undefined }) })), currentWorkspace && (_jsx("li", { children: _jsx(InfoBadge, { label: currentWorkspace.label, dismiss: t.removeWorkspace, color: "pink", onDismiss: features.workspace ? (() => chat.set('workspace', undefined)) : undefined }) })), ksToRender] }) })] })] }));
|
|
53
53
|
};
|
|
54
54
|
//# sourceMappingURL=InfoBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBar.js","sourceRoot":"","sources":["../../../src/views/MessageInput/InfoBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"InfoBar.js","sourceRoot":"","sources":["../../../src/views/MessageInput/InfoBar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ const dictionary = {
|
|
|
9
9
|
collapse: 'Hide buttons',
|
|
10
10
|
expand: 'Show buttons',
|
|
11
11
|
send: 'Send message',
|
|
12
|
-
placeholder: 'Message to $0
|
|
12
|
+
placeholder: 'Message to $0',
|
|
13
13
|
cancel: 'Cancel',
|
|
14
14
|
removeConfig: 'Remove all the configuration',
|
|
15
15
|
removeStack: 'Stop using the current stack',
|
|
@@ -28,7 +28,7 @@ const dictionary = {
|
|
|
28
28
|
collapse: 'Esconder botões',
|
|
29
29
|
expand: 'Mostrar botões',
|
|
30
30
|
send: 'Enviar mensagem',
|
|
31
|
-
placeholder: 'Mensagem para $0
|
|
31
|
+
placeholder: 'Mensagem para $0',
|
|
32
32
|
cancel: 'Cancelar',
|
|
33
33
|
removeConfig: 'Remover todas as configurações',
|
|
34
34
|
removeStack: 'Parar de usar a stack atual',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/views/MessageInput/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEvE,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,aAAa;QACnB,eAAe,EAAE,0BAA0B;QAC3C,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/views/MessageInput/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEvE,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,aAAa;QACnB,eAAe,EAAE,0BAA0B;QAC3C,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,eAAe;QAC5B,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,8BAA8B;QAC5C,WAAW,EAAE,8BAA8B;QAC3C,eAAe,EAAE,6BAA6B;QAC9C,QAAQ,EAAE,kCAAkC;QAC5C,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,+BAA+B;QAChD,MAAM,EAAE,QAAQ;KACjB;IACD,EAAE,EAAE;QACF,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,wBAAwB;QAC9B,IAAI,EAAE,iBAAiB;QACvB,eAAe,EAAE,8BAA8B;QAC/C,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE,gBAAgB;QACxB,IAAI,EAAE,iBAAiB;QACvB,WAAW,EAAE,kBAAkB;QAC/B,MAAM,EAAE,UAAU;QAClB,YAAY,EAAE,gCAAgC;QAC9C,WAAW,EAAE,6BAA6B;QAC1C,eAAe,EAAE,4BAA4B;QAC7C,QAAQ,EAAE,qCAAqC;QAC/C,QAAQ,EAAE,aAAa;QACvB,eAAe,EAAE,4BAA4B;QAC7C,MAAM,EAAE,SAAS;KAClB;CACmB,CAAA;AAEtB,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,eAAO,MAAM,YAAY,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"AAkBA;;;;GAIG;AACH,eAAO,MAAM,YAAY,+CA2ExB,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { listToClass
|
|
2
|
+
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
3
|
import { interpolate } from '@stack-spot/portal-translate';
|
|
4
4
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { AdaptiveTextArea } from '../../components/AdaptiveTextArea.js';
|
|
@@ -10,7 +10,7 @@ import { ChatEntry } from '../../state/ChatEntry.js';
|
|
|
10
10
|
import { checkIsTrial } from '../../utils/check-is-trial.js';
|
|
11
11
|
import { AgentSelector } from './AgentSelector.js';
|
|
12
12
|
import { ButtonAgent } from './ButtonAgent.js';
|
|
13
|
-
import {
|
|
13
|
+
import { ButtonGroup } from './ButtonGroup.js';
|
|
14
14
|
import { useUserEntryHistoryShortcut } from './chat-entry-history.js';
|
|
15
15
|
import { useMessageInputDictionary } from './dictionary.js';
|
|
16
16
|
import { InfoBar } from './InfoBar.js';
|
|
@@ -24,7 +24,7 @@ import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled.js
|
|
|
24
24
|
export const MessageInput = () => {
|
|
25
25
|
const t = useMessageInputDictionary();
|
|
26
26
|
const [focused, setFocused] = useState(false);
|
|
27
|
-
const [, setExpanded] = useState(true);
|
|
27
|
+
const [expanded, setExpanded] = useState(true);
|
|
28
28
|
const expansionLocked = useRef(false);
|
|
29
29
|
const chat = useCurrentChat();
|
|
30
30
|
const isLoading = useCurrentChatState('isLoading') ?? false;
|
|
@@ -43,6 +43,7 @@ export const MessageInput = () => {
|
|
|
43
43
|
const prompt = code && !quickCommandRegex.test(message) ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message;
|
|
44
44
|
chat.pushMessage(ChatEntry.createUserEntry(prompt, true));
|
|
45
45
|
chat.set('nextMessage', '');
|
|
46
|
+
setFocused(false);
|
|
46
47
|
}, [chat]);
|
|
47
48
|
const onKeyDown = useCallback((event) => {
|
|
48
49
|
if (!event.shiftKey && event.key === 'Enter') {
|
|
@@ -55,6 +56,9 @@ export const MessageInput = () => {
|
|
|
55
56
|
if (!isLoading)
|
|
56
57
|
textAreaRef.current?.focus();
|
|
57
58
|
}, [isLoading]);
|
|
58
|
-
return (_jsxs(MessageInputBox, { "aria-busy": isLoading, className: "message-input",
|
|
59
|
+
return (_jsxs(MessageInputBox, { "aria-busy": isLoading, className: "message-input", children: [_jsx(ProgressBar, { visible: isLoading, shimmer: true }), _jsx(InfoBar, {}), _jsxs("div", { className: "wrapper-action", children: [_jsx(QuickCommandSelector, { inputRef: textAreaRef, isTrial: isTrial }), _jsx(AgentSelector, { inputRef: textAreaRef, isTrial: isTrial }), _jsxs("div", { className: listToClass(['action-box', focused && 'focused', isLoading && 'disabled']), children: [_jsx(ButtonAgent, {}), _jsx(AdaptiveTextArea, { ref: textAreaRef, disabled: isLoading, placeholder: agentLabel && interpolate(t.placeholder, agentLabel), onChange: e => chat.set('nextMessage', e.target.value), value: value, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: onKeyDown, onKeyUp: handleKeyUp, onIncreaseSize: () => setExpanded(false), onResetSize: () => !expansionLocked.current && setExpanded(true), maxHeight: isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT }), _jsx(ButtonGroup, { onSend: onSend, onCancel: () => chat.abort(), expanded: expanded, isLoading: isLoading, setExpanded: (value) => {
|
|
60
|
+
setExpanded(value);
|
|
61
|
+
expansionLocked.current = expanded;
|
|
62
|
+
} })] })] })] }));
|
|
59
63
|
};
|
|
60
64
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/MessageInput/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
export declare const MAX_INPUT_HEIGHT = 300;
|
|
2
2
|
export declare const MIN_INPUT_HEIGHT = 24;
|
|
3
|
-
export declare const
|
|
4
|
-
$inputFocused?: boolean;
|
|
5
|
-
}>> & string;
|
|
6
|
-
export declare const MessageInputBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
7
|
-
$inputFocused?: boolean;
|
|
8
|
-
}>> & string;
|
|
3
|
+
export declare const MessageInputBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
9
4
|
//# sourceMappingURL=styled.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,gBAAgB,KAAK,CAAA;AAElC,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,gBAAgB,KAAK,CAAA;AAElC,eAAO,MAAM,eAAe,wOAwP3B,CAAA"}
|
|
@@ -5,48 +5,13 @@ const INFO_BAR_HEIGHT = 42;
|
|
|
5
5
|
const INFO_BAR_DISPLACEMENT = 4;
|
|
6
6
|
export const MAX_INPUT_HEIGHT = 300;
|
|
7
7
|
export const MIN_INPUT_HEIGHT = 24;
|
|
8
|
-
export const SelectionBarWrapper = styled.div `
|
|
9
|
-
display: inline-flex;
|
|
10
|
-
justify-content: space-between;
|
|
11
|
-
position: relative;
|
|
12
|
-
padding: 8px;
|
|
13
|
-
padding-top: 6px;
|
|
14
|
-
background-color: ${theme.color.light[500]};
|
|
15
|
-
border-bottom-left-radius: 4px;
|
|
16
|
-
border-bottom-right-radius: 4px;
|
|
17
|
-
border: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
|
|
18
|
-
border-top: none;
|
|
19
|
-
.selection-list-content {
|
|
20
|
-
background-color: ${theme.color.light[500]}
|
|
21
|
-
}
|
|
22
|
-
ul {
|
|
23
|
-
list-style: none;
|
|
24
|
-
padding: 0;
|
|
25
|
-
margin: 12px;
|
|
26
|
-
min-width: 225px;
|
|
27
|
-
}
|
|
28
|
-
li {
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
svg {
|
|
31
|
-
width: 16px;
|
|
32
|
-
height: 16px;
|
|
33
|
-
}
|
|
34
|
-
&:hover {
|
|
35
|
-
background-color: ${theme.color.light[600]}
|
|
36
|
-
}
|
|
37
|
-
a:hover {
|
|
38
|
-
background-color: ${theme.color.light[600]}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
`;
|
|
42
8
|
export const MessageInputBox = styled.div `
|
|
43
9
|
display: flex;
|
|
44
10
|
flex-direction: column;
|
|
45
|
-
margin-top: 8px;
|
|
46
11
|
|
|
47
12
|
> .info-bar {
|
|
48
|
-
|
|
49
|
-
|
|
13
|
+
margin-top: 8px;
|
|
14
|
+
margin-bottom: -3px;
|
|
50
15
|
position: relative;
|
|
51
16
|
overflow: hidden;
|
|
52
17
|
|
|
@@ -66,16 +31,14 @@ export const MessageInputBox = styled.div `
|
|
|
66
31
|
top: 0;
|
|
67
32
|
left: 0;
|
|
68
33
|
right: 0;
|
|
69
|
-
|
|
70
|
-
border-top-right-radius: 10px;
|
|
34
|
+
border-top-left-radius: 10px;
|
|
35
|
+
border-top-right-radius: 10px;
|
|
71
36
|
height: ${INFO_BAR_HEIGHT}px;
|
|
72
|
-
padding: 6px
|
|
37
|
+
padding: 6px 4px 0;
|
|
73
38
|
background-color: ${theme.color.light[500]};
|
|
74
39
|
display: flex;
|
|
75
40
|
flex-direction: row;
|
|
76
41
|
gap: 6px;
|
|
77
|
-
border-right: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
|
|
78
|
-
border-left: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
|
|
79
42
|
|
|
80
43
|
.list-overflow {
|
|
81
44
|
max-width: calc(100% - 30px); // close button + gap
|
|
@@ -128,19 +91,16 @@ export const MessageInputBox = styled.div `
|
|
|
128
91
|
flex-direction: row;
|
|
129
92
|
gap: 8px;
|
|
130
93
|
align-items: end;
|
|
131
|
-
border-
|
|
132
|
-
border
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
background-color: ${theme.color.light[500]};
|
|
94
|
+
border-radius: 4px;
|
|
95
|
+
border: 1px solid ${theme.color.light[500]};
|
|
96
|
+
background-color: ${theme.color.light[300]};
|
|
136
97
|
padding: 10px 8px;
|
|
137
98
|
transition: border-color 0.3s, background-color 0.3s;
|
|
138
99
|
|
|
139
100
|
&.focused {
|
|
140
|
-
border:
|
|
101
|
+
border-color: ${theme.color.primary[500]};
|
|
141
102
|
}
|
|
142
103
|
|
|
143
|
-
|
|
144
104
|
&.disabled {
|
|
145
105
|
background-color: ${theme.color.light[500]};
|
|
146
106
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,eAAe,GAAG,EAAE,CAAA;AAC1B,MAAM,qBAAqB,GAAG,CAAC,CAAA;AAC/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;kBAYvB,eAAe,GAAG,qBAAqB;;;;;;;;;;;;;;;;gBAgBzC,eAAe;;0BAEL,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+BtC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0BM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;0BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;wBAKxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;4BAIpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;gBAuBlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;4BAMV,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;4BAItB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;kBAKlC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuD5C,UAAU;;;;;;;;;;;;;;8BAcc,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;8BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;gCAQpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;cAoBpC,gBAAgB;;;;;;;;CAQ7B,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/ai-chat-widget",
|
|
3
|
-
"version": "1.20.2-beta.
|
|
3
|
+
"version": "1.20.2-beta.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"peerDependencies": {
|
|
13
13
|
"@citric/core": "^6.4.0",
|
|
14
14
|
"@stack-spot/portal-components": "^2.22.1",
|
|
15
|
-
"@citric/icons": "^5.
|
|
15
|
+
"@citric/icons": "^5.11.0",
|
|
16
16
|
"@stack-spot/portal-network": "^0.124.0",
|
|
17
17
|
"@citric/ui": "^6.10.2",
|
|
18
18
|
"@stack-spot/portal-theme": "^1.0.0",
|
package/src/app-metadata.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stack-spot/ai-chat-widget",
|
|
3
|
-
"version": "1.20.2-beta.
|
|
4
|
-
"date": "
|
|
3
|
+
"version": "1.20.2-beta.2",
|
|
4
|
+
"date": "Thu May 15 2025 15:36:15 GMT-0300 (Horário Padrão de Brasília)",
|
|
5
5
|
"dependencies": [
|
|
6
6
|
{
|
|
7
7
|
"name": "@stack-spot/app-metadata",
|
|
@@ -93,11 +93,11 @@
|
|
|
93
93
|
},
|
|
94
94
|
{
|
|
95
95
|
"name": "@citric/icons",
|
|
96
|
-
"version": "5.
|
|
96
|
+
"version": "5.11.0(react@18.2.0)"
|
|
97
97
|
},
|
|
98
98
|
{
|
|
99
99
|
"name": "@citric/ui",
|
|
100
|
-
"version": "6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.
|
|
100
|
+
"version": "6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0))"
|
|
101
101
|
},
|
|
102
102
|
{
|
|
103
103
|
"name": "@dagrejs/dagre",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
},
|
|
110
110
|
{
|
|
111
111
|
"name": "@stack-spot/portal-components",
|
|
112
|
-
"version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.
|
|
112
|
+
"version": "2.22.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(@citric/ui@6.10.2(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@citric/icons@5.11.0(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-theme@1.1.0(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
115
|
"name": "@stack-spot/portal-network",
|
|
@@ -2,10 +2,6 @@ import { listToClass, theme, WithStyle } from '@stack-spot/portal-theme'
|
|
|
2
2
|
import { styled } from 'styled-components'
|
|
3
3
|
|
|
4
4
|
interface Props extends WithStyle {
|
|
5
|
-
/**
|
|
6
|
-
* Apply animation effects to the progress bar.
|
|
7
|
-
*/
|
|
8
|
-
animate?: boolean,
|
|
9
5
|
/**
|
|
10
6
|
* Whether or not the progress bar is visible.
|
|
11
7
|
*/
|
|
@@ -46,8 +42,8 @@ function gradientFromColorArray(colors: string[]) {
|
|
|
46
42
|
// the shimmering effect requires more space
|
|
47
43
|
const SHIMMER_PADDING = '10px'
|
|
48
44
|
|
|
49
|
-
const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[]
|
|
50
|
-
|
|
45
|
+
const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[] }>`
|
|
46
|
+
margin: 7px 0;
|
|
51
47
|
opacity: 0;
|
|
52
48
|
transition: opacity 0.5s;
|
|
53
49
|
|
|
@@ -131,8 +127,8 @@ const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[], $a
|
|
|
131
127
|
display: block;
|
|
132
128
|
width: 33%;
|
|
133
129
|
height: 100%;
|
|
134
|
-
background: ${({ $fg
|
|
135
|
-
animation:
|
|
130
|
+
background: ${({ $fg }) => gradientFromColorArray($fg)};
|
|
131
|
+
animation: slide 3s infinite forwards;
|
|
136
132
|
}
|
|
137
133
|
|
|
138
134
|
@keyframes slide {
|
|
@@ -151,7 +147,6 @@ const Styled = styled.div<{ $bg: string[], $fg: string[], $shimmer: string[], $a
|
|
|
151
147
|
* right.
|
|
152
148
|
*/
|
|
153
149
|
export const ProgressBar = ({
|
|
154
|
-
animate,
|
|
155
150
|
visible = true,
|
|
156
151
|
shimmer,
|
|
157
152
|
backgroundColor = shimmer ? 'rgba(255, 255, 255, 0.4)' : theme.color.light[500],
|
|
@@ -166,7 +161,7 @@ export const ProgressBar = ({
|
|
|
166
161
|
const progress = <div className="progress-bar"></div>
|
|
167
162
|
const result = shimmer
|
|
168
163
|
? (
|
|
169
|
-
<div className=
|
|
164
|
+
<div className="shimmer">
|
|
170
165
|
<div className="colors"></div>
|
|
171
166
|
<div className="progress-glow"></div>
|
|
172
167
|
{progress}
|
|
@@ -174,9 +169,7 @@ export const ProgressBar = ({
|
|
|
174
169
|
)
|
|
175
170
|
: progress
|
|
176
171
|
return (
|
|
177
|
-
<Styled
|
|
178
|
-
className={listToClass([className, visible && 'visible'])}
|
|
179
|
-
style={style} $fg={$fg} $bg={$bg} $shimmer={$shimmer} $animate={animate}>
|
|
172
|
+
<Styled className={listToClass([className, visible && 'visible'])} style={style} $fg={$fg} $bg={$bg} $shimmer={$shimmer}>
|
|
180
173
|
{result}
|
|
181
174
|
</Styled>
|
|
182
175
|
)
|
package/src/layout.css
CHANGED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { ChevronRight, Code, KnowledgeSource, Send, Spaces, Stack, Times } from '@citric/icons'
|
|
2
|
+
import { IconButton } from '@citric/ui'
|
|
3
|
+
import { listToClass } from '@stack-spot/portal-theme'
|
|
4
|
+
import { useEffect, useRef } from 'react'
|
|
5
|
+
import { useCurrentChatState, useWidget } from '../../context/hooks'
|
|
6
|
+
import { useMessageInputDictionary } from './dictionary'
|
|
7
|
+
|
|
8
|
+
interface ButtonGroupProps {
|
|
9
|
+
/**
|
|
10
|
+
* Whether or not the button group is expanded.
|
|
11
|
+
*/
|
|
12
|
+
expanded: boolean,
|
|
13
|
+
/**
|
|
14
|
+
* A function to set the button group as expanded or collapsed.
|
|
15
|
+
*/
|
|
16
|
+
setExpanded: React.Dispatch<React.SetStateAction<boolean>>,
|
|
17
|
+
/**
|
|
18
|
+
* Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
|
|
19
|
+
*/
|
|
20
|
+
isLoading: boolean,
|
|
21
|
+
/**
|
|
22
|
+
* A function to run when the send button is clicked.
|
|
23
|
+
*/
|
|
24
|
+
onSend: () => void,
|
|
25
|
+
/**
|
|
26
|
+
* A function to run when the cancel button is clicked.
|
|
27
|
+
*/
|
|
28
|
+
onCancel: () => void,
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Renders the button group at right bottom side of the message input. This includes the send button as well as the buttons to open the
|
|
33
|
+
* editor, change the stack, etc.
|
|
34
|
+
*/
|
|
35
|
+
export const ButtonGroup = ({ onSend, onCancel, expanded, setExpanded, isLoading }: ButtonGroupProps) => {
|
|
36
|
+
const t = useMessageInputDictionary()
|
|
37
|
+
const widget = useWidget()
|
|
38
|
+
const featureButtonsWidth = useRef<number | undefined>()
|
|
39
|
+
const featureButtons = useRef<HTMLDivElement>(null)
|
|
40
|
+
const features = useCurrentChatState('features')
|
|
41
|
+
const hasFeatureButtons = features.workspace || features.knowledgeSource || features.stack || features.editor
|
|
42
|
+
|
|
43
|
+
useEffect(
|
|
44
|
+
() => {
|
|
45
|
+
if (!featureButtons.current) return
|
|
46
|
+
const isHidden = featureButtons.current.style.width === '0px'
|
|
47
|
+
featureButtons.current.style.width = 'auto'
|
|
48
|
+
featureButtonsWidth.current = featureButtons.current.clientWidth
|
|
49
|
+
if (isHidden) featureButtons.current.style.width = '0px'
|
|
50
|
+
else featureButtons.current.style.width = `${featureButtonsWidth.current}px`
|
|
51
|
+
},
|
|
52
|
+
// don't use the whole features object here, it would make every chat tab change rerun this effect.
|
|
53
|
+
[features.workspace, features.knowledgeSource, features.stack, features.editor],
|
|
54
|
+
)
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div className="button-group">
|
|
58
|
+
{hasFeatureButtons && <>
|
|
59
|
+
<div
|
|
60
|
+
ref={featureButtons}
|
|
61
|
+
className={listToClass(['feature-buttons', expanded && 'expanded'])}
|
|
62
|
+
style={{ width: expanded ? featureButtonsWidth.current : 0 }}
|
|
63
|
+
>
|
|
64
|
+
{features.workspace && (
|
|
65
|
+
<IconButton aria-label={t.spot} title={t.spot} onClick={() => widget.set('panel', 'workspace')}>
|
|
66
|
+
<Spaces />
|
|
67
|
+
</IconButton>
|
|
68
|
+
)}
|
|
69
|
+
{features.knowledgeSource && (
|
|
70
|
+
<IconButton
|
|
71
|
+
aria-label={t.knowledgeSource}
|
|
72
|
+
title={t.knowledgeSource}
|
|
73
|
+
onClick={() => widget.set('panel', 'ks')}
|
|
74
|
+
>
|
|
75
|
+
<KnowledgeSource />
|
|
76
|
+
</IconButton>
|
|
77
|
+
)}
|
|
78
|
+
{features.stack && (
|
|
79
|
+
<IconButton aria-label={t.stack} title={t.stack} onClick={() => widget.set('panel', 'stack')}>
|
|
80
|
+
<Stack />
|
|
81
|
+
</IconButton>
|
|
82
|
+
)}
|
|
83
|
+
{features.editor && (
|
|
84
|
+
<IconButton aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')}>
|
|
85
|
+
<Code />
|
|
86
|
+
</IconButton>
|
|
87
|
+
)}
|
|
88
|
+
</div>
|
|
89
|
+
<IconButton
|
|
90
|
+
title={expanded ? t.collapse : t.expand}
|
|
91
|
+
className={listToClass(['expand', !expanded && 'collapsed'])}
|
|
92
|
+
aria-label={expanded ? t.collapse : t.expand}
|
|
93
|
+
onClick={() => setExpanded(v => !v)}
|
|
94
|
+
>
|
|
95
|
+
<ChevronRight />
|
|
96
|
+
</IconButton>
|
|
97
|
+
</>}
|
|
98
|
+
{isLoading ? (
|
|
99
|
+
<IconButton aria-label={t.cancel} onClick={onCancel} className="send" title={t.cancel}>
|
|
100
|
+
<Times />
|
|
101
|
+
</IconButton>
|
|
102
|
+
) : (
|
|
103
|
+
<IconButton aria-label={t.send} onClick={onSend} className="send" title={t.send}>
|
|
104
|
+
<Send />
|
|
105
|
+
</IconButton>
|
|
106
|
+
)}
|
|
107
|
+
</div>
|
|
108
|
+
)
|
|
109
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Text } from '@citric/core'
|
|
2
|
-
import { TimesMini } from '@citric/icons'
|
|
2
|
+
import { Times, TimesMini } from '@citric/icons'
|
|
3
3
|
import { Badge, IconButton } from '@citric/ui'
|
|
4
4
|
import { loader } from '@monaco-editor/react'
|
|
5
5
|
import { ColorPaletteName, listToClass } from '@stack-spot/portal-theme'
|
|
@@ -73,11 +73,7 @@ export const InfoBar = () => {
|
|
|
73
73
|
<div className="space"></div>
|
|
74
74
|
<div className="content">
|
|
75
75
|
{shouldRenderRemoveAllButton && (
|
|
76
|
-
<IconButton
|
|
77
|
-
appearance="square" color="light"
|
|
78
|
-
aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}>
|
|
79
|
-
<TimesMini />
|
|
80
|
-
</IconButton>
|
|
76
|
+
<IconButton aria-label={t.removeConfig} title={t.removeConfig} onClick={removeAll}><Times /></IconButton>
|
|
81
77
|
)}
|
|
82
78
|
<FadingOverflow className="list-overflow" scroll="arrows" enableHorizontalScrollWithVerticalWheel>
|
|
83
79
|
<ul>
|
|
@@ -10,7 +10,7 @@ const dictionary = {
|
|
|
10
10
|
collapse: 'Hide buttons',
|
|
11
11
|
expand: 'Show buttons',
|
|
12
12
|
send: 'Send message',
|
|
13
|
-
placeholder: 'Message to $0
|
|
13
|
+
placeholder: 'Message to $0',
|
|
14
14
|
cancel: 'Cancel',
|
|
15
15
|
removeConfig: 'Remove all the configuration',
|
|
16
16
|
removeStack: 'Stop using the current stack',
|
|
@@ -29,7 +29,7 @@ const dictionary = {
|
|
|
29
29
|
collapse: 'Esconder botões',
|
|
30
30
|
expand: 'Mostrar botões',
|
|
31
31
|
send: 'Enviar mensagem',
|
|
32
|
-
placeholder: 'Mensagem para $0
|
|
32
|
+
placeholder: 'Mensagem para $0',
|
|
33
33
|
cancel: 'Cancelar',
|
|
34
34
|
removeConfig: 'Remover todas as configurações',
|
|
35
35
|
removeStack: 'Parar de usar a stack atual',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { listToClass
|
|
1
|
+
import { listToClass } from '@stack-spot/portal-theme'
|
|
2
2
|
import { interpolate } from '@stack-spot/portal-translate'
|
|
3
3
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
4
4
|
import { AdaptiveTextArea } from '../../components/AdaptiveTextArea'
|
|
@@ -9,7 +9,7 @@ import { ChatEntry } from '../../state/ChatEntry'
|
|
|
9
9
|
import { checkIsTrial } from '../../utils/check-is-trial'
|
|
10
10
|
import { AgentSelector } from './AgentSelector'
|
|
11
11
|
import { ButtonAgent } from './ButtonAgent'
|
|
12
|
-
import {
|
|
12
|
+
import { ButtonGroup } from './ButtonGroup'
|
|
13
13
|
import { useUserEntryHistoryShortcut } from './chat-entry-history'
|
|
14
14
|
import { useMessageInputDictionary } from './dictionary'
|
|
15
15
|
import { InfoBar } from './InfoBar'
|
|
@@ -24,7 +24,7 @@ import { MAX_INPUT_HEIGHT, MessageInputBox, MIN_INPUT_HEIGHT } from './styled'
|
|
|
24
24
|
export const MessageInput = () => {
|
|
25
25
|
const t = useMessageInputDictionary()
|
|
26
26
|
const [focused, setFocused] = useState(false)
|
|
27
|
-
const [, setExpanded] = useState(true)
|
|
27
|
+
const [expanded, setExpanded] = useState(true)
|
|
28
28
|
const expansionLocked = useRef(false)
|
|
29
29
|
const chat = useCurrentChat()
|
|
30
30
|
const isLoading = useCurrentChatState('isLoading') ?? false
|
|
@@ -43,6 +43,7 @@ export const MessageInput = () => {
|
|
|
43
43
|
const prompt = code && !quickCommandRegex.test(message) ? `${message}\n\`\`\`${language}\n${code}\n\`\`\`` : message
|
|
44
44
|
chat.pushMessage(ChatEntry.createUserEntry(prompt, true))
|
|
45
45
|
chat.set('nextMessage', '')
|
|
46
|
+
setFocused(false)
|
|
46
47
|
}, [chat])
|
|
47
48
|
|
|
48
49
|
const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
@@ -59,7 +60,9 @@ export const MessageInput = () => {
|
|
|
59
60
|
}, [isLoading])
|
|
60
61
|
|
|
61
62
|
return (
|
|
62
|
-
<MessageInputBox aria-busy={isLoading} className="message-input"
|
|
63
|
+
<MessageInputBox aria-busy={isLoading} className="message-input">
|
|
64
|
+
<ProgressBar visible={isLoading} shimmer />
|
|
65
|
+
<InfoBar />
|
|
63
66
|
<div className="wrapper-action">
|
|
64
67
|
<QuickCommandSelector inputRef={textAreaRef} isTrial={isTrial} />
|
|
65
68
|
<AgentSelector inputRef={textAreaRef} isTrial={isTrial} />
|
|
@@ -67,6 +70,7 @@ export const MessageInput = () => {
|
|
|
67
70
|
<ButtonAgent />
|
|
68
71
|
<AdaptiveTextArea
|
|
69
72
|
ref={textAreaRef}
|
|
73
|
+
disabled={isLoading}
|
|
70
74
|
placeholder={agentLabel && interpolate(t.placeholder, agentLabel)}
|
|
71
75
|
onChange={e => chat.set('nextMessage', e.target.value)}
|
|
72
76
|
value={value}
|
|
@@ -78,12 +82,18 @@ export const MessageInput = () => {
|
|
|
78
82
|
onResetSize={() => !expansionLocked.current && setExpanded(true)}
|
|
79
83
|
maxHeight={isMinimized ? MIN_INPUT_HEIGHT : MAX_INPUT_HEIGHT}
|
|
80
84
|
/>
|
|
85
|
+
<ButtonGroup
|
|
86
|
+
onSend={onSend}
|
|
87
|
+
onCancel={() => chat.abort()}
|
|
88
|
+
expanded={expanded}
|
|
89
|
+
isLoading={isLoading}
|
|
90
|
+
setExpanded={(value) => {
|
|
91
|
+
setExpanded(value)
|
|
92
|
+
expansionLocked.current = expanded
|
|
93
|
+
}}
|
|
94
|
+
/>
|
|
81
95
|
</div>
|
|
82
96
|
</div>
|
|
83
|
-
<ProgressBar visible={true} animate={isLoading}
|
|
84
|
-
backgroundColor={isLoading || !focused ? theme.color.light[600] : theme.color.primary[500]} />
|
|
85
|
-
<InfoBar />
|
|
86
|
-
<ButtonBar focused={focused} onSend={onSend} isLoading={isLoading} />
|
|
87
97
|
</MessageInputBox>
|
|
88
98
|
)
|
|
89
99
|
}
|
|
@@ -7,49 +7,13 @@ const INFO_BAR_DISPLACEMENT = 4
|
|
|
7
7
|
export const MAX_INPUT_HEIGHT = 300
|
|
8
8
|
export const MIN_INPUT_HEIGHT = 24
|
|
9
9
|
|
|
10
|
-
export const
|
|
11
|
-
display: inline-flex;
|
|
12
|
-
justify-content: space-between;
|
|
13
|
-
position: relative;
|
|
14
|
-
padding: 8px;
|
|
15
|
-
padding-top: 6px;
|
|
16
|
-
background-color: ${theme.color.light[500]};
|
|
17
|
-
border-bottom-left-radius: 4px;
|
|
18
|
-
border-bottom-right-radius: 4px;
|
|
19
|
-
border: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
|
|
20
|
-
border-top: none;
|
|
21
|
-
.selection-list-content {
|
|
22
|
-
background-color: ${theme.color.light[500]}
|
|
23
|
-
}
|
|
24
|
-
ul {
|
|
25
|
-
list-style: none;
|
|
26
|
-
padding: 0;
|
|
27
|
-
margin: 12px;
|
|
28
|
-
min-width: 225px;
|
|
29
|
-
}
|
|
30
|
-
li {
|
|
31
|
-
cursor: pointer;
|
|
32
|
-
svg {
|
|
33
|
-
width: 16px;
|
|
34
|
-
height: 16px;
|
|
35
|
-
}
|
|
36
|
-
&:hover {
|
|
37
|
-
background-color: ${theme.color.light[600]}
|
|
38
|
-
}
|
|
39
|
-
a:hover {
|
|
40
|
-
background-color: ${theme.color.light[600]}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
`
|
|
44
|
-
|
|
45
|
-
export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
|
|
10
|
+
export const MessageInputBox = styled.div`
|
|
46
11
|
display: flex;
|
|
47
12
|
flex-direction: column;
|
|
48
|
-
margin-top: 8px;
|
|
49
13
|
|
|
50
14
|
> .info-bar {
|
|
51
|
-
|
|
52
|
-
|
|
15
|
+
margin-top: 8px;
|
|
16
|
+
margin-bottom: -3px;
|
|
53
17
|
position: relative;
|
|
54
18
|
overflow: hidden;
|
|
55
19
|
|
|
@@ -69,16 +33,14 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
|
|
|
69
33
|
top: 0;
|
|
70
34
|
left: 0;
|
|
71
35
|
right: 0;
|
|
72
|
-
|
|
73
|
-
border-top-right-radius: 10px;
|
|
36
|
+
border-top-left-radius: 10px;
|
|
37
|
+
border-top-right-radius: 10px;
|
|
74
38
|
height: ${INFO_BAR_HEIGHT}px;
|
|
75
|
-
padding: 6px
|
|
39
|
+
padding: 6px 4px 0;
|
|
76
40
|
background-color: ${theme.color.light[500]};
|
|
77
41
|
display: flex;
|
|
78
42
|
flex-direction: row;
|
|
79
43
|
gap: 6px;
|
|
80
|
-
border-right: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
|
|
81
|
-
border-left: 2px solid ${({ $inputFocused }) => theme.color.light[$inputFocused ? 600 : 500]};
|
|
82
44
|
|
|
83
45
|
.list-overflow {
|
|
84
46
|
max-width: calc(100% - 30px); // close button + gap
|
|
@@ -131,19 +93,16 @@ export const MessageInputBox = styled.div<{$inputFocused?: boolean}>`
|
|
|
131
93
|
flex-direction: row;
|
|
132
94
|
gap: 8px;
|
|
133
95
|
align-items: end;
|
|
134
|
-
border-
|
|
135
|
-
border
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
background-color: ${theme.color.light[500]};
|
|
96
|
+
border-radius: 4px;
|
|
97
|
+
border: 1px solid ${theme.color.light[500]};
|
|
98
|
+
background-color: ${theme.color.light[300]};
|
|
139
99
|
padding: 10px 8px;
|
|
140
100
|
transition: border-color 0.3s, background-color 0.3s;
|
|
141
101
|
|
|
142
102
|
&.focused {
|
|
143
|
-
border:
|
|
103
|
+
border-color: ${theme.color.primary[500]};
|
|
144
104
|
}
|
|
145
105
|
|
|
146
|
-
|
|
147
106
|
&.disabled {
|
|
148
107
|
background-color: ${theme.color.light[500]};
|
|
149
108
|
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
interface SelectionBarProps {
|
|
2
|
-
/**
|
|
3
|
-
* A function to run when the send button is clicked.
|
|
4
|
-
*/
|
|
5
|
-
onSend: () => void;
|
|
6
|
-
/**
|
|
7
|
-
* Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
|
|
8
|
-
*/
|
|
9
|
-
isLoading?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
*
|
|
12
|
-
*/
|
|
13
|
-
focused?: boolean;
|
|
14
|
-
}
|
|
15
|
-
export declare const ButtonBar: ({ onSend, isLoading, focused }: SelectionBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export {};
|
|
17
|
-
//# sourceMappingURL=ButtonBar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBar.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/ButtonBar.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IACzB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,SAAS,mCAAoC,iBAAiB,4CA+B1E,CAAA"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Flex } from '@citric/core';
|
|
3
|
-
import { ArrowUp, Code, Stop } from '@citric/icons';
|
|
4
|
-
import { IconButton } from '@citric/ui';
|
|
5
|
-
import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks.js';
|
|
6
|
-
import { useMessageInputDictionary } from './dictionary.js';
|
|
7
|
-
import { SelectContent } from './SelectContent.js';
|
|
8
|
-
import { SelectionBarWrapper } from './styled.js';
|
|
9
|
-
export const ButtonBar = ({ onSend, isLoading, focused }) => {
|
|
10
|
-
const t = useMessageInputDictionary();
|
|
11
|
-
const chat = useCurrentChat();
|
|
12
|
-
const widget = useWidget();
|
|
13
|
-
const features = useCurrentChatState('features');
|
|
14
|
-
return (_jsxs(SelectionBarWrapper, { "$inputFocused": focused, children: [_jsxs(Flex, { children: [_jsx(SelectContent, {}), features.editor && (_jsx(IconButton, { color: "light", appearance: "square", "aria-label": t.code, title: t.code, onClick: () => widget.set('panel', 'editor'), children: _jsx(Code, {}) }))] }), _jsx(Flex, { children: isLoading ? (_jsx(IconButton, { appearance: "square", color: "inverse", "aria-label": t.cancel, onClick: () => chat.abort(), className: "send", title: t.cancel, children: _jsx(Stop, {}) })) : (_jsx(IconButton, { appearance: "square", color: "inverse", "aria-label": t.send, onClick: onSend, className: "send", title: t.send, children: _jsx(ArrowUp, {}) })) })] }));
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=ButtonBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBar.js","sourceRoot":"","sources":["../../../src/views/MessageInput/ButtonBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AACpF,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAiB9C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAqB,EAAE,EAAE;IAC7E,MAAM,CAAC,GAAG,yBAAyB,EAAE,CAAA;IACrC,MAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IAC7B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAA;IAEhD,OAAO,CACL,MAAC,mBAAmB,qBAAgB,OAAO,aACzC,MAAC,IAAI,eACH,KAAC,aAAa,KAAG,EAChB,QAAQ,CAAC,MAAM,IAAI,CAClB,KAAC,UAAU,IAAC,KAAK,EAAC,OAAO,EAAC,UAAU,EAAC,QAAQ,gBAAa,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,YAC3H,KAAC,IAAI,KAAG,GACG,CACd,IACI,EACP,KAAC,IAAI,cACF,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,UAAU,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,gBAAa,CAAC,CAAC,MAAM,EAClE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,MAAM,YAC7D,KAAC,IAAI,KAAG,GACG,CACd,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,gBAAa,CAAC,CAAC,IAAI,EAChE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,IAAI,YAC/C,KAAC,OAAO,KAAG,GACA,CACd,GACI,IACa,CACvB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectContent.d.ts","sourceRoot":"","sources":["../../../src/views/MessageInput/SelectContent.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,aAAa,+CAkCzB,CAAA"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Clip, KnowledgeSource, Spaces, Stack } from '@citric/icons';
|
|
3
|
-
import { IconButton } from '@citric/ui';
|
|
4
|
-
import { SelectionList } from '@stack-spot/portal-components/SelectionList';
|
|
5
|
-
import { useState } from 'react';
|
|
6
|
-
import { useWidget } from '../../context/hooks.js';
|
|
7
|
-
export const SelectContent = () => {
|
|
8
|
-
const widget = useWidget();
|
|
9
|
-
const [visibleMenu, setVisibleMenu] = useState(false);
|
|
10
|
-
return (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "light", appearance: "square", role: "button", title: "title", "data-test-hint": "button-hint", "aria-label": "aria-label", onClick: () => setVisibleMenu(state => !state), children: _jsx(Clip, {}) }), _jsx(SelectionList, { style: {
|
|
11
|
-
position: 'absolute',
|
|
12
|
-
top: '-150px',
|
|
13
|
-
}, id: "teste", visible: visibleMenu, onHide: () => setVisibleMenu(false), items: [
|
|
14
|
-
{ label: 'Knowledge Sources', icon: _jsx(KnowledgeSource, {}), onClick: () => widget.set('panel', 'ks') },
|
|
15
|
-
{ label: 'Stacks AI', icon: _jsx(Stack, {}), onClick: () => widget.set('panel', 'stack') },
|
|
16
|
-
{ label: 'Spots', icon: _jsx(Spaces, {}), onClick: () => widget.set('panel', 'workspace') },
|
|
17
|
-
] })] }));
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=SelectContent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectContent.js","sourceRoot":"","sources":["../../../src/views/MessageInput/SelectContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAA;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAE/C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,8BACE,KAAC,UAAU,IACT,KAAK,EAAC,OAAO,EACb,UAAU,EAAC,QAAQ,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,oBACE,aAAa,gBACjB,YAAY,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,YAC9C,KAAC,IAAI,KAAG,GACG,EACb,KAAC,aAAa,IACZ,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,QAAQ;iBACd,EACD,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACnC,KAAK,EACH;oBACE,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,KAAC,eAAe,KAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE;oBACnG,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,KAAC,KAAK,KAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE;oBACpF,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAC,MAAM,KAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE;iBACtF,GAEH,IACD,CACJ,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { Flex } from '@citric/core'
|
|
2
|
-
import { ArrowUp, Code, Stop } from '@citric/icons'
|
|
3
|
-
import { IconButton } from '@citric/ui'
|
|
4
|
-
import { useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
|
|
5
|
-
import { useMessageInputDictionary } from './dictionary'
|
|
6
|
-
import { SelectContent } from './SelectContent'
|
|
7
|
-
import { SelectionBarWrapper } from './styled'
|
|
8
|
-
|
|
9
|
-
interface SelectionBarProps {
|
|
10
|
-
/**
|
|
11
|
-
* A function to run when the send button is clicked.
|
|
12
|
-
*/
|
|
13
|
-
onSend: () => void,
|
|
14
|
-
/**
|
|
15
|
-
* Whether or not the message is currently being sent. This is used to decide which button to show: send or cancel.
|
|
16
|
-
*/
|
|
17
|
-
isLoading?: boolean,
|
|
18
|
-
/**
|
|
19
|
-
*
|
|
20
|
-
*/
|
|
21
|
-
focused?: boolean,
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export const ButtonBar = ({ onSend, isLoading, focused }: SelectionBarProps) => {
|
|
25
|
-
const t = useMessageInputDictionary()
|
|
26
|
-
const chat = useCurrentChat()
|
|
27
|
-
const widget = useWidget()
|
|
28
|
-
const features = useCurrentChatState('features')
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<SelectionBarWrapper $inputFocused={focused}>
|
|
32
|
-
<Flex>
|
|
33
|
-
<SelectContent />
|
|
34
|
-
{features.editor && (
|
|
35
|
-
<IconButton color="light" appearance="square" aria-label={t.code} title={t.code} onClick={() => widget.set('panel', 'editor')}>
|
|
36
|
-
<Code />
|
|
37
|
-
</IconButton>
|
|
38
|
-
)}
|
|
39
|
-
</Flex>
|
|
40
|
-
<Flex>
|
|
41
|
-
{isLoading ? (
|
|
42
|
-
<IconButton appearance="square" color="inverse" aria-label={t.cancel}
|
|
43
|
-
onClick={() => chat.abort()} className="send" title={t.cancel}>
|
|
44
|
-
<Stop />
|
|
45
|
-
</IconButton>
|
|
46
|
-
) : (
|
|
47
|
-
<IconButton appearance="square" color="inverse" aria-label={t.send}
|
|
48
|
-
onClick={onSend} className="send" title={t.send}>
|
|
49
|
-
<ArrowUp />
|
|
50
|
-
</IconButton>
|
|
51
|
-
)}
|
|
52
|
-
</Flex>
|
|
53
|
-
</SelectionBarWrapper>
|
|
54
|
-
)
|
|
55
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { Clip, KnowledgeSource, Spaces, Stack } from '@citric/icons'
|
|
2
|
-
import { IconButton } from '@citric/ui'
|
|
3
|
-
import { SelectionList } from '@stack-spot/portal-components/SelectionList'
|
|
4
|
-
import { useState } from 'react'
|
|
5
|
-
import { useWidget } from '../../context/hooks'
|
|
6
|
-
|
|
7
|
-
export const SelectContent = () => {
|
|
8
|
-
const widget = useWidget()
|
|
9
|
-
const [visibleMenu, setVisibleMenu] = useState(false)
|
|
10
|
-
|
|
11
|
-
return (
|
|
12
|
-
<>
|
|
13
|
-
<IconButton
|
|
14
|
-
color="light"
|
|
15
|
-
appearance="square"
|
|
16
|
-
role="button"
|
|
17
|
-
title="title"
|
|
18
|
-
data-test-hint="button-hint"
|
|
19
|
-
aria-label="aria-label"
|
|
20
|
-
onClick={() => setVisibleMenu(state => !state)} >
|
|
21
|
-
<Clip />
|
|
22
|
-
</IconButton>
|
|
23
|
-
<SelectionList
|
|
24
|
-
style={{
|
|
25
|
-
position: 'absolute',
|
|
26
|
-
top: '-150px',
|
|
27
|
-
}}
|
|
28
|
-
id="teste"
|
|
29
|
-
visible={visibleMenu}
|
|
30
|
-
onHide={() => setVisibleMenu(false)}
|
|
31
|
-
items={
|
|
32
|
-
[
|
|
33
|
-
{ label: 'Knowledge Sources', icon: <KnowledgeSource />, onClick: () => widget.set('panel', 'ks') },
|
|
34
|
-
{ label: 'Stacks AI', icon: <Stack />, onClick: () => widget.set('panel', 'stack') },
|
|
35
|
-
{ label: 'Spots', icon: <Spaces />, onClick: () => widget.set('panel', 'workspace') },
|
|
36
|
-
]
|
|
37
|
-
}
|
|
38
|
-
/>
|
|
39
|
-
</>
|
|
40
|
-
)
|
|
41
|
-
}
|