Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

chore: remove Unleash AI (#9010)

Browse Source 
https://linear.app/unleash/issue/2-3071/finish-experiment

Removes Unleash AI.

Also removes other related changes made during the experiment
development.
This commit is contained in:
Nuno Góis 2024-12-20 11:02:49 +00:00 committed by GitHub
parent df9292ff53
commit adaf91a791
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 27 additions and 1106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/assets/icons/AI.svg
View File

@ -1,3 +0,0 @@
<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 7V5C19 3.9 18.1 3 17 3H14C14 1.34 12.66 0 11 0C9.34 0 8 1.34 8 3H5C3.9 3 3 3.9 3 5V7C1.34 7 0 8.34 0 10C0 11.66 1.34 13 3 13V17C3 18.1 3.9 19 5 19H17C18.1 19 19 18.1 19 17V13C20.66 13 22 11.66 22 10C22 8.34 20.66 7 19 7ZM17 17H5V5H17V17ZM8 11C7.17 11 6.5 10.33 6.5 9.5C6.5 8.67 7.17 8 8 8C8.83 8 9.5 8.67 9.5 9.5C9.5 10.33 8.83 11 8 11ZM15.5 9.5C15.5 10.33 14.83 11 14 11C13.17 11 12.5 10.33 12.5 9.5C12.5 8.67 13.17 8 14 8C14.83 8 15.5 8.67 15.5 9.5ZM7 13L11 14L15 13C15 13 15.5 14 15 14.5C14.5 15 11 15.5 11 15.5C11 15.5 7.5 15 7 14.5C6.5 14 7 13 7 13Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 687 B

24
frontend/src/assets/img/aiPreview.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

274
frontend/src/component/ai/AIChat.tsx
View File

@ -1,274 +0,0 @@
import { mutate } from 'swr';
import { ReactComponent as AIIcon } from 'assets/icons/AI.svg';
import { IconButton, styled, Tooltip, useMediaQuery } from '@mui/material';
import { useEffect, useRef, useState } from 'react';
import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import {
type ChatMessage,
useAIApi,
} from 'hooks/api/actions/useAIApi/useAIApi';
import { useUiFlag } from 'hooks/useUiFlag';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { AIChatInput } from './AIChatInput';
import { AIChatMessage } from './AIChatMessage';
import { AIChatHeader } from './AIChatHeader';
import { Resizable } from 'component/common/Resizable/Resizable';
import { AIChatDisclaimer } from './AIChatDisclaimer';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import theme from 'themes/theme';
import { Highlight } from 'component/common/Highlight/Highlight';
const AI_ERROR_MESSAGE = {
role: 'assistant',
content: `I'm sorry, I'm having trouble understanding you right now. I've reported the issue to the team. Please try again later.`,
} as const;
type ScrollOptions = ScrollIntoViewOptions & {
onlyIfAtEnd?: boolean;
};
const StyledAIIconContainer = styled('div', {
shouldForwardProp: (prop) => prop !== 'demoStepsVisible',
})<{ demoStepsVisible: boolean }>(({ theme, demoStepsVisible }) => ({
position: 'fixed',
bottom: 20,
right: 20,
...(demoStepsVisible && {
right: 260,
}),
zIndex: theme.zIndex.fab,
animation: 'fadeInBottom 0.5s',
'@keyframes fadeInBottom': {
from: {
opacity: 0,
transform: 'translateY(200px)',
},
to: {
opacity: 1,
transform: 'translateY(0)',
},
},
}));
const StyledAIChatContainer = styled(StyledAIIconContainer, {
shouldForwardProp: (prop) => prop !== 'demoStepsVisible',
})<{ demoStepsVisible: boolean }>(({ demoStepsVisible }) => ({
bottom: 10,
right: 10,
...(demoStepsVisible && {
right: 250,
}),
}));
const StyledResizable = styled(Resizable)(({ theme }) => ({
boxShadow: theme.boxShadows.popup,
borderRadius: theme.shape.borderRadiusLarge,
}));
const StyledAIIconButton = styled(IconButton)(({ theme }) => ({
background:
theme.mode === 'light'
? theme.palette.primary.main
: theme.palette.primary.light,
color: theme.palette.primary.contrastText,
boxShadow: theme.boxShadows.popup,
transition: 'background 0.3s',
'&:hover': {
background: theme.palette.primary.dark,
},
'& > svg': {
width: theme.spacing(3),
height: theme.spacing(3),
},
}));
const StyledChat = styled('div')(({ theme }) => ({
display: 'flex',
flex: 1,
flexDirection: 'column',
overflow: 'hidden',
background: theme.palette.background.paper,
}));
const StyledChatContent = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(2),
paddingBottom: theme.spacing(1),
flex: 1,
overflowY: 'auto',
overflowX: 'hidden',
}));
export const AIChat = () => {
const unleashAIEnabled = useUiFlag('unleashAI');
const demoEnabled = useUiFlag('demo');
const isSmallScreen = useMediaQuery(theme.breakpoints.down(768));
const {
uiConfig: { unleashAIAvailable },
} = useUiConfig();
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const { setToastApiError } = useToast();
const { chat, newChat } = useAIApi();
const { trackEvent } = usePlausibleTracker();
const [messages, setMessages] = useState<ChatMessage[]>([]);
const isAtEndRef = useRef(true);
const chatEndRef = useRef<HTMLDivElement | null>(null);
const scrollToEnd = (options?: ScrollOptions) => {
if (chatEndRef.current) {
const shouldScroll = !options?.onlyIfAtEnd || isAtEndRef.current;
if (shouldScroll) {
chatEndRef.current.scrollIntoView(options);
}
}
};
useEffect(() => {
requestAnimationFrame(() => {
scrollToEnd();
});
const intersectionObserver = new IntersectionObserver(
([entry]) => {
isAtEndRef.current = entry.isIntersecting;
},
{ threshold: 1.0 },
);
if (chatEndRef.current) {
intersectionObserver.observe(chatEndRef.current);
}
return () => {
if (chatEndRef.current) {
intersectionObserver.unobserve(chatEndRef.current);
}
};
}, [open]);
useEffect(() => {
scrollToEnd({ behavior: 'smooth', onlyIfAtEnd: true });
}, [messages]);
const onSend = async (content: string) => {
if (!content.trim() || loading) return;
trackEvent('unleash-ai-chat', {
props: {
eventType: 'send',
},
});
try {
setLoading(true);
setMessages((currentMessages) => [
...currentMessages,
{ role: 'user', content },
]);
const { messages: newMessages } = await chat(content);
mutate(() => true);
setMessages(newMessages);
} catch (error: unknown) {
setMessages((currentMessages) => [
...currentMessages,
AI_ERROR_MESSAGE,
]);
setToastApiError(formatUnknownError(error));
} finally {
setLoading(false);
}
};
const onNewChat = () => {
setMessages([]);
newChat();
};
const demoStepsVisible = demoEnabled && !isSmallScreen;
if (!unleashAIEnabled || !unleashAIAvailable) {
return null;
}
if (!open) {
return (
<StyledAIIconContainer demoStepsVisible={demoStepsVisible}>
<Tooltip arrow title='Unleash AI'>
<Highlight highlightKey='unleashAI'>
<StyledAIIconButton
size='large'
onClick={() => {
trackEvent('unleash-ai-chat', {
props: {
eventType: 'open',
},
});
setOpen(true);
}}
>
<AIIcon />
</StyledAIIconButton>
</Highlight>
</Tooltip>
</StyledAIIconContainer>
);
}
return (
<StyledAIChatContainer demoStepsVisible={demoStepsVisible}>
<Highlight highlightKey='unleashAI'>
<StyledResizable
handlers={['top-left', 'top', 'left']}
minSize={{ width: '270px', height: '250px' }}
maxSize={{ width: '80vw', height: '90vh' }}
defaultSize={{ width: '320px', height: '500px' }}
onResize={() => scrollToEnd({ onlyIfAtEnd: true })}
>
<StyledChat>
<AIChatHeader
onNew={onNewChat}
onClose={() => {
trackEvent('unleash-ai-chat', {
props: {
eventType: 'close',
},
});
setOpen(false);
}}
/>
<StyledChatContent>
<AIChatDisclaimer />
<AIChatMessage from='assistant'>
Hello, how can I assist you?
</AIChatMessage>
{messages.map(({ role, content }, index) => (
<AIChatMessage key={index} from={role}>
{content}
</AIChatMessage>
))}
{loading && (
<AIChatMessage from='assistant'>
_Unleash AI is typing..._
</AIChatMessage>
)}
<div ref={chatEndRef} />
</StyledChatContent>
<AIChatInput
onSend={onSend}
loading={loading}
onHeightChange={() =>
scrollToEnd({ onlyIfAtEnd: true })
}
/>
</StyledChat>
</StyledResizable>
</Highlight>
</StyledAIChatContainer>
);
};

