Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved NextJS UX #968

Merged
merged 48 commits into from
Nov 2, 2024
Merged
Changes from 1 commit
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
f574802
modified margins
assafelovic Oct 29, 2024
173e832
added starting boilderplate to ux
assafelovic Oct 31, 2024
c26ba9d
Merge branch 'master' into feature/ux
assafelovic Nov 1, 2024
9f9ebe7
updated margins
assafelovic Nov 1, 2024
8b52522
fixed some ux issues
assafelovic Nov 1, 2024
b168e7f
updated ux
assafelovic Nov 1, 2024
27eab56
removed input area when research is loading
assafelovic Nov 1, 2024
9468d98
added loading indicator for more subtle experience
assafelovic Nov 1, 2024
2db52ec
updated min height for better ux
assafelovic Nov 1, 2024
4dae65a
updated settings to preferences
assafelovic Nov 1, 2024
361d282
updated background color
assafelovic Nov 1, 2024
719389c
updated card heights
assafelovic Nov 1, 2024
0e76ebf
finalized ratios between logs
assafelovic Nov 1, 2024
a6b7a7e
modified font size of reports
assafelovic Nov 1, 2024
b7f7cab
modified research task title
assafelovic Nov 1, 2024
0375822
fixed images
assafelovic Nov 1, 2024
f2efd4a
fixed type error in images
assafelovic Nov 1, 2024
a55c9c5
cleaned a bit
assafelovic Nov 1, 2024
16094b8
removed irrelevant files
assafelovic Nov 1, 2024
86aac6b
modified image sorting
assafelovic Nov 1, 2024
65ab9b3
fixed chat on report
assafelovic Nov 1, 2024
f9bca78
refactored structure
assafelovic Nov 1, 2024
7048cac
updated header background with blur and fixed
assafelovic Nov 1, 2024
504af6f
updated backend prompt for chat
assafelovic Nov 1, 2024
cb0de61
fixed markdown style
assafelovic Nov 1, 2024
5c04071
removed logs
assafelovic Nov 1, 2024
b964d4b
added block for all agent logs
assafelovic Nov 1, 2024
767db93
restructured images component
assafelovic Nov 1, 2024
ad591c5
updated images to its own block
assafelovic Nov 1, 2024
d6d1235
added sources overflow
assafelovic Nov 1, 2024
148fce0
refactored image component
assafelovic Nov 1, 2024
b752b51
added access report back
assafelovic Nov 1, 2024
6926de2
fixed bug with options
assafelovic Nov 2, 2024
35d5eb4
modified styles
assafelovic Nov 2, 2024
18f1d4d
refactored structure
assafelovic Nov 2, 2024
ce9fe7f
fixed ordering of all
assafelovic Nov 2, 2024
7ea7361
finalized experience
assafelovic Nov 2, 2024
29228fb
updated markdown
assafelovic Nov 2, 2024
c9f9b6a
refactored page.tsx to be more modular
assafelovic Nov 2, 2024
b845b77
added floating icons in research progress
assafelovic Nov 2, 2024
c76b689
modified
assafelovic Nov 2, 2024
fe335c9
reverted last commit
assafelovic Nov 2, 2024
d9062ab
finalized feature
assafelovic Nov 2, 2024
9e8a6e8
fixed markdown issues with list items
assafelovic Nov 2, 2024
2301407
finalized icons
assafelovic Nov 2, 2024
5c7df27
updated threshold and revised sources layout
assafelovic Nov 2, 2024
2774417
added scrol down hint
assafelovic Nov 2, 2024
ae6ba0e
removed grid from report line items
assafelovic Nov 2, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
restructured images component
assafelovic committed Nov 1, 2024
commit 767db93161d7c18eaf3953bfb3de0d5c8b9423fe
19 changes: 3 additions & 16 deletions frontend/nextjs/app/page.tsx
Original file line number Diff line number Diff line change
@@ -9,10 +9,8 @@ import InputArea from "@/components/ResearchBlocks/InputArea";
import Sources from "@/components/ResearchBlocks/Sources";
import Question from "@/components/ResearchBlocks/Question";
import SubQuestions from "@/components/ResearchBlocks/SubQuestions";
import OrderedLogs from "@/components/ResearchBlocks/OrderedLogs";
import { useRef, useState, useEffect } from "react";
import AccessReport from '../components/Task/AccessReport';
import Accordion from '../components/Task/Accordion';
import LogMessage from '../components/ResearchBlocks/LogMessage';

import { startLanggraphResearch } from '../components/Langgraph/Langgraph';
import findDifferences from '../helpers/findDifferences';
@@ -378,24 +376,13 @@ export default function Home() {
<div className="flex h-full w-full grow flex-col justify-between">
<div className="container w-full space-y-2">
<div className="container space-y-2 task-components">
{/* Show everything except the final answer first */}
{renderComponentsInOrder().filter(component =>
!component?.props?.answer || component?.props?.answer?.length < 100
)}

{/* Show logs */}
{/* Replace logs section with new component */}
{orderedData.length > 0 && (
<div className="container h-auto w-full shrink-0 rounded-lg border border-solid border-[#C2C2C2] bg-gray-800 shadow-md p-5">
<div className="flex items-start gap-4 pb-3 lg:pb-3.5">
<Image src="/img/white-books.svg" alt="logs" width={24} height={24} />
<h3 className="text-base font-bold uppercase leading-[152.5%] text-white">
logs:
</h3>
</div>
<div className="overflow-y-auto min-h-[200px] max-h-[500px] scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-300">
<LogMessage logs={allLogs} />
</div>
</div>
<OrderedLogs logs={allLogs} />
)}

{/* Show the final answer last */}
4 changes: 2 additions & 2 deletions frontend/nextjs/components/ResearchBlocks/LogMessage.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import Accordion from '../Task/Accordion';
import { useEffect, useState } from 'react';
import { remark } from 'remark';
import html from 'remark-html';
import ImagesCarousel from '../Task/ImagesCarousel';
import ImagesAlbum from './ImagesAlbum';
import Image from "next/image";

type ProcessedData = {
@@ -67,7 +67,7 @@ const LogMessage: React.FC<LogMessageProps> = ({ logs }) => {
return <Accordion key={index} logs={[log]} />;
} else if(log.header === "selected_images") {
return (
<ImagesCarousel
<ImagesAlbum
key={index}
images={log.metadata}
/>
31 changes: 31 additions & 0 deletions frontend/nextjs/components/ResearchBlocks/OrderedLogs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import Image from "next/image";
import LogMessage from './LogMessage';

interface Log {
header: string;
text: string;
metadata: any;
key: string;
}

interface OrderedLogsProps {
logs: Log[];
}

const OrderedLogs = ({ logs }: OrderedLogsProps) => {
return (
<div className="container h-auto w-full shrink-0 rounded-lg border border-solid border-[#C2C2C2] bg-gray-800 shadow-md p-5">
<div className="flex items-start gap-4 pb-3 lg:pb-3.5">
<Image src="/img/thinking.svg" alt="logs" width={24} height={24} />
<h3 className="text-base font-bold uppercase leading-[152.5%] text-white">
Agent Work:
</h3>
</div>
<div className="overflow-y-auto min-h-[200px] max-h-[500px] scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-gray-300">
<LogMessage logs={logs} />
</div>
</div>
);
};

export default OrderedLogs;