-
Notifications
You must be signed in to change notification settings - Fork 907
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Looking for ideas on how to do UI customizations #1384
Comments
You can disable the 50% border-radius on starter icons in the
This approach allows you to make minor UI customizations without altering the upstream codebase or using cumbersome methods like forking or monkey patching [1][2]. |
@dosu custom CSS is a good thought. But how do I add a class to that starte-icon element without forking or monkey patching? |
To add a class to the import { useCallback, useContext } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { Box, Button, Stack, Typography } from '@mui/material';
import {
ChainlitContext,
IStarter,
IStep,
useAuth,
useChatData
} from '@chainlit/react-client';
import { useChatInteract } from '@chainlit/react-client';
interface Props {
starter: IStarter;
}
export default function Starter({ starter }: Props) {
const apiClient = useContext(ChainlitContext);
const { sendMessage } = useChatInteract();
const { loading } = useChatData();
const { user } = useAuth();
const onSubmit = useCallback(async () => {
const message: IStep = {
threadId: '',
id: uuidv4(),
name: user?.identifier || 'User',
type: 'user_message',
output: starter.message,
createdAt: new Date().toISOString()
};
sendMessage(message, []);
}, [user, sendMessage, starter]);
return (
<Button
id={`starter-${starter.label.trim().toLowerCase().replaceAll(' ', '-')}`}
fullWidth
disabled={loading}
color="inherit"
sx={{
border: (theme) => `1px solid ${theme.palette.divider}`,
borderRadius: '1rem',
height: 100,
p: 2,
textTransform: 'none',
justifyContent: 'flex-start'
}}
onClick={onSubmit}
>
<Stack gap={0.5} flexGrow={1} height="100%">
{starter.icon ? (
<img
className="starter-icon"
style={{ borderRadius: '50%' }}
src={
starter.icon?.startsWith('/public')
? apiClient.buildEndpoint(starter.icon)
: starter.icon
}
alt={starter.label}
height={20}
width={20}
/>
) : (
<Box sx={{ height: 20, width: 20 }} />
)}
<Typography
sx={{
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitLineClamp: '2',
WebkitBoxOrient: 'vertical',
fontSize: '14px'
}}
color="text.secondary"
align="left"
>
{starter.label}
</Typography>
</Stack>
</Button>
);
} In this code, the [UI]
# This can either be a css file in your `public` dir or a URL
custom_css = '/public/stylesheet.css' After updating the configuration, restart the application to apply your custom styling. This approach allows you to style the |
The 50% radius on this line is a bit of an annoyance for me, It clips starter icons that don't fit neatly in the middle
chainlit/frontend/src/components/organisms/chat/welcomeScreen/starter.tsx
Line 57 in 1c5098c
Example:
While there are workarounds like,
I would prefer to disable the rounded corners. This is a style choice and it doesn't make sense to make a change in the upstream project. What are my remaining choices?
Anyone have better ways to inject minor UI customizations into Chainlit UI?
The text was updated successfully, but these errors were encountered: