Initial commit

ui/components/Chat.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import MessageInput from './MessageInput';
+import { Message } from './ChatWindow';
+import MessageBox from './MessageBox';
+import MessageBoxLoading from './MessageBoxLoading';
+
+const Chat = ({
+  loading,
+  messages,
+  sendMessage,
+  messageAppeared,
+  rewrite,
+}: {
+  messages: Message[];
+  sendMessage: (message: string) => void;
+  loading: boolean;
+  messageAppeared: boolean;
+  rewrite: (messageId: string) => void;
+}) => {
+  const [dividerWidth, setDividerWidth] = useState(0);
+  const dividerRef = useRef<HTMLDivElement | null>(null);
+  const messageEnd = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const updateDividerWidth = () => {
+      if (dividerRef.current) {
+        setDividerWidth(dividerRef.current.scrollWidth);
+      }
+    };
+
+    updateDividerWidth();
+
+    window.addEventListener('resize', updateDividerWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateDividerWidth);
+    };
+  });
+
+  useEffect(() => {
+    messageEnd.current?.scrollIntoView({ behavior: 'smooth' });
+
+    if (messages.length === 1) {
+      document.title = `${messages[0].content.substring(0, 30)} - Perplexica`;
+    }
+  }, [messages]);
+
+  return (
+    <div className="flex flex-col space-y-6 pt-8 pb-44 lg:pb-32 sm:mx-4 md:mx-8">
+      {messages.map((msg, i) => {
+        const isLast = i === messages.length - 1;
+
+        return (
+          <>
+            <MessageBox
+              key={i}
+              message={msg}
+              messageIndex={i}
+              history={messages}
+              loading={loading}
+              dividerRef={isLast ? dividerRef : undefined}
+              isLast={isLast}
+              rewrite={rewrite}
+            />
+            {!isLast && msg.role === 'assistant' && (
+              <div className="h-px w-full bg-[#1C1C1C]" />
+            )}
+          </>
+        );
+      })}
+      {loading && !messageAppeared && <MessageBoxLoading />}
+      <div ref={messageEnd} className="h-0" />
+      {dividerWidth > 0 && (
+        <div
+          className="bottom-24 lg:bottom-10 fixed z-40"
+          style={{ width: dividerWidth }}
+        >
+          <MessageInput sendMessage={sendMessage} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Chat;

ui/components/ChatWindow.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Document } from '@langchain/core/documents';
+import Navbar from './Navbar';
+import Chat from './Chat';
+import EmptyChat from './EmptyChat';
+
+export type Message = {
+  id: string;
+  createdAt?: Date;
+  content: string;
+  role: 'user' | 'assistant';
+  sources?: Document[];
+};
+
+const useSocket = (url: string) => {
+  const [ws, setWs] = useState<WebSocket | null>(null);
+
+  useEffect(() => {
+    if (!ws) {
+      const ws = new WebSocket(url);
+      ws.onopen = () => {
+        console.log('[DEBUG] open');
+        setWs(ws);
+      };
+    }
+
+    return () => {
+      ws?.close();
+      console.log('[DEBUG] closed');
+    };
+  }, [ws, url]);
+
+  return ws;
+};
+
+const ChatWindow = () => {
+  const ws = useSocket(process.env.NEXT_PUBLIC_WS_URL!);
+  const [chatHistory, setChatHistory] = useState<[string, string][]>([]);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [messageAppeared, setMessageAppeared] = useState(false);
+
+  const sendMessage = async (message: string) => {
+    if (loading) return;
+    setLoading(true);
+    setMessageAppeared(false);
+
+    let sources: Document[] | undefined = undefined;
+    let recievedMessage = '';
+    let added = false;
+
+    ws?.send(
+      JSON.stringify({
+        type: 'message',
+        content: message,
+        history: [...chatHistory, ['human', message]],
+      }),
+    );
+
+    setMessages((prevMessages) => [
+      ...prevMessages,
+      {
+        content: message,
+        id: Math.random().toString(36).substring(7),
+        role: 'user',
+      },
+    ]);
+
+    const messageHandler = (e: MessageEvent) => {
+      const data = JSON.parse(e.data);
+
+      if (data.type === 'sources') {
+        sources = data.data;
+        if (!added) {
+          setMessages((prevMessages) => [
+            ...prevMessages,
+            {
+              content: '',
+              id: data.messageId,
+              role: 'assistant',
+              sources: sources,
+            },
+          ]);
+          added = true;
+        }
+        setMessageAppeared(true);
+      }
+
+      if (data.type === 'message') {
+        if (!added) {
+          setMessages((prevMessages) => [
+            ...prevMessages,
+            {
+              content: data.data,
+              id: data.messageId,
+              role: 'assistant',
+              sources: sources,
+            },
+          ]);
+          added = true;
+        }
+
+        setMessages((prev) =>
+          prev.map((message) => {
+            if (message.id === data.messageId) {
+              return { ...message, content: message.content + data.data };
+            }
+
+            return message;
+          }),
+        );
+
+        recievedMessage += data.data;
+        setMessageAppeared(true);
+      }
+
+      if (data.type === 'messageEnd') {
+        setChatHistory((prevHistory) => [
+          ...prevHistory,
+          ['human', message],
+          ['assistant', recievedMessage],
+        ]);
+        ws?.removeEventListener('message', messageHandler);
+        setLoading(false);
+      }
+    };
+
+    ws?.addEventListener('message', messageHandler);
+  };
+
+  const rewrite = (messageId: string) => {
+    const index = messages.findIndex((msg) => msg.id === messageId);
+
+    if (index === -1) return;
+
+    const message = messages[index - 1];
+
+    setMessages((prev) => {
+      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+    });
+    setChatHistory((prev) => {
+      return [...prev.slice(0, messages.length > 2 ? index - 1 : 0)];
+    });
+
+    sendMessage(message.content);
+  };
+
+  return (
+    <div>
+      {messages.length > 0 ? (
+        <>
+          <Navbar />
+          <Chat
+            loading={loading}
+            messages={messages}
+            sendMessage={sendMessage}
+            messageAppeared={messageAppeared}
+            rewrite={rewrite}
+          />
+        </>
+      ) : (
+        <EmptyChat sendMessage={sendMessage} />
+      )}
+    </div>
+  );
+};
+
+export default ChatWindow;

ui/components/EmptyChat.tsx

@@ -0,0 +1,18 @@
+import EmptyChatMessageInput from './EmptyChatMessageInput';
+
+const EmptyChat = ({
+  sendMessage,
+}: {
+  sendMessage: (message: string) => void;
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
+      <h2 className="text-white/70 text-3xl font-medium -mt-8">
+        Research begins here.
+      </h2>
+      <EmptyChatMessageInput sendMessage={sendMessage} />
+    </div>
+  );
+};
+
+export default EmptyChat;

ui/components/EmptyChatMessageInput.tsx

@@ -0,0 +1,61 @@
+import { ArrowRight } from 'lucide-react';
+import { useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Attach, CopilotToggle, Focus } from './MessageInputActions';
+
+const EmptyChatMessageInput = ({
+  sendMessage,
+}: {
+  sendMessage: (message: string) => void;
+}) => {
+  const [copilotEnabled, setCopilotEnabled] = useState(false);
+  const [message, setMessage] = useState('');
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        sendMessage(message);
+        setMessage('');
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendMessage(message);
+          setMessage('');
+        }
+      }}
+      className="w-full"
+    >
+      <div className="flex flex-col bg-[#111111] px-5 pt-5 pb-2 rounded-lg w-full border border-[#1C1C1C]">
+        <TextareaAutosize
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          minRows={2}
+          className="bg-transparent placeholder:text-white/50 text-sm text-white resize-none focus:outline-none w-full max-h-24 lg:max-h-36 xl:max-h-48"
+          placeholder="Ask anything..."
+        />
+        <div className="flex flex-row items-center justify-between mt-4">
+          <div className="flex flex-row items-center space-x-1 -mx-2">
+            <Focus />
+            <Attach />
+          </div>
+          <div className="flex flex-row items-center space-x-4 -mx-2">
+            <CopilotToggle
+              copilotEnabled={copilotEnabled}
+              setCopilotEnabled={setCopilotEnabled}
+            />
+            <button
+              disabled={message.trim().length === 0}
+              className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+            >
+              <ArrowRight className="bg-background" size={17} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default EmptyChatMessageInput;

ui/components/Layout.tsx

@@ -0,0 +1,9 @@
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <main className="lg:pl-20 bg-[#0A0A0A] min-h-screen">
+      <div className="max-w-screen-lg lg:mx-auto mx-4">{children}</div>
+    </main>
+  );
+};
+
+export default Layout;

ui/components/MessageActions/Copy.tsx

@@ -0,0 +1,29 @@
+import { Check, ClipboardList } from 'lucide-react';
+import { Message } from '../ChatWindow';
+import { useState } from 'react';
+
+const Copy = ({
+  message,
+  initialMessage,
+}: {
+  message: Message;
+  initialMessage: string;
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <button
+      onClick={() => {
+        const contentToCopy = `${initialMessage}${message.sources && message.sources.length > 0 && `\n\nCitations:\n${message.sources?.map((source: any, i: any) => `[${i + 1}] ${source.metadata.url}`).join(`\n`)}`}`;
+        navigator.clipboard.writeText(contentToCopy);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+      }}
+      className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+    >
+      {copied ? <Check size={18} /> : <ClipboardList size={18} />}
+    </button>
+  );
+};
+
+export default Copy;

ui/components/MessageActions/Rewrite.tsx

@@ -0,0 +1,20 @@
+import { ArrowLeftRight } from 'lucide-react';
+
+const Rewrite = ({
+  rewrite,
+  messageId,
+}: {
+  rewrite: (messageId: string) => void;
+  messageId: string;
+}) => {
+  return (
+    <button
+      onClick={() => rewrite(messageId)}
+      className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white"
+    >
+      <ArrowLeftRight size={18} />
+    </button>
+  );
+};
+
+export default Rewrite;

ui/components/MessageBox.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { MutableRefObject, useEffect, useState } from 'react';
+import { Message } from './ChatWindow';
+import { cn } from '@/lib/utils';
+import {
+  BookCopy,
+  Disc3,
+  FilePen,
+  PlusIcon,
+  Share,
+  ThumbsDown,
+  VideoIcon,
+} from 'lucide-react';
+import Markdown from 'markdown-to-jsx';
+import Copy from './MessageActions/Copy';
+import Rewrite from './MessageActions/Rewrite';
+import MessageSources from './MessageSources';
+import SearchImages from './SearchImages';
+
+const MessageBox = ({
+  message,
+  messageIndex,
+  history,
+  loading,
+  dividerRef,
+  isLast,
+  rewrite,
+}: {
+  message: Message;
+  messageIndex: number;
+  history: Message[];
+  loading: boolean;
+  dividerRef?: MutableRefObject<HTMLDivElement | null>;
+  isLast: boolean;
+  rewrite: (messageId: string) => void;
+}) => {
+  const [parsedMessage, setParsedMessage] = useState(message.content);
+
+  useEffect(() => {
+    if (
+      message.role === 'assistant' &&
+      message?.sources &&
+      message.sources.length > 0
+    ) {
+      const regex = /\[(\d+)\]/g;
+
+      return setParsedMessage(
+        message.content.replace(
+          regex,
+          (_, number) =>
+            `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-[#1C1C1C] px-1 rounded ml-1 no-underline text-xs text-white/70 relative">${number}</a>`,
+        ),
+      );
+    }
+    setParsedMessage(message.content);
+  }, [message.content, message.sources, message.role]);
+
+  return (
+    <div>
+      {message.role === 'user' && (
+        <div className={cn('w-full', messageIndex === 0 ? 'pt-16' : 'pt-8')}>
+          <h2 className="text-white font-medium text-3xl lg:w-9/12">
+            {message.content}
+          </h2>
+        </div>
+      )}
+
+      {message.role === 'assistant' && (
+        <div className="flex flex-col space-y-9 lg:space-y-0 lg:flex-row lg:justify-between lg:space-x-9">
+          <div
+            ref={dividerRef}
+            className="flex flex-col space-y-6 w-full lg:w-9/12"
+          >
+            {message.sources && message.sources.length > 0 && (
+              <div className="flex flex-col space-y-2">
+                <div className="flex flex-row items-center space-x-2">
+                  <BookCopy className="text-white" size={20} />
+                  <h3 className="text-white font-medium text-xl">Sources</h3>
+                </div>
+                <MessageSources sources={message.sources} />
+              </div>
+            )}
+            <div className="flex flex-col space-y-2">
+              <div className="flex flex-row items-center space-x-2">
+                <Disc3
+                  className={cn(
+                    'text-white',
+                    isLast && loading ? 'animate-spin' : 'animate-none',
+                  )}
+                  size={20}
+                />
+                <h3 className="text-white font-medium text-xl">Answer</h3>
+              </div>
+              <Markdown className="prose max-w-none break-words prose-invert prose-p:leading-relaxed prose-pre:p-0 text-white text-sm md:text-base font-medium">
+                {parsedMessage}
+              </Markdown>
+              {!loading && (
+                <div className="flex flex-row items-center justify-between w-full text-white py-4 -mx-2">
+                  <div className="flex flex-row items-center space-x-1">
+                    <button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
+                      <Share size={18} />
+                    </button>
+                    <Rewrite rewrite={rewrite} messageId={message.id} />
+                  </div>
+                  <div className="flex flex-row items-center space-x-1">
+                    <Copy initialMessage={message.content} message={message} />
+                    <button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
+                      <FilePen size={18} />
+                    </button>
+                    <button className="p-2 text-white/70 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
+                      <ThumbsDown size={18} />
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="lg:sticky lg:top-20 flex flex-col items-center space-y-3 w-full lg:w-3/12 z-30 h-full pb-4">
+            <SearchImages query={history[messageIndex - 1].content} />
+            <div className="border border-dashed border-[#1C1C1C] px-4 py-2 flex flex-row items-center justify-between rounded-lg text-white text-sm w-full">
+              <div className="flex flex-row items-center space-x-2">
+                <VideoIcon size={17} />
+                <p>Search videos</p>
+              </div>
+              <PlusIcon className="text-[#24A0ED]" size={17} />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MessageBox;

ui/components/MessageBoxLoading.tsx

@@ -0,0 +1,11 @@
+const MessageBoxLoading = () => {
+  return (
+    <div className="flex flex-col space-y-2 w-full lg:w-9/12 bg-[#111111] animate-pulse rounded-lg p-3">
+      <div className="h-2 rounded-full w-full bg-[#1c1c1c]" />
+      <div className="h-2 rounded-full w-9/12 bg-[#1c1c1c]" />
+      <div className="h-2 rounded-full w-10/12 bg-[#1c1c1c]" />
+    </div>
+  );
+};
+
+export default MessageBoxLoading;

ui/components/MessageInput.tsx

@@ -0,0 +1,89 @@
+import { cn } from '@/lib/utils';
+import { ArrowUp } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { Attach, CopilotToggle } from './MessageInputActions';
+
+const MessageInput = ({
+  sendMessage,
+}: {
+  sendMessage: (message: string) => void;
+}) => {
+  const [copilotEnabled, setCopilotEnabled] = useState(false);
+  const [message, setMessage] = useState('');
+  const [textareaRows, setTextareaRows] = useState(1);
+  const [mode, setMode] = useState<'multi' | 'single'>('single');
+
+  useEffect(() => {
+    if (textareaRows >= 2 && message && mode === 'single') {
+      setMode('multi');
+    } else if (!message && mode === 'multi') {
+      setMode('single');
+    }
+  }, [textareaRows, mode, message]);
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        sendMessage(message);
+        setMessage('');
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendMessage(message);
+          setMessage('');
+        }
+      }}
+      className={cn(
+        'bg-[#111111] p-4 flex items-center overflow-hidden border border-[#1C1C1C]',
+        mode === 'multi' ? 'flex-col rounded-lg' : 'flex-row rounded-full',
+      )}
+    >
+      {mode === 'single' && <Attach />}
+      <TextareaAutosize
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onHeightChange={(height, props) => {
+          setTextareaRows(Math.ceil(height / props.rowHeight));
+        }}
+        className="transition bg-transparent placeholder:text-white/50 placeholder:text-sm text-sm text-white resize-none focus:outline-none w-full px-2 max-h-24 lg:max-h-36 xl:max-h-48 flex-grow flex-shrink"
+        placeholder="Ask a follow-up"
+      />
+      {mode === 'single' && (
+        <div className="flex flex-row items-center space-x-4">
+          <CopilotToggle
+            copilotEnabled={copilotEnabled}
+            setCopilotEnabled={setCopilotEnabled}
+          />
+          <button
+            disabled={message.trim().length === 0}
+            className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+          >
+            <ArrowUp className="bg-background" size={17} />
+          </button>
+        </div>
+      )}
+      {mode === 'multi' && (
+        <div className="flex flex-row items-center justify-between w-full pt-2">
+          <Attach />
+          <div className="flex flex-row items-center space-x-4">
+            <CopilotToggle
+              copilotEnabled={copilotEnabled}
+              setCopilotEnabled={setCopilotEnabled}
+            />
+            <button
+              disabled={message.trim().length === 0}
+              className="bg-[#24A0ED] text-white disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#ececec21] rounded-full p-2"
+            >
+              <ArrowUp className="bg-background" size={17} />
+            </button>
+          </div>
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default MessageInput;

ui/components/MessageInputActions.tsx

@@ -0,0 +1,58 @@
+import { CopyPlus, ScanEye } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Switch } from '@headlessui/react';
+
+export const Attach = () => {
+  return (
+    <button className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
+      <CopyPlus />
+    </button>
+  );
+};
+
+export const Focus = () => {
+  return (
+    <button className="p-2 text-white/50 rounded-xl hover:bg-[#1c1c1c] transition duration-200 hover:text-white">
+      <ScanEye />
+    </button>
+  );
+};
+
+export const CopilotToggle = ({
+  copilotEnabled,
+  setCopilotEnabled,
+}: {
+  copilotEnabled: boolean;
+  setCopilotEnabled: (enabled: boolean) => void;
+}) => {
+  return (
+    <div className="group flex flex-row items-center space-x-1 active:scale-95 duration-200 transition cursor-pointer">
+      <Switch
+        checked={copilotEnabled}
+        onChange={setCopilotEnabled}
+        className="bg-[#111111] border border-[#1C1C1C] relative inline-flex h-5 w-10 sm:h-6 sm:w-11 items-center rounded-full"
+      >
+        <span className="sr-only">Copilot</span>
+        <span
+          className={cn(
+            copilotEnabled
+              ? 'translate-x-6 bg-[#24A0ED]'
+              : 'translate-x-1 bg-white/50',
+            'inline-block h-3 w-3 sm:h-4 sm:w-4 transform rounded-full transition-all duration-200',
+          )}
+        />
+      </Switch>
+      <p
+        onClick={() => setCopilotEnabled(!copilotEnabled)}
+        className={cn(
+          'text-xs font-medium transition-colors duration-150 ease-in-out',
+          copilotEnabled
+            ? 'text-[#24A0ED]'
+            : 'text-white/50 group-hover:text-white',
+        )}
+      >
+        Copilot
+      </p>
+    </div>
+  );
+};

ui/components/MessageSources.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable @next/next/no-img-element */
+import { cn } from '@/lib/utils';
+import { Dialog, Transition } from '@headlessui/react';
+import { Document } from '@langchain/core/documents';
+import Link from 'next/link';
+import { Fragment, useState } from 'react';
+
+const MessageSources = ({ sources }: { sources: Document[] }) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  function closeModal() {
+    setIsDialogOpen(false);
+    document.body.classList.remove('overflow-hidden-scrollable');
+  }
+
+  function openModal() {
+    setIsDialogOpen(true);
+    document.body.classList.add('overflow-hidden-scrollable');
+  }
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
+      {sources.slice(0, 3).map((source, i) => (
+        <a
+          className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
+          key={i}
+          href={source.metadata.url}
+          target="_blank"
+        >
+          <p className="text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
+            {source.metadata.title}
+          </p>
+          <div className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center space-x-1">
+              <img
+                src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${source.metadata.url}`}
+                width={16}
+                height={16}
+                alt="favicon"
+                className="rounded-lg h-4 w-4"
+              />
+              <p className="text-xs text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
+                {source.metadata.url.replace(/.+\/\/|www.|\..+/g, '')}
+              </p>
+            </div>
+            <div className="flex flex-row items-center space-x-1 text-white/50 text-xs">
+              <div className="bg-white/50 h-[4px] w-[4px] rounded-full" />
+              <span>{i + 1}</span>
+            </div>
+          </div>
+        </a>
+      ))}
+      {sources.length > 3 && (
+        <button
+          onClick={openModal}
+          className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 rounded-lg px-4 py-2 flex flex-col justify-between space-y-2"
+        >
+          <div className="flex flex-row items-center space-x-1">
+            {sources.slice(3, 6).map((source, i) => (
+              <img
+                src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${source.metadata.url}`}
+                width={16}
+                height={16}
+                alt="favicon"
+                className="rounded-lg h-4 w-4"
+                key={i}
+              />
+            ))}
+          </div>
+          <p className="text-xs text-white/50">
+            View {sources.length - 3} more
+          </p>
+        </button>
+      )}
+      <Transition appear show={isDialogOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-50" onClose={closeModal}>
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-200"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-100"
+                leaveFrom="opacity-100 scale-200"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform rounded-2xl bg-[#111111] border border-[#1c1c1c] p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title className="text-lg font-medium leading-6 text-white">
+                    Sources
+                  </Dialog.Title>
+                  <div className="grid grid-cols-2 gap-2 overflow-auto max-h-[300px] mt-2 pr-2">
+                    {sources.map((source, i) => (
+                      <a
+                        className="bg-[#111111] hover:bg-[#1c1c1c] border border-[#1c1c1c] transition duration-200 rounded-lg p-3 flex flex-col space-y-2 font-medium"
+                        key={i}
+                        href={source.metadata.url}
+                        target="_blank"
+                      >
+                        <p className="text-white text-xs overflow-hidden whitespace-nowrap text-ellipsis">
+                          {source.metadata.title}
+                        </p>
+                        <div className="flex flex-row items-center justify-between">
+                          <div className="flex flex-row items-center space-x-1">
+                            <img
+                              src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${source.metadata.url}`}
+                              width={16}
+                              height={16}
+                              alt="favicon"
+                              className="rounded-lg h-4 w-4"
+                            />
+                            <p className="text-xs text-white/50 overflow-hidden whitespace-nowrap text-ellipsis">
+                              {source.metadata.url.replace(
+                                /.+\/\/|www.|\..+/g,
+                                '',
+                              )}
+                            </p>
+                          </div>
+                          <div className="flex flex-row items-center space-x-1 text-white/50 text-xs">
+                            <div className="bg-white/50 h-[4px] w-[4px] rounded-full" />
+                            <span>{i + 1}</span>
+                          </div>
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default MessageSources;

ui/components/Navbar.tsx

@@ -0,0 +1,29 @@
+import { Clock, Edit, Share, Trash } from 'lucide-react';
+
+const Navbar = () => {
+  return (
+    <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-32 lg:pr-4 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-white/70 border-b bg-[#0A0A0A] border-[#1C1C1C]">
+      <Edit
+        size={17}
+        className="active:scale-95 transition duration-100 cursor-pointer lg:hidden"
+      />
+      <div className="hidden lg:flex flex-row items-center space-x-2">
+        <Clock size={17} />
+        <p className="text-xs">15 minutes ago</p>
+      </div>
+      <p className="hidden lg:flex">Blog on AI</p>
+      <div className="flex flex-row items-center space-x-4">
+        <Share
+          size={17}
+          className="active:scale-95 transition duration-100 cursor-pointer"
+        />
+        <Trash
+          size={17}
+          className="text-red-400 active:scale-95 transition duration-100 cursor-pointer"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;

ui/components/SearchImages.tsx

@@ -0,0 +1,135 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImagesIcon, PlusIcon } from 'lucide-react';
+import { useState } from 'react';
+import Lightbox from 'yet-another-react-lightbox';
+import 'yet-another-react-lightbox/styles.css';
+
+type Image = {
+  url: string;
+  img_src: string;
+  title: string;
+};
+
+const SearchImages = ({ query }: { query: string }) => {
+  const [images, setImages] = useState<Image[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [slides, setSlides] = useState<any[]>([]);
+
+  return (
+    <>
+      {!loading && images === null && (
+        <button
+          onClick={async () => {
+            setLoading(true);
+            const res = await fetch(
+              `${process.env.NEXT_PUBLIC_API_URL}/images`,
+              {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  query: query,
+                  chat_history: [],
+                }),
+              },
+            );
+
+            const data = await res.json();
+
+            const images = data.images;
+            setImages(images);
+            setSlides(
+              images.map((image: Image) => {
+                return {
+                  src: image.img_src,
+                };
+              }),
+            );
+            setLoading(false);
+          }}
+          className="border border-dashed border-[#1C1C1C] hover:bg-[#1c1c1c] active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg text-white text-sm w-full"
+        >
+          <div className="flex flex-row items-center space-x-2">
+            <ImagesIcon size={17} />
+            <p>Search images</p>
+          </div>
+          <PlusIcon className="text-[#24A0ED]" size={17} />
+        </button>
+      )}
+      {loading && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
+          {[...Array(4)].map((_, i) => (
+            <div
+              key={i}
+              className="bg-[#1C1C1C] h-32 w-full rounded-lg animate-pulse aspect-video object-cover"
+            />
+          ))}
+        </div>
+      )}
+      {images !== null && images.length > 0 && (
+        <>
+          <div className="grid grid-cols-2 gap-2">
+            {images.length > 4
+              ? images.slice(0, 3).map((image, i) => (
+                  <img
+                    onClick={() => {
+                      setOpen(true);
+                      setSlides([
+                        slides[i],
+                        ...slides.slice(0, i),
+                        ...slides.slice(i + 1),
+                      ]);
+                    }}
+                    key={i}
+                    src={image.img_src}
+                    alt={image.title}
+                    className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 cursor-pointer"
+                  />
+                ))
+              : images.map((image, i) => (
+                  <img
+                    onClick={() => {
+                      setOpen(true);
+                      setSlides([
+                        slides[i],
+                        ...slides.slice(0, i),
+                        ...slides.slice(i + 1),
+                      ]);
+                    }}
+                    key={i}
+                    src={image.img_src}
+                    alt={image.title}
+                    className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 cursor-pointer"
+                  />
+                ))}
+            {images.length > 4 && (
+              <button
+                onClick={() => setOpen(true)}
+                className="bg-[#111111] hover:bg-[#1c1c1c] transition duration-200 active:scale-95 h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
+              >
+                <div className="flex flex-row items-center space-x-1">
+                  {images.slice(3, 6).map((image, i) => (
+                    <img
+                      key={i}
+                      src={image.img_src}
+                      alt={image.title}
+                      className="h-6 w-12 rounded-md lg:h-3 lg:w-6 lg:rounded-sm aspect-video object-cover"
+                    />
+                  ))}
+                </div>
+                <p className="text-white/70 text-xs">
+                  View {images.slice(0, 2).length} more
+                </p>
+              </button>
+            )}
+          </div>
+          <Lightbox open={open} close={() => setOpen(false)} slides={slides} />
+        </>
+      )}
+    </>
+  );
+};
+
+export default SearchImages;

ui/components/Sidebar.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { BookOpenText, Home, Search, SquarePen } from 'lucide-react';
+import { SiGithub } from '@icons-pack/react-simple-icons';
+import Link from 'next/link';
+import { useSelectedLayoutSegments } from 'next/navigation';
+import React from 'react';
+import Layout from './Layout';
+
+const Sidebar = ({ children }: { children: React.ReactNode }) => {
+  const segments = useSelectedLayoutSegments();
+
+  const navLinks = [
+    {
+      icon: Home,
+      href: '/',
+      active: segments.length === 0,
+      label: 'Home',
+    },
+    {
+      icon: Search,
+      href: '/discover',
+      active: segments.includes('discover'),
+      label: 'Discover',
+    },
+    {
+      icon: BookOpenText,
+      href: '/library',
+      active: segments.includes('library'),
+      label: 'Library',
+    },
+  ];
+
+  return (
+    <div>
+      <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
+        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-[#111111] px-2 py-8">
+          <a href="/">
+            <SquarePen className="text-white cursor-pointer" />
+          </a>
+          <div className="flex flex-col items-center gap-y-3 w-full">
+            {navLinks.map((link, i) => (
+              <Link
+                key={i}
+                href={link.href}
+                className={cn(
+                  'relative flex flex-row items-center justify-center cursor-pointer hover:bg-white/10 hover:text-white duration-150 transition w-full py-2 rounded-lg',
+                  link.active ? 'text-white' : 'text-white/70',
+                )}
+              >
+                <link.icon />
+                {link.active && (
+                  <div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-white" />
+                )}
+              </Link>
+            ))}
+          </div>
+          <Link
+            href="https://github.com/ItzCrazyKns/Perplexica"
+            className="flex flex-col items-center text-center justify-center"
+          >
+            <SiGithub
+              className="text-white"
+              onPointerEnterCapture={undefined}
+              onPointerLeaveCapture={undefined}
+            />
+          </Link>
+        </div>
+      </div>
+
+      <div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-[#111111] px-4 py-4 shadow-sm lg:hidden">
+        {navLinks.map((link, i) => (
+          <Link
+            href={link.href}
+            key={i}
+            className={cn(
+              'relative flex flex-col items-center space-y-1 text-center w-full',
+              link.active ? 'text-white' : 'text-white/70',
+            )}
+          >
+            {link.active && (
+              <div className="absolute top-0 -mt-4 h-1 w-full rounded-b-lg bg-white" />
+            )}
+            <link.icon />
+            <p className="text-xs">{link.label}</p>
+          </Link>
+        ))}
+      </div>
+
+      <Layout>{children}</Layout>
+    </div>
+  );
+};
+
+export default Sidebar;