@sweetoburrito/backstage-plugin-ai-assistant 0.8.1 → 0.9.0
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.esm.js","sources":["../../../src/components/MessageCard/Card.tsx"],"sourcesContent":["import Paper from '@mui/material/Paper';\nimport Box from '@mui/material/Box';\nimport { PropsWithChildren } from 'react';\nimport { useTheme } from '@mui/material/styles';\n\ntype CardProps = PropsWithChildren & {\n role: string;\n};\n\nexport const Card = ({ children, role }: CardProps) => {\n const theme = useTheme();\n return (\n <Paper\n sx={{\n
|
|
1
|
+
{"version":3,"file":"Card.esm.js","sources":["../../../src/components/MessageCard/Card.tsx"],"sourcesContent":["import Paper from '@mui/material/Paper';\nimport Box from '@mui/material/Box';\nimport { PropsWithChildren } from 'react';\nimport { useTheme } from '@mui/material/styles';\n\ntype CardProps = PropsWithChildren & {\n role: string;\n};\n\nexport const Card = ({ children, role }: CardProps) => {\n const theme = useTheme();\n return (\n <Paper\n sx={{\n maxWidth: '70%',\n width: '70%',\n borderRadius: 2,\n border: 'double transparent',\n borderWidth: role !== 'human' ? '2px' : 0,\n backgroundImage: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}), linear-gradient(to right, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n backgroundOrigin: 'border-box',\n backgroundClip: 'content-box, border-box',\n wordBreak: 'break-word',\n }}\n elevation={2}\n >\n <Box p={1}>{children}</Box>\n </Paper>\n );\n};\n"],"names":[],"mappings":";;;;;AASO,MAAM,IAAA,GAAO,CAAC,EAAE,QAAA,EAAU,MAAK,KAAiB;AACrD,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI;AAAA,QACF,QAAA,EAAU,KAAA;AAAA,QACV,KAAA,EAAO,KAAA;AAAA,QACP,YAAA,EAAc,CAAA;AAAA,QACd,MAAA,EAAQ,oBAAA;AAAA,QACR,WAAA,EAAa,IAAA,KAAS,OAAA,GAAU,KAAA,GAAQ,CAAA;AAAA,QACxC,eAAA,EAAiB,mBAAmB,KAAA,CAAM,OAAA,CAAQ,WAAW,KAAK,CAAA,EAAA,EAAK,MAAM,OAAA,CAAQ,UAAA,CAAW,KAAK,CAAA,6BAAA,EAAgC,KAAA,CAAM,QAAQ,OAAA,CAAQ,IAAI,KAAK,KAAA,CAAM,OAAA,CAAQ,UAAU,IAAI,CAAA,CAAA,CAAA;AAAA,QAChM,gBAAA,EAAkB,YAAA;AAAA,QAClB,cAAA,EAAgB,yBAAA;AAAA,QAChB,SAAA,EAAW;AAAA,OACb;AAAA,MACA,SAAA,EAAW,CAAA;AAAA,MAEX,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,CAAA,EAAG,CAAA,EAAI,QAAA,EAAS;AAAA;AAAA,GACvB;AAEJ;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import Markdown from 'react-markdown';
|
|
3
3
|
import { useTheme } from '@mui/material/styles';
|
|
4
|
-
import { useMemo } from 'react';
|
|
4
|
+
import { useState, useMemo } from 'react';
|
|
5
5
|
import { Card } from './Card.esm.js';
|
|
6
6
|
import { FeedbackButtons } from './FeedbackButtons.esm.js';
|
|
7
7
|
import Skeleton from '@mui/material/Skeleton';
|
|
@@ -12,6 +12,7 @@ import AccordionSummary from '@mui/material/AccordionSummary';
|
|
|
12
12
|
import AccordionDetails from '@mui/material/AccordionDetails';
|
|
13
13
|
import Stack from '@mui/material/Stack';
|
|
14
14
|
import Tooltip from '@mui/material/Tooltip';
|
|
15
|
+
import Box from '@mui/material/Box';
|
|
15
16
|
import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
|
|
16
17
|
import ConstructionIcon from '@mui/icons-material/Construction';
|
|
17
18
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
@@ -19,6 +20,14 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
|
19
20
|
const MessageCard = ({ message, loading }) => {
|
|
20
21
|
const { content, role } = message;
|
|
21
22
|
const theme = useTheme();
|
|
23
|
+
const [showFeedback, setShowFeedback] = useState(false);
|
|
24
|
+
const handleFocus = () => setShowFeedback(true);
|
|
25
|
+
const handleBlur = (event) => {
|
|
26
|
+
const nextFocusTarget = event.relatedTarget;
|
|
27
|
+
if (!event.currentTarget.contains(nextFocusTarget)) {
|
|
28
|
+
setShowFeedback(false);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
22
31
|
const hasThinking = useMemo(() => {
|
|
23
32
|
return content.startsWith("<think>");
|
|
24
33
|
}, [content]);
|
|
@@ -112,31 +121,67 @@ const MessageCard = ({ message, loading }) => {
|
|
|
112
121
|
}
|
|
113
122
|
);
|
|
114
123
|
}
|
|
115
|
-
return /* @__PURE__ */
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
124
|
+
return /* @__PURE__ */ jsx(
|
|
125
|
+
Box,
|
|
126
|
+
{
|
|
127
|
+
onMouseEnter: () => setShowFeedback(true),
|
|
128
|
+
onMouseLeave: () => setShowFeedback(false),
|
|
129
|
+
onFocusCapture: handleFocus,
|
|
130
|
+
onBlurCapture: handleBlur,
|
|
131
|
+
sx: {
|
|
132
|
+
display: "flex",
|
|
133
|
+
justifyContent: role === "human" ? "flex-end" : "flex-start",
|
|
134
|
+
width: "100%"
|
|
135
|
+
},
|
|
136
|
+
children: /* @__PURE__ */ jsxs(Card, { role, children: [
|
|
137
|
+
hasThinking && /* @__PURE__ */ jsxs(Accordion, { sx: { paddingX: 1 }, children: [
|
|
138
|
+
/* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, {}), children: thinking && !response ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
|
|
139
|
+
/* @__PURE__ */ jsx(CircularProgress, { size: theme.typography.caption.fontSize }),
|
|
140
|
+
/* @__PURE__ */ jsx(Typography, { variant: "caption", children: "Thinking" })
|
|
141
|
+
] }) : /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "Thought Process" }) }),
|
|
142
|
+
/* @__PURE__ */ jsx(AccordionDetails, { children: thoughtProcess ? /* @__PURE__ */ jsx(Markdown, { children: thoughtProcess }) : /* @__PURE__ */ jsx(
|
|
143
|
+
Skeleton,
|
|
144
|
+
{
|
|
145
|
+
variant: "text",
|
|
146
|
+
height: theme.typography.caption.fontSize,
|
|
147
|
+
width: 40
|
|
148
|
+
}
|
|
149
|
+
) })
|
|
150
|
+
] }),
|
|
151
|
+
message.content ? /* @__PURE__ */ jsx(Markdown, { children: message.content }) : /* @__PURE__ */ jsx(
|
|
152
|
+
Skeleton,
|
|
153
|
+
{
|
|
154
|
+
variant: "text",
|
|
155
|
+
height: theme.typography.caption.fontSize,
|
|
156
|
+
width: 40
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
role === "ai" && /* @__PURE__ */ jsx(
|
|
160
|
+
Box,
|
|
161
|
+
{
|
|
162
|
+
sx: {
|
|
163
|
+
display: "flex",
|
|
164
|
+
justifyContent: "flex-end",
|
|
165
|
+
opacity: showFeedback ? 1 : 0,
|
|
166
|
+
visibility: showFeedback ? "visible" : "hidden",
|
|
167
|
+
pointerEvents: showFeedback ? "auto" : "none",
|
|
168
|
+
mt: 1,
|
|
169
|
+
transition: theme.transitions.create("opacity", {
|
|
170
|
+
duration: theme.transitions.duration.short
|
|
171
|
+
})
|
|
172
|
+
},
|
|
173
|
+
children: /* @__PURE__ */ jsx(
|
|
174
|
+
FeedbackButtons,
|
|
175
|
+
{
|
|
176
|
+
messageId: message.id,
|
|
177
|
+
initialScore: message.score
|
|
178
|
+
}
|
|
179
|
+
)
|
|
180
|
+
}
|
|
181
|
+
)
|
|
182
|
+
] })
|
|
183
|
+
}
|
|
184
|
+
);
|
|
140
185
|
};
|
|
141
186
|
|
|
142
187
|
export { MessageCard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageCard.esm.js","sources":["../../../src/components/MessageCard/MessageCard.tsx"],"sourcesContent":["import type { Message } from '@sweetoburrito/backstage-plugin-ai-assistant-common';\nimport Markdown from 'react-markdown';\nimport { useTheme } from '@mui/material/styles';\nimport { useMemo } from 'react';\nimport { Card } from './Card';\nimport { FeedbackButtons } from './FeedbackButtons';\n\nimport Skeleton from '@mui/material/Skeleton';\nimport Typography from '@mui/material/Typography';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';\nimport ConstructionIcon from '@mui/icons-material/Construction';\n\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nexport type MessageCardProps = {\n message: Message;\n loading: boolean;\n};\n\nexport const MessageCard = ({ message, loading }: MessageCardProps) => {\n const { content, role } = message;\n\n const theme = useTheme();\n\n const hasThinking = useMemo(() => {\n return content.startsWith('<think>');\n }, [content]);\n\n const thinking = useMemo<boolean>(() => {\n return (\n role === 'ai' &&\n content.includes('<think>') &&\n !content.includes('</think>')\n );\n }, [content, role]);\n\n const thoughtProcess = useMemo(() => {\n // Try to match <think>...</think>\n const closedMatch = content.match(/<think>(.*?)<\\/think>/s);\n if (closedMatch) return closedMatch[1].trim();\n\n // If </think> is missing but <think> is present, get everything after <think>\n const openMatch = content.match(/<think>(.*)/s);\n if (openMatch) return openMatch[1].trim();\n\n return '';\n }, [content]);\n\n const response = useMemo<string>(() => {\n if (!hasThinking) {\n return content;\n }\n const [, contentResponse] = content.split('</think>');\n return contentResponse ?? '';\n }, [content, hasThinking]);\n\n if (loading) {\n return (\n <Card role={role}>\n <Skeleton\n variant=\"text\"\n height={theme.typography.body1.fontSize}\n width={210}\n />\n </Card>\n );\n }\n\n if (message.role === 'tool') {\n return (\n <Tooltip\n title={<Markdown>{message.content}</Markdown>}\n placement=\"bottom-start\"\n >\n <Stack\n direction=\"row\"\n spacing={1}\n alignItems=\"end\"\n justifyItems=\"start\"\n >\n <ConstructionIcon />\n <Typography\n variant=\"caption\"\n sx={{ fontStyle: 'italic', color: theme.palette.text.secondary }}\n >\n Used tool{message.metadata.name ? ` ${message.metadata.name}` : ''}{' '}\n to enhance response...\n </Typography>\n </Stack>\n </Tooltip>\n );\n }\n\n if (message.role === 'system') {\n return (\n <Tooltip\n title={<Markdown>{message.content}</Markdown>}\n placement=\"bottom-start\"\n >\n <Stack\n direction=\"row\"\n spacing={1}\n alignItems=\"end\"\n justifyItems=\"start\"\n >\n <SettingsSuggestIcon />\n <Typography\n variant=\"caption\"\n sx={{ fontStyle: 'italic', color: theme.palette.text.secondary }}\n >\n Additional Context Provided\n </Typography>\n </Stack>\n </Tooltip>\n );\n }\n\n return (\n <Card role={role}>\n {hasThinking && (\n <Accordion sx={{ paddingX: 1 }}>\n <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n {thinking && !response ? (\n <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n <CircularProgress size={theme.typography.caption.fontSize} />\n <Typography variant=\"caption\">Thinking</Typography>\n </Stack>\n ) : (\n <Typography variant=\"caption\">Thought Process</Typography>\n )}\n </AccordionSummary>\n <AccordionDetails>\n {thoughtProcess ? (\n <Markdown>{thoughtProcess}</Markdown>\n ) : (\n <Skeleton\n variant=\"text\"\n height={theme.typography.caption.fontSize}\n width={40}\n />\n )}\n </AccordionDetails>\n </Accordion>\n )}\n\n {message.content ? (\n <Markdown>{message.content}</Markdown>\n ) : (\n <Skeleton\n variant=\"text\"\n height={theme.typography.caption.fontSize}\n width={40}\n />\n )}\n {role === 'ai' && (\n <FeedbackButtons messageId={message.id} initialScore={message.score} />\n )}\n </Card>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MessageCard.esm.js","sources":["../../../src/components/MessageCard/MessageCard.tsx"],"sourcesContent":["import type { Message } from '@sweetoburrito/backstage-plugin-ai-assistant-common';\nimport Markdown from 'react-markdown';\nimport { useTheme } from '@mui/material/styles';\nimport { useMemo, useState, type FocusEvent } from 'react';\nimport { Card } from './Card';\nimport { FeedbackButtons } from './FeedbackButtons';\n\nimport Skeleton from '@mui/material/Skeleton';\nimport Typography from '@mui/material/Typography';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Accordion from '@mui/material/Accordion';\nimport AccordionSummary from '@mui/material/AccordionSummary';\nimport AccordionDetails from '@mui/material/AccordionDetails';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Box from '@mui/material/Box';\n\nimport SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';\nimport ConstructionIcon from '@mui/icons-material/Construction';\n\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nexport type MessageCardProps = {\n message: Message;\n loading: boolean;\n};\n\nexport const MessageCard = ({ message, loading }: MessageCardProps) => {\n const { content, role } = message;\n\n const theme = useTheme();\n const [showFeedback, setShowFeedback] = useState(false);\n\n const handleFocus = () => setShowFeedback(true);\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n const nextFocusTarget = event.relatedTarget as Node | null;\n if (!event.currentTarget.contains(nextFocusTarget)) {\n setShowFeedback(false);\n }\n };\n\n const hasThinking = useMemo(() => {\n return content.startsWith('<think>');\n }, [content]);\n\n const thinking = useMemo<boolean>(() => {\n return (\n role === 'ai' &&\n content.includes('<think>') &&\n !content.includes('</think>')\n );\n }, [content, role]);\n\n const thoughtProcess = useMemo(() => {\n // Try to match <think>...</think>\n const closedMatch = content.match(/<think>(.*?)<\\/think>/s);\n if (closedMatch) return closedMatch[1].trim();\n\n // If </think> is missing but <think> is present, get everything after <think>\n const openMatch = content.match(/<think>(.*)/s);\n if (openMatch) return openMatch[1].trim();\n\n return '';\n }, [content]);\n\n const response = useMemo<string>(() => {\n if (!hasThinking) {\n return content;\n }\n const [, contentResponse] = content.split('</think>');\n return contentResponse ?? '';\n }, [content, hasThinking]);\n\n if (loading) {\n return (\n <Card role={role}>\n <Skeleton\n variant=\"text\"\n height={theme.typography.body1.fontSize}\n width={210}\n />\n </Card>\n );\n }\n\n if (message.role === 'tool') {\n return (\n <Tooltip\n title={<Markdown>{message.content}</Markdown>}\n placement=\"bottom-start\"\n >\n <Stack\n direction=\"row\"\n spacing={1}\n alignItems=\"end\"\n justifyItems=\"start\"\n >\n <ConstructionIcon />\n <Typography\n variant=\"caption\"\n sx={{ fontStyle: 'italic', color: theme.palette.text.secondary }}\n >\n Used tool{message.metadata.name ? ` ${message.metadata.name}` : ''}{' '}\n to enhance response...\n </Typography>\n </Stack>\n </Tooltip>\n );\n }\n\n if (message.role === 'system') {\n return (\n <Tooltip\n title={<Markdown>{message.content}</Markdown>}\n placement=\"bottom-start\"\n >\n <Stack\n direction=\"row\"\n spacing={1}\n alignItems=\"end\"\n justifyItems=\"start\"\n >\n <SettingsSuggestIcon />\n <Typography\n variant=\"caption\"\n sx={{ fontStyle: 'italic', color: theme.palette.text.secondary }}\n >\n Additional Context Provided\n </Typography>\n </Stack>\n </Tooltip>\n );\n }\n\n return (\n <Box\n onMouseEnter={() => setShowFeedback(true)}\n onMouseLeave={() => setShowFeedback(false)}\n onFocusCapture={handleFocus}\n onBlurCapture={handleBlur}\n sx={{\n display: 'flex',\n justifyContent: role === 'human' ? 'flex-end' : 'flex-start',\n width: '100%',\n }}\n >\n <Card role={role}>\n {hasThinking && (\n <Accordion sx={{ paddingX: 1 }}>\n <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n {thinking && !response ? (\n <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n <CircularProgress size={theme.typography.caption.fontSize} />\n <Typography variant=\"caption\">Thinking</Typography>\n </Stack>\n ) : (\n <Typography variant=\"caption\">Thought Process</Typography>\n )}\n </AccordionSummary>\n <AccordionDetails>\n {thoughtProcess ? (\n <Markdown>{thoughtProcess}</Markdown>\n ) : (\n <Skeleton\n variant=\"text\"\n height={theme.typography.caption.fontSize}\n width={40}\n />\n )}\n </AccordionDetails>\n </Accordion>\n )}\n\n {message.content ? (\n <Markdown>{message.content}</Markdown>\n ) : (\n <Skeleton\n variant=\"text\"\n height={theme.typography.caption.fontSize}\n width={40}\n />\n )}\n {role === 'ai' && (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'flex-end',\n opacity: showFeedback ? 1 : 0,\n visibility: showFeedback ? 'visible' : 'hidden',\n pointerEvents: showFeedback ? 'auto' : 'none',\n mt: 1,\n transition: theme.transitions.create('opacity', {\n duration: theme.transitions.duration.short,\n }),\n }}\n >\n <FeedbackButtons\n messageId={message.id}\n initialScore={message.score}\n />\n </Box>\n )}\n </Card>\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
|