mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-11-27 09:25:06 +01:00
Add our first view via Next.js for Agents (#817)
Initialize our migration to use Next.js for front-end views via Agents. This includes setup for getting authenticated users, reading in available agents, setting up a pop-up modal when you're clicking on an agent, and allowing users to start new conversations with agents. Best attempt at an in-place migration, though there are some noticeable differences. Also adds view for chat that are not being used, but in experimental phase.
This commit is contained in:
sabaimran
GitHub
parent
8c12a69570
commit
3b7a9358c3
22 changed files with 1900 additions and 24 deletions
215
src/interface/web/app/agents/agents.module.css
Normal file
215
src/interface/web/app/agents/agents.module.css
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
div.titleBar {
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.agentPersonality p {
|
||||
white-space: inherit;
|
||||
overflow: hidden;
|
||||
height: 78px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
div.agentPersonality {
|
||||
text-align: left;
|
||||
grid-column: span 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.agentInfo {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
div.agentInfo a,
|
||||
div.agentInfo h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.agent img {
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
div.agent a {
|
||||
text-decoration: none;
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
div#agentsHeader {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
button.infoButton {
|
||||
border: none;
|
||||
background-color: transparent !important;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
div#agentsHeader a,
|
||||
div.agentInfo button {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: var(--summer-sun);
|
||||
font: inherit;
|
||||
color: var(--main-text-color);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
div#agentsHeader a:hover,
|
||||
div.agentInfo button:hover {
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: 0 0 10px var(--primary-hover);
|
||||
}
|
||||
|
||||
div.agent {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(18.48deg,rgba(252, 213, 87, 0.25) 2.76%,rgba(197, 0, 0, 0) 17.23%),linear-gradient(200.6deg,rgba(244, 229, 68, 0.25) 4.13%,rgba(230, 26, 26, 0) 20.54%);
|
||||
}
|
||||
|
||||
div.agentModal {
|
||||
padding: 20px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(18.48deg,rgba(252, 213, 87, 0.25) 2.76%,rgba(197, 0, 0, 0) 17.23%),linear-gradient(200.6deg,rgba(244, 229, 68, 0.25) 4.13%,rgba(230, 26, 26, 0) 20.54%);
|
||||
}
|
||||
|
||||
div.agentModalContent button {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
div.agentModalHeader {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
div.agentAvatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
div.agentModalContent p {
|
||||
white-space: break-spaces;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
div.agentInfo {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.agentList {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
margin-right: auto;
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
svg.newConvoButton {
|
||||
width: 20px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
div.agentModalContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(1,1,1,0.5);
|
||||
}
|
||||
|
||||
div.agentModal {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
div.agentModalActions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
div.agentModalActions button {
|
||||
padding: 8px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: var(--summer-sun);
|
||||
color: var(--main-text-color);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
div.agentModalActions button:hover {
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: 0 0 10px var(--primary-hover);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
div.agentList {
|
||||
width: 90%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
.loader {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
border-top: 4px solid var(--primary-color);
|
||||
border-right: 4px solid transparent;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
.loader::after {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border-left: 4px solid var(--summer-sun);
|
||||
border-bottom: 4px solid transparent;
|
||||
animation: rotation 0.5s linear infinite reverse;
|
||||
}
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
10
src/interface/web/app/agents/agentsLayout.module.css
Normal file
10
src/interface/web/app/agents/agentsLayout.module.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.agentsLayout {
|
||||
max-width: 70vw;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.agentsLayout {
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
25
src/interface/web/app/agents/layout.tsx
Normal file
25
src/interface/web/app/agents/layout.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
import type { Metadata } from "next";
|
||||
import NavMenu from '../components/navMenu/navMenu';
|
||||
import styles from './agentsLayout.module.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Khoj AI - Agents",
|
||||
description: "Use Agents with Khoj AI for deeper, more personalized queries.",
|
||||
icons: {
|
||||
icon: '/static/favicon.ico',
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<div className={`${styles.agentsLayout}`}>
|
||||
<NavMenu selected="Agents" />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
208
src/interface/web/app/agents/page.tsx
Normal file
208
src/interface/web/app/agents/page.tsx
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
'use client'
|
||||
|
||||
import styles from './agents.module.css';
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { useAuthenticatedData, UserProfile } from '../common/auth';
|
||||
|
||||
|
||||
export interface AgentData {
|
||||
slug: string;
|
||||
avatar: string;
|
||||
name: string;
|
||||
personality: string;
|
||||
}
|
||||
|
||||
async function openChat(slug: string, userData: UserProfile | null) {
|
||||
|
||||
const unauthenticatedRedirectUrl = `/login?next=/agents?agent=${slug}`;
|
||||
if (!userData) {
|
||||
window.location.href = unauthenticatedRedirectUrl;
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/chat/sessions?agent_slug=${slug}`, { method: "POST" });
|
||||
// const data = await response.json();
|
||||
if (response.status == 200) {
|
||||
window.location.href = `/chat`;
|
||||
} else if(response.status == 403 || response.status == 401) {
|
||||
window.location.href = unauthenticatedRedirectUrl;
|
||||
} else {
|
||||
alert("Failed to start chat session");
|
||||
}
|
||||
}
|
||||
|
||||
const agentsFetcher = () => window.fetch('/api/agents').then(res => res.json()).catch(err => console.log(err));
|
||||
|
||||
interface AgentModalProps {
|
||||
data: AgentData;
|
||||
setShowModal: (show: boolean) => void;
|
||||
userData: UserProfile | null;
|
||||
}
|
||||
|
||||
interface AgentCardProps {
|
||||
data: AgentData;
|
||||
userProfile: UserProfile | null;
|
||||
}
|
||||
|
||||
function AgentModal(props: AgentModalProps) {
|
||||
const [copiedToClipboard, setCopiedToClipboard] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (copiedToClipboard) {
|
||||
setTimeout(() => setCopiedToClipboard(false), 3000);
|
||||
}
|
||||
}, [copiedToClipboard]);
|
||||
|
||||
return (
|
||||
<div className={styles.agentModalContainer}>
|
||||
<div className={styles.agentModal}>
|
||||
<div className={styles.agentModalContent}>
|
||||
<div className={styles.agentModalHeader}>
|
||||
<div className={styles.agentAvatar}>
|
||||
<Image
|
||||
src={props.data.avatar}
|
||||
alt={props.data.name}
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
<h2>{props.data.name}</h2>
|
||||
</div>
|
||||
<div className={styles.agentModalActions}>
|
||||
<button onClick={() => {
|
||||
navigator.clipboard.writeText(`${window.location.host}/agents?agent=${props.data.slug}`);
|
||||
setCopiedToClipboard(true);
|
||||
}}>
|
||||
{
|
||||
copiedToClipboard ?
|
||||
<Image
|
||||
src="copy-button-success.svg"
|
||||
alt="Copied"
|
||||
width={24}
|
||||
height={24} />
|
||||
: <Image
|
||||
src="share.svg"
|
||||
alt="Copy Link"
|
||||
width={24}
|
||||
height={24} />
|
||||
}
|
||||
</button>
|
||||
<button onClick={() => props.setShowModal(false)}>
|
||||
<Image
|
||||
src="Close.svg"
|
||||
alt="Close"
|
||||
width={24}
|
||||
height={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>{props.data.personality}</p>
|
||||
<div className={styles.agentInfo}>
|
||||
<button onClick={() => openChat(props.data.slug, props.userData)}>
|
||||
Chat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AgentCard(props: AgentCardProps) {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
const agentSlug = searchParams.get('agent');
|
||||
const [showModal, setShowModal] = useState(agentSlug === props.data.slug);
|
||||
|
||||
const userData = props.userProfile;
|
||||
|
||||
if (showModal) {
|
||||
window.history.pushState({}, `Khoj AI - Agent ${props.data.slug}`, `/agents?agent=${props.data.slug}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.agent}>
|
||||
{
|
||||
showModal && <AgentModal data={props.data} setShowModal={setShowModal} userData={userData} />
|
||||
}
|
||||
<Link href={`/agent/${props.data.slug}`}>
|
||||
<div className={styles.agentAvatar}>
|
||||
<Image
|
||||
src={props.data.avatar}
|
||||
alt={props.data.name}
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<div className={styles.agentInfo}>
|
||||
<button className={styles.infoButton} onClick={() => setShowModal(true)}>
|
||||
<h2>{props.data.name}</h2>
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.agentInfo}>
|
||||
<button onClick={() => openChat(props.data.slug, userData)}>
|
||||
<Image
|
||||
src="send.svg"
|
||||
alt="Chat"
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.agentPersonality}>
|
||||
<button className={styles.infoButton} onClick={() => setShowModal(true)}>
|
||||
<p>{props.data.personality}</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Agents() {
|
||||
const { data, error } = useSWR<AgentData[]>('agents', agentsFetcher, { revalidateOnFocus: false });
|
||||
const userData = useAuthenticatedData();
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.titleBar}>
|
||||
Talk to a Specialized Agent
|
||||
</div>
|
||||
<div className={styles.agentList}>
|
||||
Error loading agents
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.titleBar}>
|
||||
Talk to a Specialized Agent
|
||||
</div>
|
||||
<div className={styles.agentList}>
|
||||
Loading agents...
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.titleBar}>
|
||||
Talk to a Specialized Agent
|
||||
</div>
|
||||
<div className={styles.agentList}>
|
||||
{data.map(agent => (
|
||||
<AgentCard key={agent.slug} data={agent} userProfile={userData} />
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
86
src/interface/web/app/chat/chat.module.css
Normal file
86
src/interface/web/app/chat/chat.module.css
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
div.main {
|
||||
height: 100vh;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.inputBox {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
input.inputBox {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input.inputBox:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
div.chatBodyFull {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button.inputBox {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: linear-gradient(var(--calm-green), var(--calm-blue));
|
||||
}
|
||||
|
||||
div.chatBody {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inputBox {
|
||||
color: black;
|
||||
}
|
||||
|
||||
div.chatLayout {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
div.chatBox {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
div.titleBar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
div.chatBody {
|
||||
grid-template-columns: 0fr 1fr;
|
||||
}
|
||||
|
||||
div.chatBox {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
24
src/interface/web/app/chat/layout.tsx
Normal file
24
src/interface/web/app/chat/layout.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Noto_Sans } from "next/font/google";
|
||||
import "../globals.css";
|
||||
|
||||
const inter = Noto_Sans({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Khoj AI - Chat",
|
||||
description: "Use this page to chat with Khoj AI.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
106
src/interface/web/app/chat/page.tsx
Normal file
106
src/interface/web/app/chat/page.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
'use client'
|
||||
|
||||
import styles from './chat.module.css';
|
||||
import React, { Suspense, useEffect, useState } from 'react';
|
||||
|
||||
import SuggestionCard from '../components/suggestions/suggestionCard';
|
||||
import SidePanel from '../components/sidePanel/chatHistorySidePanel';
|
||||
import ChatHistory from '../components/chatHistory/chatHistory';
|
||||
import { SingleChatMessage } from '../components/chatMessage/chatMessage';
|
||||
import NavMenu from '../components/navMenu/navMenu';
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import ReferencePanel, { hasValidReferences } from '../components/referencePanel/referencePanel';
|
||||
|
||||
import 'katex/dist/katex.min.css';
|
||||
|
||||
interface ChatOptions {
|
||||
[key: string]: string
|
||||
}
|
||||
const styleClassOptions = ['pink', 'blue', 'green', 'yellow', 'purple'];
|
||||
|
||||
|
||||
function ChatBodyData({ chatOptionsData }: { chatOptionsData: ChatOptions | null }) {
|
||||
const searchParams = useSearchParams();
|
||||
const conversationId = searchParams.get('conversationId');
|
||||
const [showReferencePanel, setShowReferencePanel] = useState(true);
|
||||
const [referencePanelData, setReferencePanelData] = useState<SingleChatMessage | null>(null);
|
||||
|
||||
if (!conversationId) {
|
||||
return (
|
||||
<div className={styles.suggestions}>
|
||||
{chatOptionsData && Object.entries(chatOptionsData).map(([key, value]) => (
|
||||
<SuggestionCard
|
||||
key={key}
|
||||
title={`/${key}`}
|
||||
body={value}
|
||||
link='#' // replace with actual link if available
|
||||
styleClass={styleClassOptions[Math.floor(Math.random() * styleClassOptions.length)]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return(
|
||||
<div className={(hasValidReferences(referencePanelData) && showReferencePanel) ? styles.chatBody : styles.chatBodyFull}>
|
||||
<ChatHistory conversationId={conversationId} setReferencePanelData={setReferencePanelData} setShowReferencePanel={setShowReferencePanel} />
|
||||
{
|
||||
(hasValidReferences(referencePanelData) && showReferencePanel) &&
|
||||
<ReferencePanel referencePanelData={referencePanelData} setShowReferencePanel={setShowReferencePanel} />
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Loading() {
|
||||
return <h2>🌀 Loading...</h2>;
|
||||
}
|
||||
|
||||
function handleChatInput(e: React.FormEvent<HTMLInputElement>) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
}
|
||||
|
||||
export default function Chat() {
|
||||
const [chatOptionsData, setChatOptionsData] = useState<ChatOptions | null>(null);
|
||||
const [isLoading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/chat/options')
|
||||
.then(response => response.json())
|
||||
.then((data: ChatOptions) => {
|
||||
setLoading(false);
|
||||
// Render chat options, if any
|
||||
if (data) {
|
||||
setChatOptionsData(data);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return;
|
||||
});
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.main + " " + styles.chatLayout}>
|
||||
<div className={styles.sidePanel}>
|
||||
<SidePanel />
|
||||
</div>
|
||||
<div className={styles.chatBox}>
|
||||
<title>
|
||||
Khoj AI - Chat
|
||||
</title>
|
||||
<NavMenu selected="Chat" />
|
||||
<div>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<ChatBodyData chatOptionsData={chatOptionsData} />
|
||||
</Suspense>
|
||||
</div>
|
||||
<div className={styles.inputBox}>
|
||||
<input className={styles.inputBox} type="text" placeholder="Type here..." onInput={(e) => handleChatInput(e)} />
|
||||
<button className={styles.inputBox}>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
23
src/interface/web/app/common/auth.ts
Normal file
23
src/interface/web/app/common/auth.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
'use client'
|
||||
|
||||
import useSWR from 'swr'
|
||||
|
||||
export interface UserProfile {
|
||||
email: string;
|
||||
username: string;
|
||||
photo: string;
|
||||
is_active: boolean;
|
||||
has_documents: boolean;
|
||||
}
|
||||
|
||||
const userFetcher = () => window.fetch('/api/v1/user').then(res => res.json()).catch(err => console.log(err));
|
||||
|
||||
export function useAuthenticatedData() {
|
||||
|
||||
const { data, error } = useSWR<UserProfile>('/api/v1/user', userFetcher, { revalidateOnFocus: false });
|
||||
|
||||
if (error) return null;
|
||||
if (!data) return null;
|
||||
|
||||
return data;
|
||||
}
|
||||
0
src/interface/web/app/common/chatFunctions.ts
Normal file
0
src/interface/web/app/common/chatFunctions.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
div.chatHistory {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div.chatLayout {
|
||||
height: 80vh;
|
||||
overflow-y: auto;
|
||||
/* width: 80%; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
99
src/interface/web/app/components/chatHistory/chatHistory.tsx
Normal file
99
src/interface/web/app/components/chatHistory/chatHistory.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
'use client'
|
||||
|
||||
import styles from './chatHistory.module.css';
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
|
||||
import ChatMessage, { ChatHistoryData, SingleChatMessage } from '../chatMessage/chatMessage';
|
||||
|
||||
import renderMathInElement from 'katex/contrib/auto-render';
|
||||
import 'katex/dist/katex.min.css';
|
||||
import 'highlight.js/styles/github.css'
|
||||
|
||||
interface ChatResponse {
|
||||
status: string;
|
||||
response: ChatHistoryData;
|
||||
}
|
||||
|
||||
interface ChatHistory {
|
||||
[key: string]: string
|
||||
}
|
||||
|
||||
interface ChatHistoryProps {
|
||||
conversationId: string;
|
||||
setReferencePanelData: Function;
|
||||
setShowReferencePanel: Function;
|
||||
}
|
||||
|
||||
|
||||
export default function ChatHistory(props: ChatHistoryProps) {
|
||||
const [data, setData] = useState<ChatHistoryData | null>(null);
|
||||
const [isLoading, setLoading] = useState(true)
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const chatHistoryRef = useRef(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
fetch(`/api/chat/history?client=web&conversation_id=${props.conversationId}&n=10`)
|
||||
.then(response => response.json())
|
||||
.then((chatData: ChatResponse) => {
|
||||
setLoading(false);
|
||||
// Render chat options, if any
|
||||
if (chatData) {
|
||||
setData(chatData.response);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return;
|
||||
});
|
||||
}, [props.conversationId]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new MutationObserver((mutationsList, observer) => {
|
||||
// If the addedNodes property has one or more nodes
|
||||
for(let mutation of mutationsList) {
|
||||
if(mutation.type === 'childList' && mutation.addedNodes.length > 0) {
|
||||
// Call your function here
|
||||
renderMathInElement(document.body, {
|
||||
delimiters: [
|
||||
{ left: '$$', right: '$$', display: true },
|
||||
{ left: '\\[', right: '\\]', display: true },
|
||||
{ left: '$', right: '$', display: false },
|
||||
{ left: '\\(', right: '\\)', display: false },
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (chatHistoryRef.current) {
|
||||
observer.observe(chatHistoryRef.current, { childList: true });
|
||||
}
|
||||
|
||||
// Clean up the observer on component unmount
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return <h2>🌀 Loading...</h2>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.main + " " + styles.chatLayout}>
|
||||
<div ref={ref}>
|
||||
<div className={styles.chatHistory} ref={chatHistoryRef}>
|
||||
{(data && data.chat) && data.chat.map((chatMessage, index) => (
|
||||
<ChatMessage
|
||||
key={index}
|
||||
chatMessage={chatMessage}
|
||||
setReferencePanelData={props.setReferencePanelData}
|
||||
setShowReferencePanel={props.setShowReferencePanel}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
div.chatMessageContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid black;
|
||||
/* max-width: 80%; */
|
||||
}
|
||||
|
||||
div.you {
|
||||
color: var(--frosted-background-color);
|
||||
background-color: var(--intense-green);
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
div.khoj {
|
||||
background-color: transparent;
|
||||
color: #000000;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
div.chatMessageContainer img {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
div.chatMessageContainer h3 img {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
div.you .author {
|
||||
color: var(--frosted-background-color);
|
||||
}
|
||||
|
||||
div.author {
|
||||
font-size: 0.75rem;
|
||||
color: #808080;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.chatFooter {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
div.chatButtons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
div.chatFooter button {
|
||||
cursor: pointer;
|
||||
background-color: var(--calm-blue);
|
||||
color: var(--main-text-color);
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
div.chatFooter button:hover {
|
||||
background-color: var(--frosted-background-color);
|
||||
color: var(--intense-green);
|
||||
}
|
||||
|
||||
div.chatTimestamp {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
button.codeCopyButton {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
button.codeCopyButton:hover {
|
||||
background-color: var(--intense-green);
|
||||
color: var(--frosted-background-color);
|
||||
}
|
||||
|
||||
div.feedbackButtons img,
|
||||
button.copyButton img {
|
||||
width: auto;
|
||||
}
|
||||
258
src/interface/web/app/components/chatMessage/chatMessage.tsx
Normal file
258
src/interface/web/app/components/chatMessage/chatMessage.tsx
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
"use client"
|
||||
|
||||
import styles from './chatMessage.module.css';
|
||||
|
||||
import markdownIt from 'markdown-it';
|
||||
import mditHljs from "markdown-it-highlightjs";
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
import 'katex/dist/katex.min.css';
|
||||
import 'highlight.js/styles/github.css'
|
||||
|
||||
import { hasValidReferences } from '../referencePanel/referencePanel';
|
||||
|
||||
const md = new markdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
md.use(mditHljs, {
|
||||
inline: true,
|
||||
code: true
|
||||
});
|
||||
|
||||
export interface Context {
|
||||
compiled: string;
|
||||
file: string;
|
||||
}
|
||||
|
||||
export interface WebPage {
|
||||
link: string;
|
||||
query: string;
|
||||
snippet: string;
|
||||
}
|
||||
|
||||
interface OrganicContext {
|
||||
snippet: string;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface PeopleAlsoAsk {
|
||||
link: string;
|
||||
question: string;
|
||||
snippet: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface OnlineContextData {
|
||||
webpages: WebPage[];
|
||||
answerBox: {
|
||||
answer: string;
|
||||
source: string;
|
||||
title: string;
|
||||
}
|
||||
knowledgeGraph: {
|
||||
attributes: {
|
||||
[key: string]: string;
|
||||
}
|
||||
description: string;
|
||||
descriptionLink: string;
|
||||
descriptionSource: string;
|
||||
imageUrl: string;
|
||||
title: string;
|
||||
type: string;
|
||||
}
|
||||
organic: OrganicContext[];
|
||||
peopleAlsoAsk: PeopleAlsoAsk[];
|
||||
}
|
||||
|
||||
interface AgentData {
|
||||
name: string;
|
||||
avatar: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
interface Intent {
|
||||
type: string;
|
||||
"inferred-queries": string[];
|
||||
}
|
||||
|
||||
export interface SingleChatMessage {
|
||||
automationId: string;
|
||||
by: string;
|
||||
intent: {
|
||||
[key: string]: string
|
||||
}
|
||||
message: string;
|
||||
context: Context[];
|
||||
created: string;
|
||||
onlineContext: {
|
||||
[key: string]: OnlineContextData
|
||||
}
|
||||
}
|
||||
|
||||
export interface ChatHistoryData {
|
||||
chat: SingleChatMessage[];
|
||||
agent: AgentData;
|
||||
conversation_id: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
function FeedbackButtons() {
|
||||
return (
|
||||
<div className={styles.feedbackButtons}>
|
||||
<button className={styles.thumbsUpButton}>
|
||||
<Image
|
||||
src="/thumbs-up.svg"
|
||||
alt="Thumbs Up"
|
||||
width={24}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</button>
|
||||
<button className={styles.thumbsDownButton}>
|
||||
<Image
|
||||
src="/thumbs-down.svg"
|
||||
alt="Thumbs Down"
|
||||
width={24}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function onClickMessage(event: React.MouseEvent<any>, chatMessage: SingleChatMessage, setReferencePanelData: Function, setShowReferencePanel: Function) {
|
||||
event.preventDefault();
|
||||
setReferencePanelData(chatMessage);
|
||||
setShowReferencePanel(true);
|
||||
}
|
||||
|
||||
interface ChatMessageProps {
|
||||
chatMessage: SingleChatMessage;
|
||||
setReferencePanelData: Function;
|
||||
setShowReferencePanel: Function;
|
||||
}
|
||||
|
||||
export default function ChatMessage(props: ChatMessageProps) {
|
||||
const [copySuccess, setCopySuccess] = useState<boolean>(false);
|
||||
|
||||
let message = props.chatMessage.message;
|
||||
|
||||
// Replace LaTeX delimiters with placeholders
|
||||
message = message.replace(/\\\(/g, 'LEFTPAREN').replace(/\\\)/g, 'RIGHTPAREN')
|
||||
.replace(/\\\[/g, 'LEFTBRACKET').replace(/\\\]/g, 'RIGHTBRACKET');
|
||||
|
||||
if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image2") {
|
||||
message = `\n\n${props.chatMessage.intent["inferred-queries"][0]}`
|
||||
}
|
||||
|
||||
let markdownRendered = md.render(message);
|
||||
|
||||
// Replace placeholders with LaTeX delimiters
|
||||
markdownRendered = markdownRendered.replace(/LEFTPAREN/g, '\\(').replace(/RIGHTPAREN/g, '\\)')
|
||||
.replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]');
|
||||
|
||||
const messageRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (messageRef.current) {
|
||||
const preElements = messageRef.current.querySelectorAll('pre > .hljs');
|
||||
preElements.forEach((preElement) => {
|
||||
const copyButton = document.createElement('button');
|
||||
const copyImage = document.createElement('img');
|
||||
copyImage.src = '/copy-button.svg';
|
||||
copyImage.alt = 'Copy';
|
||||
copyImage.width = 24;
|
||||
copyImage.height = 24;
|
||||
copyButton.appendChild(copyImage);
|
||||
copyButton.className = `hljs ${styles.codeCopyButton}`
|
||||
copyButton.addEventListener('click', () => {
|
||||
let textContent = preElement.textContent || '';
|
||||
// Strip any leading $ characters
|
||||
textContent = textContent.replace(/^\$+/, '');
|
||||
// Remove 'Copy' if it's at the start of the string
|
||||
textContent = textContent.replace(/^Copy/, '');
|
||||
textContent = textContent.trim();
|
||||
navigator.clipboard.writeText(textContent);
|
||||
});
|
||||
preElement.prepend(copyButton);
|
||||
});
|
||||
}
|
||||
}, [markdownRendered]);
|
||||
|
||||
function renderTimeStamp(timestamp: string) {
|
||||
var dateObject = new Date(timestamp);
|
||||
var month = dateObject.getMonth() + 1;
|
||||
var date = dateObject.getDate();
|
||||
var year = dateObject.getFullYear();
|
||||
const formattedDate = `${month}/${date}/${year}`;
|
||||
return `${formattedDate} ${dateObject.toLocaleTimeString()}`;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (copySuccess) {
|
||||
setTimeout(() => {
|
||||
setCopySuccess(false);
|
||||
}, 2000);
|
||||
}
|
||||
}, [copySuccess]);
|
||||
|
||||
let referencesValid = hasValidReferences(props.chatMessage);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.chatMessageContainer} ${styles[props.chatMessage.by]}`}
|
||||
onClick={props.chatMessage.by === "khoj" ? (event) => onClickMessage(event, props.chatMessage, props.setReferencePanelData, props.setShowReferencePanel) : undefined}>
|
||||
{/* <div className={styles.chatFooter}> */}
|
||||
{/* {props.chatMessage.by} */}
|
||||
{/* </div> */}
|
||||
<div ref={messageRef} className={styles.chatMessage} dangerouslySetInnerHTML={{ __html: markdownRendered }} />
|
||||
{/* Add a copy button, thumbs up, and thumbs down buttons */}
|
||||
<div className={styles.chatFooter}>
|
||||
<div className={styles.chatTimestamp}>
|
||||
{renderTimeStamp(props.chatMessage.created)}
|
||||
</div>
|
||||
<div className={styles.chatButtons}>
|
||||
{
|
||||
referencesValid &&
|
||||
<div className={styles.referenceButton}>
|
||||
<button onClick={(event) => onClickMessage(event, props.chatMessage, props.setReferencePanelData, props.setShowReferencePanel)}>
|
||||
References
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
<button className={`${styles.copyButton}`} onClick={() => {
|
||||
navigator.clipboard.writeText(props.chatMessage.message);
|
||||
setCopySuccess(true);
|
||||
}}>
|
||||
{
|
||||
copySuccess ?
|
||||
<Image
|
||||
src="/copy-button-success.svg"
|
||||
alt="Checkmark"
|
||||
width={24}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
: <Image
|
||||
src="/copy-button.svg"
|
||||
alt="Copy"
|
||||
width={24}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
}
|
||||
</button>
|
||||
{
|
||||
props.chatMessage.by === "khoj" && <FeedbackButtons />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
96
src/interface/web/app/components/navMenu/navMenu.module.css
Normal file
96
src/interface/web/app/components/navMenu/navMenu.module.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
menu.menu a {
|
||||
color: var(--main-text-color);
|
||||
text-decoration: none;
|
||||
font-size: medium;
|
||||
font-weight: normal;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
menu.menu a.selected {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
menu.menu a:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
menu.menu {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.titleBar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
padding: 16px 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div.titleBar menu {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0.5rem;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
div.settingsMenuProfile img {
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.settingsMenu {
|
||||
color: var(--main-text-color);
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.settingsMenu:hover {
|
||||
background-color: var(--primary-hover);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.settingsMenuOptions {
|
||||
display: block;
|
||||
grid-auto-flow: row;
|
||||
position: absolute;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
top: 64px;
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
div.settingsMenuOptions a {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div.settingsMenuUsername {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
menu.menu span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.settingsMenuOptions {
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
106
src/interface/web/app/components/navMenu/navMenu.tsx
Normal file
106
src/interface/web/app/components/navMenu/navMenu.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
'use client'
|
||||
|
||||
import styles from './navMenu.module.css';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { useAuthenticatedData, UserProfile } from '@/app/common/auth';
|
||||
import { useState } from 'react';
|
||||
|
||||
|
||||
interface NavMenuProps {
|
||||
selected: string;
|
||||
}
|
||||
|
||||
function SettingsMenu(props: UserProfile) {
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={styles.settingsMenu}>
|
||||
<div className={styles.settingsMenuProfile} onClick={() => setShowSettings(!showSettings)}>
|
||||
<Image
|
||||
src={props.photo || "/agents.svg"}
|
||||
alt={props.username}
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
{showSettings && (
|
||||
<div className={styles.settingsMenuOptions}>
|
||||
<div className={styles.settingsMenuUsername}>{props.username}</div>
|
||||
<Link href="/config">
|
||||
Settings
|
||||
</Link>
|
||||
<Link href="https://github.com/khoj-ai/khoj">
|
||||
Github
|
||||
</Link>
|
||||
<Link href="https://docs.khoj.dev">
|
||||
Help
|
||||
</Link>
|
||||
<Link href="/auth/logout">
|
||||
Logout
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function NavMenu(props: NavMenuProps) {
|
||||
|
||||
let userData = useAuthenticatedData();
|
||||
return (
|
||||
<div className={styles.titleBar}>
|
||||
<Link href="/">
|
||||
<Image
|
||||
src="/khoj-logo.svg"
|
||||
alt="Khoj Logo"
|
||||
className={styles.logo}
|
||||
width={100}
|
||||
height={50}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
<menu className={styles.menu}>
|
||||
<a className={props.selected === "Chat" ? styles.selected : ""} href = '/chat'>
|
||||
<Image
|
||||
src="/chat.svg"
|
||||
alt="Chat Logo"
|
||||
className={styles.lgoo}
|
||||
width={24}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
<span>
|
||||
Chat
|
||||
</span>
|
||||
</a>
|
||||
<a className={props.selected === "Agents" ? styles.selected : ""} href='/agents'>
|
||||
<Image
|
||||
src="/agents.svg"
|
||||
alt="Agent Logo"
|
||||
className={styles.lgoo}
|
||||
width={24}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
<span>
|
||||
Agents
|
||||
</span>
|
||||
</a>
|
||||
<a className={props.selected === "Automations" ? styles.selected : ""} href = '/automations'>
|
||||
<Image
|
||||
src="/automation.svg"
|
||||
alt="Automation Logo"
|
||||
className={styles.lgoo}
|
||||
width={24}
|
||||
height={24}
|
||||
priority
|
||||
/>
|
||||
<span>
|
||||
Automations
|
||||
</span>
|
||||
</a>
|
||||
{userData && <SettingsMenu {...userData} />}
|
||||
</menu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
div.panel {
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--calm-blue);
|
||||
color: var(--main-text-color);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
div.panel a {
|
||||
color: var(--intense-green);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
div.onlineReference,
|
||||
div.contextReference {
|
||||
margin: 4px;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div.contextReference:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.singleReference {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--frosted-background-color);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
'use client'
|
||||
|
||||
import styles from "./referencePanel.module.css";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import markdownIt from "markdown-it";
|
||||
const md = new markdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
import { SingleChatMessage, Context, WebPage, OnlineContextData } from "../chatMessage/chatMessage";
|
||||
|
||||
interface ReferencePanelProps {
|
||||
referencePanelData: SingleChatMessage | null;
|
||||
setShowReferencePanel: (showReferencePanel: boolean) => void;
|
||||
}
|
||||
|
||||
export function hasValidReferences(referencePanelData: SingleChatMessage | null) {
|
||||
return (
|
||||
referencePanelData &&
|
||||
(
|
||||
(referencePanelData.context && referencePanelData.context.length > 0) ||
|
||||
(referencePanelData.onlineContext && Object.keys(referencePanelData.onlineContext).length > 0 &&
|
||||
Object.values(referencePanelData.onlineContext).some(
|
||||
(onlineContextData) =>
|
||||
(onlineContextData.webpages && onlineContextData.webpages.length > 0)|| onlineContextData.answerBox || onlineContextData.peopleAlsoAsk || onlineContextData.knowledgeGraph))
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function CompiledReference(props: { context: (Context | string) }) {
|
||||
|
||||
let snippet = "";
|
||||
let file = "";
|
||||
if (typeof props.context === "string") {
|
||||
// Treat context as a string and get the first line for the file name
|
||||
const lines = props.context.split("\n");
|
||||
file = lines[0];
|
||||
snippet = lines.slice(1).join("\n");
|
||||
} else {
|
||||
const context = props.context as Context;
|
||||
snippet = context.compiled;
|
||||
file = context.file;
|
||||
}
|
||||
|
||||
const [showSnippet, setShowSnippet] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={styles.singleReference}>
|
||||
<div className={styles.contextReference} onClick={() => setShowSnippet(!showSnippet)}>
|
||||
<div className={styles.referencePanelTitle}>
|
||||
{file}
|
||||
</div>
|
||||
<div className={styles.referencePanelContent} style={{ display: showSnippet ? "block" : "none" }}>
|
||||
<div>
|
||||
{snippet}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function WebPageReference(props: { webpages: WebPage, query: string | null }) {
|
||||
|
||||
let snippet = md.render(props.webpages.snippet);
|
||||
|
||||
const [showSnippet, setShowSnippet] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={styles.onlineReference} onClick={() => setShowSnippet(!showSnippet)}>
|
||||
<div className={styles.onlineReferenceTitle}>
|
||||
<a href={props.webpages.link} target="_blank" rel="noreferrer">
|
||||
{
|
||||
props.query ? (
|
||||
<span>
|
||||
{props.query}
|
||||
</span>
|
||||
) : <span>
|
||||
{props.webpages.query}
|
||||
</span>
|
||||
}
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.onlineReferenceContent} style={{ display: showSnippet ? "block" : "none" }}>
|
||||
<div dangerouslySetInnerHTML={{ __html: snippet }}></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function OnlineReferences(props: { onlineContext: OnlineContextData, query: string}) {
|
||||
|
||||
const webpages = props.onlineContext.webpages;
|
||||
const answerBox = props.onlineContext.answerBox;
|
||||
const peopleAlsoAsk = props.onlineContext.peopleAlsoAsk;
|
||||
const knowledgeGraph = props.onlineContext.knowledgeGraph;
|
||||
|
||||
return (
|
||||
<div className={styles.singleReference}>
|
||||
{
|
||||
webpages && (
|
||||
!Array.isArray(webpages) ? (
|
||||
<WebPageReference webpages={webpages} query={props.query} />
|
||||
) : (
|
||||
webpages.map((webpage, index) => {
|
||||
return <WebPageReference webpages={webpage} key={index} query={null} />
|
||||
})
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
answerBox && (
|
||||
<div className={styles.onlineReference}>
|
||||
<div className={styles.onlineReferenceTitle}>
|
||||
{answerBox.title}
|
||||
</div>
|
||||
<div className={styles.onlineReferenceContent}>
|
||||
<div>
|
||||
{answerBox.answer}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
peopleAlsoAsk && peopleAlsoAsk.map((people, index) => {
|
||||
return (
|
||||
<div className={styles.onlineReference} key={index}>
|
||||
<div className={styles.onlineReferenceTitle}>
|
||||
<a href={people.link} target="_blank" rel="noreferrer">
|
||||
{people.question}
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.onlineReferenceContent}>
|
||||
<div>
|
||||
{people.snippet}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
knowledgeGraph && (
|
||||
<div className={styles.onlineReference}>
|
||||
<div className={styles.onlineReferenceTitle}>
|
||||
<a href={knowledgeGraph.descriptionLink} target="_blank" rel="noreferrer">
|
||||
{knowledgeGraph.title}
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.onlineReferenceContent}>
|
||||
<div>
|
||||
{knowledgeGraph.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default function ReferencePanel(props: ReferencePanelProps) {
|
||||
|
||||
if (!props.referencePanelData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!hasValidReferences(props.referencePanelData)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${styles.panel}`}>
|
||||
References <button onClick={() => props.setShowReferencePanel(false)}>Hide</button>
|
||||
{
|
||||
props.referencePanelData?.context.map((context, index) => {
|
||||
return <CompiledReference context={context} key={index} />
|
||||
})
|
||||
}
|
||||
{
|
||||
Object.entries(props.referencePanelData?.onlineContext || {}).map(([key, onlineContextData], index) => {
|
||||
return <OnlineReferences onlineContext={onlineContextData} query={key} key={index} />
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
'use client'
|
||||
|
||||
import styles from "./sidePanel.module.css";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { UserProfile } from "@/app/common/auth";
|
||||
import Link from "next/link";
|
||||
|
||||
interface ChatHistory {
|
||||
conversation_id: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
function ChatSession(prop: ChatHistory) {
|
||||
return (
|
||||
<div key={prop.conversation_id} className={styles.session}>
|
||||
<Link href={`/chat?conversationId=${prop.conversation_id}`}>
|
||||
<p className={styles.session}>{prop.slug || "New Conversation 🌱"}</p>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ChatSessionsModalProps {
|
||||
data: ChatHistory[];
|
||||
setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
function ChatSessionsModal({data, setIsExpanded}: ChatSessionsModalProps) {
|
||||
return (
|
||||
<div className={styles.modalSessionsList}>
|
||||
<div className={styles.content}>
|
||||
{data.map((chatHistory) => (
|
||||
<ChatSession key={chatHistory.conversation_id} conversation_id={chatHistory.conversation_id} slug={chatHistory.slug} />
|
||||
))}
|
||||
<button className={styles.showMoreButton} onClick={() => setIsExpanded(false)}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SidePanel() {
|
||||
|
||||
const [data, setData] = useState<ChatHistory[] | null>(null);
|
||||
const [dataToShow, setDataToShow] = useState<ChatHistory[] | null>(null);
|
||||
const [isLoading, setLoading] = useState(true)
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
fetch('/api/chat/sessions', { method: 'GET' })
|
||||
.then(response => response.json())
|
||||
.then((data: ChatHistory[]) => {
|
||||
setLoading(false);
|
||||
// Render chat options, if any
|
||||
if (data) {
|
||||
setData(data);
|
||||
setDataToShow(data.slice(0, 5));
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return;
|
||||
});
|
||||
|
||||
fetch('/api/v1/user', { method: 'GET' })
|
||||
.then(response => response.json())
|
||||
.then((data: UserProfile) => {
|
||||
setUserProfile(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return;
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={`${styles.panel}`}>
|
||||
{
|
||||
enabled ?
|
||||
<div>
|
||||
<div className={`${styles.expanded}`}>
|
||||
<div className={`${styles.profile}`}>
|
||||
{ userProfile &&
|
||||
<div className={styles.profile}>
|
||||
<img
|
||||
className={styles.profile}
|
||||
src={userProfile.photo}
|
||||
alt="profile"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
<p>{userProfile?.username}</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<button className={styles.button} onClick={() => setEnabled(false)}>
|
||||
{/* Push Close Icon */}
|
||||
<svg fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M8.70710678,12 L19.5,12 C19.7761424,12 20,12.2238576 20,12.5 C20,12.7761424 19.7761424,13 19.5,13 L8.70710678,13 L11.8535534,16.1464466 C12.0488155,16.3417088 12.0488155,16.6582912 11.8535534,16.8535534 C11.6582912,17.0488155 11.3417088,17.0488155 11.1464466,16.8535534 L7.14644661,12.8535534 C6.95118446,12.6582912 6.95118446,12.3417088 7.14644661,12.1464466 L11.1464466,8.14644661 C11.3417088,7.95118446 11.6582912,7.95118446 11.8535534,8.14644661 C12.0488155,8.34170876 12.0488155,8.65829124 11.8535534,8.85355339 L8.70710678,12 L8.70710678,12 Z M4,5.5 C4,5.22385763 4.22385763,5 4.5,5 C4.77614237,5 5,5.22385763 5,5.5 L5,19.5 C5,19.7761424 4.77614237,20 4.5,20 C4.22385763,20 4,19.7761424 4,19.5 L4,5.5 Z"></path> </g></svg>
|
||||
</button>
|
||||
<h3>Recent Conversations</h3>
|
||||
</div>
|
||||
<div className={styles.sessionsList}>
|
||||
{dataToShow && dataToShow.map((chatHistory) => (
|
||||
<ChatSession key={chatHistory.conversation_id} conversation_id={chatHistory.conversation_id} slug={chatHistory.slug} />
|
||||
))}
|
||||
</div>
|
||||
{
|
||||
(data && data.length > 5) && (
|
||||
(isExpanded) ?
|
||||
<ChatSessionsModal data={data} setIsExpanded={setIsExpanded} />
|
||||
:
|
||||
<button className={styles.showMoreButton} onClick={() => {
|
||||
setIsExpanded(true);
|
||||
}}>
|
||||
Show All
|
||||
</button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
<div className={`${styles.collapsed}`}>
|
||||
{ userProfile &&
|
||||
<div className={`${styles.profile}`}>
|
||||
<img
|
||||
className={styles.profile}
|
||||
src={userProfile.photo}
|
||||
alt="profile"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<button className={styles.button} onClick={() => setEnabled(true)}>
|
||||
{/* Pull Open Icon */}
|
||||
<svg fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.2928932,12 L12.1464466,8.85355339 C11.9511845,8.65829124 11.9511845,8.34170876 12.1464466,8.14644661 C12.3417088,7.95118446 12.6582912,7.95118446 12.8535534,8.14644661 L16.8535534,12.1464466 C17.0488155,12.3417088 17.0488155,12.6582912 16.8535534,12.8535534 L12.8535534,16.8535534 C12.6582912,17.0488155 12.3417088,17.0488155 12.1464466,16.8535534 C11.9511845,16.6582912 11.9511845,16.3417088 12.1464466,16.1464466 L15.2928932,13 L4.5,13 C4.22385763,13 4,12.7761424 4,12.5 C4,12.2238576 4.22385763,12 4.5,12 L15.2928932,12 Z M19,5.5 C19,5.22385763 19.2238576,5 19.5,5 C19.7761424,5 20,5.22385763 20,5.5 L20,19.5 C20,19.7761424 19.7761424,20 19.5,20 C19.2238576,20 19,19.7761424 19,19.5 L19,5.5 Z"></path> </g></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
div.session {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
color: var(--main-text-color);
|
||||
cursor: pointer;
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
button.button {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--main-text-color);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
button.showMoreButton {
|
||||
background: var(--intense-green);
|
||||
border: none;
|
||||
color: var(--frosted-background-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
div.panel {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--calm-blue);
|
||||
color: var(--main-text-color);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
div.expanded {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
div.collapsed {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
div.session:hover {
|
||||
background-color: var(--calmer-blue);
|
||||
}
|
||||
|
||||
p.session {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
img.profile {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
div.modalSessionsList {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--frosted-background-color);
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
div.modalSessionsList div.content {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
background-color: var(--frosted-background-color);
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
div.modalSessionsList div.session {
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
'use client'
|
||||
|
||||
import styles from "./suggestions.module.css";
|
||||
|
||||
interface SuggestionCardProps {
|
||||
title: string;
|
||||
body: string;
|
||||
link: string;
|
||||
styleClass: string;
|
||||
}
|
||||
|
||||
export default function SuggestionCard(data: SuggestionCardProps) {
|
||||
|
||||
return (
|
||||
<div className={styles[data.styleClass] + " " + styles.card}>
|
||||
<div className={styles.title}>
|
||||
{data.title}
|
||||
</div>
|
||||
<div className={styles.body}>
|
||||
{data.body}
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href={data.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>click me
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
div.pink {
|
||||
background-color: #f8d1f8;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
div.blue {
|
||||
background-color: #d1f8f8;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
div.green {
|
||||
background-color: #d1f8d1;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
div.purple {
|
||||
background-color: #f8d1f8;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
div.yellow {
|
||||
background-color: #f8f8d1;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
div.card {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
div.title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -148,33 +148,10 @@ def login_page(request: Request):
|
|||
|
||||
@web_client.get("/agents", response_class=HTMLResponse)
|
||||
def agents_page(request: Request):
|
||||
user: KhojUser = request.user.object if request.user.is_authenticated else None
|
||||
user_picture = request.session.get("user", {}).get("picture") if user else None
|
||||
has_documents = EntryAdapters.user_has_entries(user=user)
|
||||
agents = AgentAdapters.get_all_accessible_agents(user)
|
||||
agents_packet = list()
|
||||
for agent in agents:
|
||||
agents_packet.append(
|
||||
{
|
||||
"slug": agent.slug,
|
||||
"avatar": agent.avatar,
|
||||
"name": agent.name,
|
||||
"personality": agent.personality,
|
||||
"public": agent.public,
|
||||
"creator": agent.creator.username if agent.creator else None,
|
||||
"managed_by_admin": agent.managed_by_admin,
|
||||
}
|
||||
)
|
||||
return templates.TemplateResponse(
|
||||
"agents.html",
|
||||
"agents/index.html",
|
||||
context={
|
||||
"request": request,
|
||||
"agents": agents_packet,
|
||||
"khoj_version": state.khoj_version,
|
||||
"username": user.username if user else None,
|
||||
"has_documents": has_documents,
|
||||
"is_active": has_required_scope(request, ["premium"]),
|
||||
"user_photo": user_picture,
|
||||
},
|
||||
)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue