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

Upgrade: New Home Screen for Khoj (#860)

Browse Source 
* V1 of the new automations page
Implemented:
- Shareable
- Editable
- Suggested Cards
- Create new cards
- added side panel new conversation button
- Implement mobile-friendly view for homepage
- Fix issue of new conversations being created when selected agent is changed
- Improve center of the homepage experience
- Fix showing agent during first chat experience
- dark mode gradient updates

---------

Co-authored-by: sabaimran <narmiabas@gmail.com>
This commit is contained in:
Raghav Tirumale
2024-07-24 03:46:19 -04:00
committed by GitHub
parent 9cf52bb7e4
commit 3e4325edab
23 changed files with 10964 additions and 1039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/interface/web/app/components/profileCard/profileCard.tsx
View File

@@ -1,9 +1,18 @@
import React from 'react';
import { ArrowRight } from '@phosphor-icons/react';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from '@/components/ui/button';
interface ProfileCardProps {
name: string;
avatar: JSX.Element;
avatar: JSX.Element;
link: string;
description?: string; // Optional description field
}
@@ -11,24 +20,37 @@ interface ProfileCardProps {
const ProfileCard: React.FC<ProfileCardProps> = ({ name, avatar, link, description }) => {
return (
<div className="relative group flex">
{avatar}
<span>{name}</span>
<div className="absolute left-0 bottom-full w-80 h-30 p-2 pb-4 bg-white border border-gray-300 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div className="flex items-center">
{avatar}
<span className="mr-2 mt-1 flex">
{name}
<a href={link} target="_blank" rel="noreferrer" className="mt-1 ml-2 block">
<ArrowRight weight="bold"/>
</a>
</span>
</div>
{description && (
<p className="mt-2 ml-6 text-sm text-gray-600 line-clamp-2">
{description || 'A Khoj agent'}
</p>
)}
</div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" className="flex items-center justify-center gap-2">
{avatar}
<div>{name}</div>
</Button>
</TooltipTrigger>
<TooltipContent>
<div className='w-80 h-30'>
{/* <div className="absolute left-0 bottom-full w-80 h-30 p-2 pb-4 bg-white border border-gray-300 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"> */}
<a href={link} target="_blank" rel="noreferrer" className="mt-1 ml-2 block no-underline">
<div className="flex items-center justify-start gap-2">
{avatar}
<div className="mr-2 mt-1 flex justify-center items-center text-sm font-semibold text-gray-800">
{name}
<ArrowRight weight="bold" className='ml-1' />
</div>
</div>
</a>
{description && (
<p className="mt-2 ml-6 text-sm text-gray-600 line-clamp-2">
{description || 'A Khoj agent'}
</p>
)}
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
);
};