sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 17:35:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make cursor in chat input take on selected agent color

Browse source
This commit is contained in:
Debanjum 2024-10-28 16:26:23 -07:00
parent 1448b8b3fc
commit 2ac840e3f2
3 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/interface/web/app/common/colorUtils.ts
View file

@ -42,6 +42,13 @@ export function converColorToBgGradient(color: string) {
return `${convertToBGGradientClass(color)} dark:border dark:border-neutral-700`; return `${convertToBGGradientClass(color)} dark:border dark:border-neutral-700`;
} }
export function convertColorToCaretClass(color: string | undefined) {
if (color && tailwindColors.includes(color)) {
return `caret-${color}-500`;
}
return `caret-orange-500`;
}
export function convertColorToRingClass(color: string | undefined) { export function convertColorToRingClass(color: string | undefined) {
if (color && tailwindColors.includes(color)) { if (color && tailwindColors.includes(color)) {
return `focus-visible:ring-${color}-500`; return `focus-visible:ring-${color}-500`;

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

@ -37,7 +37,11 @@ import { Popover, PopoverContent } from "@/components/ui/popover";
import { PopoverTrigger } from "@radix-ui/react-popover"; import { PopoverTrigger } from "@radix-ui/react-popover";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { convertColorToTextClass, convertToBGClass } from "@/app/common/colorUtils"; import {
convertColorToCaretClass,
convertColorToTextClass,
convertToBGClass,
} from "@/app/common/colorUtils";
import LoginPrompt from "../loginPrompt/loginPrompt"; import LoginPrompt from "../loginPrompt/loginPrompt";
import { uploadDataForIndexing } from "../../common/chatFunctions"; import { uploadDataForIndexing } from "../../common/chatFunctions";
@ -494,8 +498,8 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
</div> </div>
<Textarea <Textarea
ref={chatInputRef} ref={chatInputRef}
className={`border-none focus:border-none className={`border-none focus:border-none focus:outline-none focus-visible:ring-transparent
focus:outline-none focus-visible:ring-transparent animate-carate-blink ${convertColorToCaretClass(props.agentColor)}
w-full h-16 min-h-16 max-h-[128px] md:py-4 rounded-lg resize-none dark:bg-neutral-700 w-full h-16 min-h-16 max-h-[128px] md:py-4 rounded-lg resize-none dark:bg-neutral-700
${props.isMobileWidth ? "text-md" : "text-lg"}`} ${props.isMobileWidth ? "text-md" : "text-lg"}`}
placeholder="Type / to see a list of commands" placeholder="Type / to see a list of commands"

5
src/interface/web/tailwind.config.ts
View file

@ -32,6 +32,11 @@ const config = {
/ring-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/, /ring-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
variants: ["focus-visible", "dark"], variants: ["focus-visible", "dark"],
}, },
{
pattern:
/caret-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
variants: ["focus", "dark"],
},
], ],
darkMode: ["class"], darkMode: ["class"],
content: [ content: [