19
frontend/src/component/ai/AIChatDisclaimer.tsx
View File

@ -1,19 +0,0 @@
import { styled } from '@mui/material';
const StyledDisclaimer = styled('aside')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
width: '100%',
color: theme.palette.secondary.dark,
fontSize: theme.fontSizes.smallerBody,
marginBottom: theme.spacing(2),
}));
export const AIChatDisclaimer = () => (
<StyledDisclaimer>
By using this assistant you accept that all data you share in this chat
can be shared with OpenAI
</StyledDisclaimer>
);

64
frontend/src/component/ai/AIChatHeader.tsx
View File

@ -1,64 +0,0 @@
import { IconButton, styled, Tooltip, Typography } from '@mui/material';
import { ReactComponent as AIIcon } from 'assets/icons/AI.svg';
import EditNoteIcon from '@mui/icons-material/EditNote';
import CloseIcon from '@mui/icons-material/Close';
const StyledHeader = styled('div')(({ theme }) => ({
background:
theme.mode === 'light'
? theme.palette.primary.main
: theme.palette.primary.light,
color: theme.palette.primary.contrastText,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: theme.spacing(0.5),
}));
const StyledTitleContainer = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
marginLeft: theme.spacing(1),
}));
const StyledTitle = styled(Typography)({
fontWeight: 'bold',
});
const StyledActionsContainer = styled('div')({
display: 'flex',
alignItems: 'center',
});
const StyledIconButton = styled(IconButton)(({ theme }) => ({
color: theme.palette.primary.contrastText,
}));
interface IAIChatHeaderProps {
onNew: () => void;
onClose: () => void;
}
export const AIChatHeader = ({ onNew, onClose }: IAIChatHeaderProps) => {
return (
<StyledHeader>
<StyledTitleContainer>
<AIIcon />
<StyledTitle>Unleash AI</StyledTitle>
</StyledTitleContainer>
<StyledActionsContainer>
<Tooltip title='New chat' arrow>
<StyledIconButton size='small' onClick={onNew}>
<EditNoteIcon />
</StyledIconButton>
</Tooltip>
<Tooltip title='Close chat' arrow>
<StyledIconButton size='small' onClick={onClose}>
<CloseIcon />
</StyledIconButton>
</Tooltip>
</StyledActionsContainer>
</StyledHeader>
);
};

