klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-07 21:29:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the input area only rounded on the top corners when in mobile view

Browse Source 
- Create better styling for the input area buttons, resizing in mobile and creating more even height with a more minimal send button
This commit is contained in:
sabaimran
2024-08-04 18:28:33 +05:30
parent 322fb34d4b
commit 4f2fcc82f0
6 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/interface/web/app/chat/chat.module.css
View File

@@ -16,7 +16,6 @@ div.main {
div.inputBox { div.inputBox {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 16px;
margin-bottom: 20px; margin-bottom: 20px;
gap: 12px; gap: 12px;
padding-left: 20px; padding-left: 20px;

2
src/interface/web/app/chat/page.tsx
View File

@@ -86,7 +86,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
incomingMessages={props.streamedMessages} incomingMessages={props.streamedMessages}
/> />
</div> </div>
<div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3 dark:bg-neutral-700 dark:border-0 dark:shadow-sm`}> <div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3 dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}>
<ChatInputArea <ChatInputArea
agentColor={agentMetadata?.color} agentColor={agentMetadata?.color}
isLoggedIn={props.isLoggedIn} isLoggedIn={props.isLoggedIn}

2
src/interface/web/app/common/colorUtils.ts
View File

@@ -33,7 +33,7 @@ export function convertToBGGradientClass(color: string) {
export function convertToBGClass(color: string) { export function convertToBGClass(color: string) {
if (tailwindColors.includes(color)) { if (tailwindColors.includes(color)) {
return `bg-${color}-500 dark:bg-${color}-900`; return `bg-${color}-500 dark:bg-${color}-900 hover:bg-${color}-400 dark:hover:bg-${color}-800`;
} }
return `bg-background`; return `bg-background`;
} }

11
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View File

@@ -9,6 +9,7 @@ import 'katex/dist/katex.min.css';
import { import {
ArrowCircleUp, ArrowCircleUp,
ArrowRight, ArrowRight,
ArrowUp,
Browser, Browser,
ChatsTeardrop, ChatsTeardrop,
GlobeSimple, GlobeSimple,
@@ -372,7 +373,7 @@ export default function ChatInputArea(props: ChatInputProps) {
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500" className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
disabled={props.sendDisabled} disabled={props.sendDisabled}
onClick={handleFileButtonClick}> onClick={handleFileButtonClick}>
<Paperclip className='w-8 h-8' /> <Paperclip className='w-6 h-6 md:w-8 md:h-8' />
</Button> </Button>
<div className="grid w-full gap-1.5 relative"> <div className="grid w-full gap-1.5 relative">
<Textarea <Textarea
@@ -404,7 +405,7 @@ export default function ChatInputArea(props: ChatInputProps) {
}} }}
disabled={props.sendDisabled} disabled={props.sendDisabled}
> >
<Stop weight='fill' className='w-8 h-8' /> <Stop weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@@ -429,7 +430,7 @@ export default function ChatInputArea(props: ChatInputProps) {
}} }}
disabled={props.sendDisabled} disabled={props.sendDisabled}
> >
<Microphone weight='fill' className='w-8 h-8' /> <Microphone weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@@ -440,10 +441,10 @@ export default function ChatInputArea(props: ChatInputProps) {
) )
} }
<Button <Button
className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-0 mr-1 h-auto text-3xl transition transform hover:-translate-y-1`} className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 h-auto text-3xl transition transform hover:-translate-y-1`}
onClick={onSendMessage} onClick={onSendMessage}
disabled={props.sendDisabled}> disabled={props.sendDisabled}>
<ArrowCircleUp className='w-8 h-8' /> <ArrowUp className='w-4 h-4 md:w-6 md:h-6' weight='bold' />
</Button> </Button>
</div > </div >
</> </>

1
src/interface/web/app/page.module.css
View File

@@ -13,7 +13,6 @@ div.suggestions {
div.inputBox { div.inputBox {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 16px;
margin-bottom: 20px; margin-bottom: 20px;
align-content: center; align-content: center;
} }

8
src/interface/web/app/page.tsx
View File

@@ -6,7 +6,7 @@ import 'katex/dist/katex.min.css';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import useSWR from 'swr'; import useSWR from 'swr';
import Image from 'next/image'; import Image from 'next/image';
import { ClockCounterClockwise } from '@phosphor-icons/react'; import { ArrowCounterClockwise, ClockCounterClockwise } from '@phosphor-icons/react';
import { Card, CardTitle } from '@/components/ui/card'; import { Card, CardTitle } from '@/components/ui/card';
import SuggestionCard from '@/app/components/suggestions/suggestionCard'; import SuggestionCard from '@/app/components/suggestions/suggestionCard';
@@ -187,7 +187,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
<div className={`ml-auto mr-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}> <div className={`ml-auto mr-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}>
{ {
!props.isMobileWidth && !props.isMobileWidth &&
<div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none`}> <div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none rounded-2xl`}>
<ChatInputArea <ChatInputArea
isLoggedIn={props.isLoggedIn} isLoggedIn={props.isLoggedIn}
sendMessage={(message) => setMessage(message)} sendMessage={(message) => setMessage(message)}
@@ -225,14 +225,14 @@ function ChatBodyData(props: ChatBodyDataProps) {
<button <button
onClick={shuffleSuggestionsCards} onClick={shuffleSuggestionsCards}
className="m-2 p-1.5 rounded-lg dark:hover:bg-[var(--background-color)] hover:bg-stone-100 border border-stone-100 text-sm text-stone-500 dark:text-stone-300 dark:border-neutral-700"> className="m-2 p-1.5 rounded-lg dark:hover:bg-[var(--background-color)] hover:bg-stone-100 border border-stone-100 text-sm text-stone-500 dark:text-stone-300 dark:border-neutral-700">
More Ideas <ClockCounterClockwise className='h-4 w-4 inline' /> More Ideas <ArrowCounterClockwise className='h-4 w-4 inline' />
</button> </button>
</div> </div>
</div> </div>
{ {
props.isMobileWidth && props.isMobileWidth &&
<> <>
<div className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] shadow-[0_-8px_10px_-6px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1`}> <div className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1 rounded-t-2xl rounded-b-none`}>
<div className="flex gap-2 items-center justify-left pt-1 pb-2 px-10"> <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-10">
{agentIcons.map((icon, index) => ( {agentIcons.map((icon, index) => (
<Card <Card