sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve styling of chat input, references UI across screen sizes

Browse source 
Use tailwind screen breakpoints shorthand instead of js to apply
different styling for different screen sizes
This commit is contained in:
Debanjum Singh Solanky 2024-07-13 19:09:25 +05:30
parent 2668e42e7f
commit d51011314f
4 changed files with 12 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View file

@ -287,7 +287,7 @@ export default function ChatInputArea(props: ChatInputProps) {
</Button>
<div className="grid w-full gap-1.5 relative">
<Textarea
className='border-none w-full h-16 min-h-16 py-4 rounded-lg text-lg'
className='border-none w-full h-16 min-h-16 md:py-4 rounded-lg text-lg'
placeholder="Type / to see a list of commands"
id="message"
value={message}

17
src/interface/web/app/components/chatMessage/chatMessage.module.css
View file

@ -3,12 +3,13 @@ div.chatMessageContainer {
flex-direction: column;
margin: 12px;
border-radius: 16px;
padding: 16px;
padding: 8px 16px 0 16px;
box-shadow: 0 4px 10px var(--box-shadow-color)
}
div.chatMessageWrapper {
padding-left: 24px;
padding-left: 1rem;
padding-bottom: 1rem;
}
div.chatMessageWrapper p:not(:last-child) {
margin-bottom: 16px;
@ -20,7 +21,7 @@ div.khojfullHistory {
}
div.youfullHistory {
max-width: 80%;
max-width: 100%;
}
div.chatMessageContainer.youfullHistory {
@ -71,10 +72,11 @@ div.chatFooter {
div.chatButtons {
display: flex;
justify-content: flex-end;
width: min-content;
border: var(--border-color) 1px solid;
border-radius: 16px;
position: relative;
bottom: -28px;
bottom: -12px;
background-color: hsla(var(--secondary));
box-shadow: 0 4px 10px var(--box-shadow-color);
}
@ -124,11 +126,6 @@ div.trainOfThought.primary p {
@media screen and (max-width: 768px) {
div.youfullHistory {
max-width: 100%;
max-width: 90%;
}
div.chatMessageWrapper {
padding-left: 8px;
}
}

2
src/interface/web/app/components/chatMessage/chatMessage.tsx
View file

@ -351,7 +351,7 @@ export default function ChatMessage(props: ChatMessageProps) {
isHovering &&
(
<>
<div title={formatDate(props.chatMessage.created)} className={`text-gray-400 relative top-2 left-2`}>
<div title={formatDate(props.chatMessage.created)} className={`text-gray-400 relative top-0 left-4`}>
{renderTimeStamp(props.chatMessage.created)}
</div>
<div className={styles.chatButtons}>

6
src/interface/web/app/components/referencePanel/referencePanel.tsx
View file

@ -276,14 +276,14 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
}
return (
<div className={`${props.isMobileWidth ? 'p-0' : 'p-4'}`}>
<div className="pt-0 px-4 pb-4 md:px-6">
<h3 className="inline-flex items-center">
References
<p className="text-gray-400 m-2">
{numReferences} sources
</p>
</h3>
<div className={`flex ${props.isMobileWidth ? 'w-[90vw]' : 'w-auto'} space-x-4 mt-2`}>
<div className={`flex sm:w-[90vw] md:w-auto space-x-4 mt-2`}>
{
notesDataToShow.map((note, index) => {
return <NotesContextReferenceCard showFullContent={false} {...note} key={`${note.title}-${index}`} />
@ -320,7 +320,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
return (
<Sheet>
<SheetTrigger
className='text-balance w-[200px] overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle justify-center items-center !m-0 inline-flex'>
className='text-balance w-[200px] flex sm:justify-start md:justify-center overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center !m-0 inline-flex'>
View references <ArrowRight className='m-1' />
</SheetTrigger>
<SheetContent className="overflow-y-scroll">