116
frontend/src/component/ai/AIChatInput.tsx
View File

@ -1,116 +0,0 @@
import { useEffect, useRef, useState } from 'react';
import {
IconButton,
InputAdornment,
styled,
TextField,
Tooltip,
} from '@mui/material';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
const StyledAIChatInputContainer = styled('div')(({ theme }) => ({
background: theme.palette.background.paper,
display: 'flex',
alignItems: 'center',
padding: theme.spacing(1),
paddingTop: 0,
}));
const StyledAIChatInput = styled(TextField)(({ theme }) => ({
margin: theme.spacing(1),
marginTop: 0,
}));
const StyledInputAdornment = styled(InputAdornment)({
marginLeft: 0,
});
const StyledIconButton = styled(IconButton)({
padding: 0,
});
export interface IAIChatInputProps {
onSend: (message: string) => void;
loading: boolean;
onHeightChange?: () => void;
}
export const AIChatInput = ({
onSend,
loading,
onHeightChange,
}: IAIChatInputProps) => {
const [message, setMessage] = useState('');
const inputContainerRef = useRef<HTMLDivElement | null>(null);
const previousHeightRef = useRef<number>(0);
useEffect(() => {
const resizeObserver = new ResizeObserver(([entry]) => {
const newHeight = entry.contentRect.height;
if (newHeight !== previousHeightRef.current) {
previousHeightRef.current = newHeight;
onHeightChange?.();
}
});
if (inputContainerRef.current) {
resizeObserver.observe(inputContainerRef.current);
}
return () => {
if (inputContainerRef.current) {
resizeObserver.unobserve(inputContainerRef.current);
}
};
}, [onHeightChange]);
const send = () => {
if (!message.trim() || loading) return;
onSend(message);
setMessage('');
};
return (
<StyledAIChatInputContainer ref={inputContainerRef}>
<StyledAIChatInput
autoFocus
size='small'
variant='outlined'
placeholder='Type your message here'
fullWidth
multiline
maxRows={5}
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={(e) => {
e.stopPropagation();
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
send();
}
}}
InputProps={{
sx: { paddingRight: 1 },
endAdornment: (
<StyledInputAdornment position='end'>
<Tooltip title='Send message' arrow>
<div>
<StyledIconButton
onClick={send}
size='small'
color='primary'
disabled={!message.trim() || loading}
>
<ArrowUpwardIcon />
</StyledIconButton>
</div>
</Tooltip>
</StyledInputAdornment>
),
}}
/>
</StyledAIChatInputContainer>
);
};

103
frontend/src/component/ai/AIChatMessage.tsx
View File

@ -1,103 +0,0 @@
import { Avatar, styled } from '@mui/material';
import { ReactComponent as AIIcon } from 'assets/icons/AI.svg';
import { Markdown } from 'component/common/Markdown/Markdown';
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import type { ChatMessage } from 'hooks/api/actions/useAIApi/useAIApi';
const StyledMessageContainer = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-start',
gap: theme.spacing(1),
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
'&:first-of-type': {
marginTop: 0,
},
'&:last-of-type': {
marginBottom: 0,
},
wordBreak: 'break-word',
}));
const StyledUserMessageContainer = styled(StyledMessageContainer)({
justifyContent: 'end',
});
const StyledAIMessage = styled('div')(({ theme }) => ({
background: theme.palette.secondary.light,
color: theme.palette.secondary.contrastText,
border: `1px solid ${theme.palette.secondary.border}`,
borderRadius: theme.shape.borderRadius,
display: 'inline-block',
wordWrap: 'break-word',
padding: theme.spacing(0.75),
position: 'relative',
'&::before': {
content: '""',
position: 'absolute',
top: '12px',
left: '-10px',
width: '0',
height: '0',
borderStyle: 'solid',
borderWidth: '5px',
borderColor: `transparent ${theme.palette.secondary.border} transparent transparent`,
},
pre: {
whiteSpace: 'pre-wrap',
},
}));
const StyledUserMessage = styled(StyledAIMessage)(({ theme }) => ({
background: theme.palette.neutral.light,
color: theme.palette.neutral.contrastText,
borderColor: theme.palette.neutral.border,
'&::before': {
left: 'auto',
right: '-10px',
borderColor: `transparent transparent transparent ${theme.palette.neutral.border}`,
},
}));
const StyledAvatar = styled(Avatar)(({ theme }) => ({
width: theme.spacing(4.5),
height: theme.spacing(4.5),
backgroundColor:
theme.mode === 'light'
? theme.palette.primary.main
: theme.palette.primary.light,
color: theme.palette.primary.contrastText,
}));
interface IAIChatMessageProps {
from: ChatMessage['role'];
children: string;
}
export const AIChatMessage = ({ from, children }: IAIChatMessageProps) => {
const { user } = useAuthUser();
if (from === 'user') {
return (
<StyledUserMessageContainer>
<StyledUserMessage>
<Markdown>{children}</Markdown>
</StyledUserMessage>
<StyledAvatar src={user?.imageUrl} />
</StyledUserMessageContainer>
);
}
if (from === 'assistant') {
return (
<StyledMessageContainer>
<StyledAvatar>
<AIIcon />
</StyledAvatar>
<StyledAIMessage>
<Markdown>{children}</Markdown>
</StyledAIMessage>
</StyledMessageContainer>
);
}
};

1
frontend/src/component/common/Highlight/HighlightProvider.tsx
View File

@ -3,7 +3,6 @@ import { HighlightContext } from './HighlightContext';
const defaultState = {
eventTimeline: false,
unleashAI: false,
};
export type HighlightKey = keyof typeof defaultState;

296
frontend/src/component/common/Resizable/Resizable.tsx
View File

@ -1,296 +0,0 @@
import { styled } from '@mui/material';
import { type HTMLAttributes, useRef, useState, type ReactNode } from 'react';
const StyledResizableWrapper = styled('div', {
shouldForwardProp: (prop) => prop !== 'animate',
})<{ animate: boolean }>(({ animate }) => ({
display: 'flex',
position: 'relative',
overflow: 'hidden',
transition: animate ? 'width 0.3s, height 0.3s' : 'none',
}));
const StyledResizeHandle = styled('div')({
position: 'absolute',
background: 'transparent',
zIndex: 1,
'&.top-left': {
top: 0,
left: 0,
cursor: 'nwse-resize',
width: '10px',
height: '10px',
zIndex: 2,
},
'&.top-right': {
top: 0,
right: 0,
cursor: 'nesw-resize',
width: '10px',
height: '10px',
zIndex: 2,
},
'&.bottom-left': {
bottom: 0,
left: 0,
cursor: 'nesw-resize',
width: '10px',
height: '10px',
zIndex: 2,
},
'&.bottom-right': {
bottom: 0,
right: 0,
cursor: 'nwse-resize',
width: '10px',
height: '10px',
zIndex: 2,
},
'&.top': {
top: 0,
left: '50%',
cursor: 'ns-resize',
width: '100%',
height: '5px',
transform: 'translateX(-50%)',
},
'&.right': {
top: '50%',
right: 0,
cursor: 'ew-resize',
width: '5px',
height: '100%',
transform: 'translateY(-50%)',
},
'&.bottom': {
bottom: 0,
left: '50%',
cursor: 'ns-resize',
width: '100%',
height: '5px',
transform: 'translateX(-50%)',
},
'&.left': {
top: '50%',
left: 0,
cursor: 'ew-resize',
width: '5px',
height: '100%',
transform: 'translateY(-50%)',
},
});
type Handler =
| 'top'
| 'right'
| 'bottom'
| 'left'
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right';
type Size = { width: string; height: string };
interface IResizableProps extends HTMLAttributes<HTMLDivElement> {
handlers: Handler[];
minSize: Size;
maxSize: Size;
defaultSize?: Size;
onResize?: () => void;
onResizeEnd?: () => void;
children: ReactNode;
}
export const Resizable = ({
handlers,
minSize,
maxSize,
defaultSize = minSize,
onResize,
onResizeEnd,
children,
...props
}: IResizableProps) => {
const containerRef = useRef<HTMLDivElement | null>(null);
const [currentSize, setCurrentSize] = useState(defaultSize);
const [animate, setAnimate] = useState(false);
const handleResize = (
e: React.MouseEvent<HTMLDivElement>,
direction:
| 'top'
| 'right'
| 'bottom'
| 'left'
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right',
) => {
e.preventDefault();
const chatContainer = containerRef.current;
if (!chatContainer) return;
const startX = e.clientX;
const startY = e.clientY;
const startWidth = chatContainer.offsetWidth;
const startHeight = chatContainer.offsetHeight;
setAnimate(false);
const onMouseMove = (moveEvent: MouseEvent) => {
let newWidth = startWidth;
let newHeight = startHeight;
if (direction.includes('top')) {
newHeight = Math.max(
Number.parseInt(minSize.height),
startHeight - (moveEvent.clientY - startY),
);
}
if (direction.includes('bottom')) {
newHeight = Math.max(
Number.parseInt(minSize.height),
startHeight + (moveEvent.clientY - startY),
);
}
if (direction.includes('left')) {
newWidth = Math.max(
Number.parseInt(minSize.width),
startWidth - (moveEvent.clientX - startX),
);
}
if (direction.includes('right')) {
newWidth = Math.max(
Number.parseInt(minSize.width),
startWidth + (moveEvent.clientX - startX),
);
}
setCurrentSize({
width: `${newWidth}px`,
height: `${newHeight}px`,
});
onResize?.();
};
const onMouseUp = () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
onResizeEnd?.();
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
};
const handleDoubleClick = (direction: Handler) => {
const chatContainer = containerRef.current;
if (!chatContainer) return;
const currentWidth = chatContainer.style.width;
const currentHeight = chatContainer.style.height;
setAnimate(true);
if (direction.includes('top') || direction.includes('bottom')) {
if (currentHeight === maxSize.height) {
chatContainer.style.height = defaultSize.height;
} else {
chatContainer.style.height = maxSize.height;
}
}
if (direction.includes('left') || direction.includes('right')) {
if (currentWidth === maxSize.width) {
chatContainer.style.width = defaultSize.width;
} else {
chatContainer.style.width = maxSize.width;
}
}
onResizeEnd?.();
};
return (
<StyledResizableWrapper
ref={containerRef}
animate={animate}
{...props}
style={{
width: currentSize.width,
height: currentSize.height,
minWidth: minSize.width,
minHeight: minSize.height,
maxWidth: maxSize.width,
maxHeight: maxSize.height,
}}
>
{children}
{handlers.includes('top-left') && (
<StyledResizeHandle
className='top-left'
onMouseDown={(e) => handleResize(e, 'top-left')}
onDoubleClick={() => handleDoubleClick('top-left')}
/>
)}
{handlers.includes('top-right') && (
<StyledResizeHandle
className='top-right'
onMouseDown={(e) => handleResize(e, 'top-right')}
onDoubleClick={() => handleDoubleClick('top-right')}
/>
)}
{handlers.includes('bottom-left') && (
<StyledResizeHandle
className='bottom-left'
onMouseDown={(e) => handleResize(e, 'bottom-left')}
onDoubleClick={() => handleDoubleClick('bottom-left')}
/>
)}
{handlers.includes('bottom-right') && (
<StyledResizeHandle
className='bottom-right'
onMouseDown={(e) => handleResize(e, 'bottom-right')}
onDoubleClick={() => handleDoubleClick('bottom-right')}
/>
)}
{handlers.includes('top') && (
<StyledResizeHandle
className='top'
onMouseDown={(e) => handleResize(e, 'top')}
onDoubleClick={() => handleDoubleClick('top')}
/>
)}
{handlers.includes('right') && (
<StyledResizeHandle
className='right'
onMouseDown={(e) => handleResize(e, 'right')}
onDoubleClick={() => handleDoubleClick('right')}
/>
)}
{handlers.includes('bottom') && (
<StyledResizeHandle
className='bottom'
onMouseDown={(e) => handleResize(e, 'bottom')}
onDoubleClick={() => handleDoubleClick('bottom')}
/>
)}
{handlers.includes('left') && (
<StyledResizeHandle
className='left'
onMouseDown={(e) => handleResize(e, 'left')}
onDoubleClick={() => handleDoubleClick('left')}
/>
)}
</StyledResizableWrapper>
);
};

2
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -17,7 +17,6 @@ import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
import { MainLayoutEventTimeline } from './MainLayoutEventTimeline';
import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
import { AIChat } from 'component/ai/AIChat';
import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash';
interface IMainLayoutProps {
@ -168,7 +167,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
}
/>
</MainLayoutContentWrapper>
<AIChat />
<Footer />
</MainLayoutContainer>
</EventTimelineProvider>

40
frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
View File

@ -21,8 +21,6 @@ import { ReactComponent as SignalsPreview } from 'assets/img/signals.svg';
import LinearScaleIcon from '@mui/icons-material/LinearScale';
import { useNavigate } from 'react-router-dom';
import { ReactComponent as EventTimelinePreview } from 'assets/img/eventTimeline.svg';
import { ReactComponent as AIIcon } from 'assets/icons/AI.svg';
import { ReactComponent as AIPreview } from 'assets/img/aiPreview.svg';
import { useHighlightContext } from 'component/common/Highlight/HighlightContext';
const StyledNewInUnleash = styled('div')(({ theme }) => ({
@ -79,12 +77,6 @@ const StyledLinearScaleIcon = styled(LinearScaleIcon)(({ theme }) => ({
color: theme.palette.primary.main,
}));
const StyledAIIcon = styled(AIIcon)(({ theme }) => ({
'& > path': {
fill: theme.palette.primary.main,
},
}));
interface INewInUnleashProps {
mode?: NavigationMode;
onMiniModeClick?: () => void;
@ -101,13 +93,8 @@ export const NewInUnleash = ({
'new-in-unleash-seen:v1',
new Set(),
);
const {
isOss,
isEnterprise,
uiConfig: { unleashAIAvailable },
} = useUiConfig();
const { isOss, isEnterprise } = useUiConfig();
const signalsEnabled = useUiFlag('signals');
const unleashAIEnabled = useUiFlag('unleashAI');
const items: NewInUnleashItemDetails[] = [
{
@ -176,31 +163,6 @@ export const NewInUnleash = ({
</>
),
},
{
label: 'Unleash AI',
summary:
'Enhance your Unleash experience with the help of the Unleash AI assistant',
icon: <StyledAIIcon />,
preview: <AIPreview />,
onCheckItOut: () => highlight('unleashAI'),
show: Boolean(unleashAIAvailable) && unleashAIEnabled,
beta: true,
longDescription: (
<>
<p>
Meet the Unleash AI assistant, designed to make your
experience with Unleash easier and more intuitive,
whether you're handling tasks or looking for guidance.
</p>
<p>
Start chatting by using the button in the bottom right
corner of the page, and discover all the ways the
Unleash AI assistant can help you.
</p>
</>
),
},
];
const visibleItems = items.filter(

55
frontend/src/hooks/api/actions/useAIApi/useAIApi.ts
View File

@ -1,55 +0,0 @@
import { useState } from 'react';
import useAPI from '../useApi/useApi';
const ENDPOINT = 'api/admin/ai';
export type ChatMessage = {
role: 'system' | 'user' | 'assistant';
content: string;
};
type Chat = {
id: string;
userId: number;
createdAt: string;
messages: ChatMessage[];
};
export const useAIApi = () => {
const { makeRequest, createRequest, errors, loading } = useAPI({
propagateErrors: true,
});
const [chatId, setChatId] = useState<string>();
const chat = async (message: string): Promise<Chat> => {
const requestId = 'chat';
const req = createRequest(
`${ENDPOINT}/chat${chatId ? `/${chatId}` : ''}`,
{
method: 'POST',
body: JSON.stringify({
message,
}),
requestId,
},
);
const response = await makeRequest(req.caller, req.id);
const chat: Chat = await response.json();
setChatId(chat.id);
return chat;
};
const newChat = () => {
setChatId(undefined);
};
return {
chat,
newChat,
errors,
loading,
};
};

1
frontend/src/hooks/usePlausibleTracker.ts
View File

@ -71,7 +71,6 @@ export type CustomEvents =
| 'onboarding'
| 'personal-dashboard'
| 'order-environments'
| 'unleash-ai-chat'
| 'project-navigation'
| 'productivity-report'
| 'release-plans';

2
frontend/src/interfaces/uiConfig.ts
View File

@ -33,7 +33,6 @@ export interface IUiConfig {
resourceLimits: ResourceLimitsSchema;
oidcConfiguredThroughEnv?: boolean;
samlConfiguredThroughEnv?: boolean;
unleashAIAvailable?: boolean;
maxSessionsCount?: number;
}
@ -85,7 +84,6 @@ export type UiFlags = {
manyStrategiesPagination?: boolean;
enableLegacyVariants?: boolean;
flagCreator?: boolean;
unleashAI?: boolean;
releasePlans?: boolean;
'enterprise-payg'?: boolean;
simplifyProjectOverview?: boolean;

27
src/lib/openapi/spec/ai-chat-message-schema.ts
View File

@ -1,27 +0,0 @@
import type { FromSchema } from 'json-schema-to-ts';
export const aiChatMessageSchema = {
$id: '#/components/schemas/aiChatMessageSchema',
type: 'object',
description: 'Describes an Unleash AI chat message.',
additionalProperties: false,
required: ['role', 'content'],
properties: {
role: {
type: 'string',
enum: ['system', 'user', 'assistant'],
description: 'The role of the message sender.',
example: 'user',
},
content: {
type: 'string',
description: 'The message content.',
example: 'What is your purpose?',
},
},
components: {
schemas: {},
},
} as const;
export type AIChatMessageSchema = FromSchema<typeof aiChatMessageSchema>;

20
src/lib/openapi/spec/ai-chat-new-message-schema.ts
View File

@ -1,20 +0,0 @@
import type { FromSchema } from 'json-schema-to-ts';
export const aiChatNewMessageSchema = {
$id: '#/components/schemas/aiChatNewMessageSchema',
type: 'object',
description: 'Describes a new Unleash AI chat message sent by the user.',
required: ['message'],
properties: {
message: {
type: 'string',
description: 'The message content.',
example: 'What is your purpose?',
},
},
components: {
schemas: {},
},
} as const;
export type AIChatNewMessageSchema = FromSchema<typeof aiChatNewMessageSchema>;

45
src/lib/openapi/spec/ai-chat-schema.ts
View File

@ -1,45 +0,0 @@
import type { FromSchema } from 'json-schema-to-ts';
import { aiChatMessageSchema } from './ai-chat-message-schema';
export const aiChatSchema = {
$id: '#/components/schemas/aiChatSchema',
type: 'object',
description: 'Describes an Unleash AI chat.',
additionalProperties: false,
required: ['id', 'userId', 'createdAt', 'messages'],
properties: {
id: {
type: 'string',
pattern: '^[0-9]+$', // BigInt
description:
"The chat's ID. Chat IDs are incrementing integers. In other words, a more recently created chat will always have a higher ID than an older one. This ID is represented as a string since it is a BigInt.",
example: '7',
},
userId: {
type: 'integer',
description: 'The ID of the user that the chat belongs to.',
example: 7,
},
createdAt: {
type: 'string',
format: 'date-time',
description: 'The date and time of when the chat was created.',
example: '2023-12-27T13:37:00+01:00',
},
messages: {
type: 'array',
description:
'The messages exchanged between the user and the Unleash AI.',
items: {
$ref: '#/components/schemas/aiChatMessageSchema',
},
},
},
components: {
schemas: {
aiChatMessageSchema,
},
},
} as const;
export type AIChatSchema = FromSchema<typeof aiChatSchema>;

3
src/lib/openapi/spec/index.ts
View File

@ -14,9 +14,6 @@ export * from './advanced-playground-environment-feature-schema';
export * from './advanced-playground-feature-schema';
export * from './advanced-playground-request-schema';
export * from './advanced-playground-response-schema';
export * from './ai-chat-message-schema';
export * from './ai-chat-new-message-schema';
export * from './ai-chat-schema';
export * from './api-token-schema';
export * from './api-tokens-schema';
export * from './application-environment-instances-schema';

5
src/lib/openapi/spec/ui-config-schema.ts
View File

@ -186,11 +186,6 @@ export const uiConfigSchema = {
'Whether the SAML configuration is set through environment variables or not.',
example: false,
},
unleashAIAvailable: {
type: 'boolean',
description: 'Whether Unleash AI is available.',
example: false,
},
maxSessionsCount: {
type: 'number',
description: 'The maximum number of sessions that a user has.',

1
src/lib/routes/admin-api/config.ts
View File

@ -171,7 +171,6 @@ class ConfigController extends Controller {
disablePasswordAuth,
maintenanceMode,
feedbackUriPath: this.config.feedbackUriPath,
unleashAIAvailable: this.config.openAIAPIKey !== undefined,
maxSessionsCount,
};

5
src/lib/types/experimental.ts
View File

@ -48,7 +48,6 @@ export type IFlagKey =
| 'removeUnsafeInlineStyleSrc'
| 'projectRoleAssignment'
| 'originMiddlewareRequestLogging'
| 'unleashAI'
| 'webhookDomainLogging'
| 'releasePlans'
| 'productivityReportEmail'
@ -243,10 +242,6 @@ const flags: IFlags = {
process.env.UNLEASH_ORIGIN_MIDDLEWARE_REQUEST_LOGGING,
false,
),
unleashAI: parseEnvVarBoolean(
process.env.UNLEASH_EXPERIMENTAL_UNLEASH_AI,
false,
),
webhookDomainLogging: parseEnvVarBoolean(
process.env.UNLEASH_EXPERIMENT_WEBHOOK_DOMAIN_LOGGING,
false,

26
src/migrations/20241220102327-drop-ai-chats.js Normal file
View File

@ -0,0 +1,26 @@
exports.up = function (db, cb) {
db.runSql(
`
DROP INDEX IF EXISTS idx_ai_chats_user_id;
DROP TABLE IF EXISTS ai_chats;
`,
cb,
);
};
exports.down = function (db, cb) {
db.runSql(
`
CREATE TABLE IF NOT EXISTS ai_chats
(
id BIGSERIAL PRIMARY KEY NOT NULL,
user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
messages JSONB NOT NULL
);
CREATE INDEX IF NOT EXISTS idx_ai_chats_user_id ON ai_chats(user_id);
`,
cb,
);
};

1
src/server-dev.ts
View File

@ -49,7 +49,6 @@ process.nextTick(async () => {
enableLegacyVariants: false,
extendedMetrics: true,
originMiddlewareRequestLogging: true,
unleashAI: true,
webhookDomainLogging: true,
releasePlans: false,
simplifyProjectOverview: true,