Skip to content

Commit bf5a3e7

Browse files
Kabeer2004Kabeer2004
committed
fix (ui/ux): ui ux fixes in frontend client
1 parent aaacb2f commit bf5a3e7

14 files changed

Lines changed: 467 additions & 399 deletions

File tree

‎src/client/app/chat/page.js‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
IconDotsVertical,
1515
IconPhone,
1616
IconPhoneOff,
17-
IconWaveSine,
17+
IconHeadphonesFilled,
1818
IconMicrophone,
1919
IconMicrophoneOff,
2020
IconMessageOff,
@@ -1333,22 +1333,34 @@ export default function ChatPage() {
13331333
initial={{ opacity: 0, y: 10 }}
13341334
animate={{ opacity: 1, y: 0 }}
13351335
exit={{ opacity: 0, y: 10 }}
1336-
className="bg-neutral-800/60 p-3 rounded-t-lg border-b border-neutral-700/50 flex justify-between items-center"
1336+
className="bg-neutral-800/60 p-3 rounded-t-lg border-b border-neutral-700/50 flex justify-between items-center gap-4"
13371337
>
1338-
<div>
1338+
<div className="min-w-0 flex-1">
13391339
<p className="text-xs text-neutral-400 flex items-center gap-1.5">
13401340
<IconArrowBackUp size={14} /> Replying to{" "}
13411341
{replyingTo.role === "user"
13421342
? "yourself"
13431343
: "the assistant"}
13441344
</p>
1345-
<p className="text-sm text-neutral-200 mt-1 truncate">
1346-
{replyingTo.content.replace(/<[^>]+>/g, "").trim()}
1345+
<p
1346+
className="text-sm text-neutral-200 mt-1 truncate max-w-[320px] sm:max-w-[480px] md:max-w-[600px] overflow-hidden"
1347+
title={replyingTo.content
1348+
.replace(/<[^>]+>/g, "")
1349+
.trim()}
1350+
>
1351+
{(() => {
1352+
const clean = replyingTo.content
1353+
.replace(/<[^>]+>/g, "")
1354+
.trim()
1355+
return clean.length > 120
1356+
? clean.slice(0, 120) + "…"
1357+
: clean
1358+
})()}
13471359
</p>
13481360
</div>
13491361
<button
13501362
onClick={() => setReplyingTo(null)}
1351-
className="p-1.5 rounded-full text-neutral-400 hover:bg-neutral-700 hover:text-white"
1363+
className="p-1.5 rounded-full text-neutral-400 hover:bg-neutral-700 hover:text-white flex-shrink-0"
13521364
>
13531365
<IconX size={16} />
13541366
</button>
@@ -1397,7 +1409,7 @@ export default function ChatPage() {
13971409
data-tour-id="chat-input-area"
13981410
className="relative bg-neutral-800/60 backdrop-blur-sm border border-neutral-700/50 rounded-2xl"
13991411
>
1400-
<div className="relative p-4 flex items-start gap-4">
1412+
<div className="relative p-3 md:p-4 flex items-start gap-3 md:gap-4">
14011413
<textarea
14021414
ref={textareaRef}
14031415
value={input}
@@ -1416,8 +1428,8 @@ export default function ChatPage() {
14161428
style={{ maxHeight: "200px" }}
14171429
/>
14181430
{!input && !uploadedFilename && (
1419-
<div className="absolute top-1/2 left-4 right-4 -translate-y-1/2 text-neutral-500 pointer-events-none z-0 overflow-hidden">
1420-
<TextLoop className="text-base ml-5 whitespace-normal md:whitespace-nowrap">
1431+
<div className="absolute top-1/2 left-3 right-3 md:left-4 md:right-4 -translate-y-1/2 text-neutral-500 pointer-events-none z-0 overflow-hidden">
1432+
<TextLoop className="text-base ml-4 md:ml-5 whitespace-nowrap">
14211433
<span>Ask anything...</span>
14221434
<span>Summarize my unread emails from today</span>
14231435
<span>
@@ -1428,7 +1440,7 @@ export default function ChatPage() {
14281440
</div>
14291441
)}
14301442
</div>
1431-
<div className="flex justify-between items-center px-3 pb-3">
1443+
<div className="flex justify-between items-center px-2 pb-2 md:px-3 md:pb-3">
14321444
<div className="flex items-center gap-1">
14331445
<input
14341446
type="file"
@@ -1479,7 +1491,7 @@ export default function ChatPage() {
14791491
: "Voice Mode (Pro Feature)"
14801492
}
14811493
>
1482-
<IconWaveSine size={18} />
1494+
<IconHeadphonesFilled size={18} />
14831495
</button>
14841496
{thinking ? (
14851497
<button
@@ -1754,7 +1766,7 @@ export default function ChatPage() {
17541766

17551767
<main
17561768
ref={scrollContainerRef}
1757-
className="flex-1 overflow-y-auto px-4 pb-4 md:p-6 flex flex-col custom-scrollbar"
1769+
className="flex-1 overflow-y-auto sm:p-0 md:px-4 pb-4 md:p-6 flex flex-col custom-scrollbar"
17581770
>
17591771
{isLoading ? (
17601772
<div className="flex-1 flex justify-center items-center">
@@ -1947,7 +1959,7 @@ export default function ChatPage() {
19471959
</div>
19481960
</div>
19491961
) : (
1950-
<div className="w-full max-w-4xl mx-auto flex flex-col gap-3 md:gap-4 flex-1">
1962+
<div className="w-full max-w-4xl px-2 mx-auto flex flex-col gap-3 md:gap-4 flex-1">
19511963
{isLoadingOlder && (
19521964
<div className="flex justify-center py-4">
19531965
<IconLoader className="animate-spin text-neutral-500" />
@@ -2004,7 +2016,7 @@ export default function ChatPage() {
20042016
)}
20052017
</main>
20062018
{!isLoading && !isVoiceMode && displayedMessages.length > 0 && (
2007-
<div className="flex-shrink-0 px-4 pt-2 pb-4 sm:px-6 sm:pb-6 bg-transparent">
2019+
<div className="flex-shrink-0 px-2 pt-2 pb-4 sm:px-6 sm:pb-6 bg-transparent">
20082020
<div className="relative w-full max-w-4xl mx-auto">
20092021
{uploadedFilename
20102022
? renderUploadedFilePreview()

‎src/client/app/integrations/page.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -652,7 +652,7 @@ const IntegrationHeader = ({
652652
onCategoryChange
653653
}) => {
654654
return (
655-
<div className="mb-8 md:sticky md:top-0 bg-dark-surface/80 backdrop-blur-sm py-4 z-10">
655+
<div className="xs:mb-4 md:mb-8 mt-1 md:sticky md:top-0 bg-dark-surface/80 backdrop-blur-sm md:py-4 z-10">
656656
{/* Redesigned Search Bar */}
657657
<div className="relative">
658658
<IconSearch
@@ -1533,19 +1533,15 @@ const IntegrationsPage = () => {
15331533
<InteractiveNetworkBackground />
15341534
</div>
15351535
<div className="absolute -top-[250px] left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-orange/10 rounded-full blur-3xl -z-10" />
1536-
<header className="flex items-center justify-between p-4 sm:p-6 md:px-8 md:py-6 bg-transparent border-b border-[var(--color-primary-surface)] shrink-0">
1536+
<header className="flex items-center justify-between p-4 sm:p-6 md:px-8 md:py-6 bg-transparent shrink-0">
15371537
<div>
15381538
<h1 className="text-3xl lg:text-4xl font-bold text-white flex items-center gap-3">
15391539
<IconPlugConnected />
15401540
Integrations
15411541
</h1>
1542-
<p className="text-neutral-400 mt-1">
1543-
Connect your digital life to unlock Sentient's full
1544-
potential.
1545-
</p>
15461542
</div>
15471543
</header>
1548-
<main className="flex-1 overflow-y-auto p-4 sm:p-6 md:px-8 custom-scrollbar">
1544+
<main className="flex-1 overflow-y-auto px-4 pb-4 sm:p-6 md:px-8 custom-scrollbar">
15491545
{loading ? (
15501546
<div className="flex justify-center items-center h-full">
15511547
<IconLoader className="w-12 h-12 animate-spin text-brand-orange" />

‎src/client/app/memories/page.js‎

Lines changed: 90 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -559,6 +559,66 @@ const MemoryGraph = ({ data, onSelectNode, onClearSelection }) => {
559559
)
560560
}
561561

562+
// --- Tab Component for View Switcher (from tasks page) ---
563+
const buttonVariants = {
564+
initial: {
565+
gap: 0,
566+
paddingLeft: ".5rem",
567+
paddingRight: ".5rem"
568+
},
569+
animate: (selected) => ({
570+
gap: selected ? ".5rem" : 0,
571+
paddingLeft: selected ? "1rem" : ".5rem",
572+
paddingRight: selected ? "1rem" : ".5rem"
573+
})
574+
}
575+
576+
const spanVariants = {
577+
initial: { width: 0, opacity: 0 },
578+
animate: { width: "auto", opacity: 1 },
579+
exit: { width: 0, opacity: 0 }
580+
}
581+
582+
const transition = { delay: 0.1, type: "spring", bounce: 0, duration: 0.35 }
583+
584+
const Tab = ({ text, selected, setSelected, value, children, ...props }) => {
585+
return (
586+
<motion.button
587+
variants={buttonVariants}
588+
initial="initial"
589+
animate="animate"
590+
{...props}
591+
custom={selected}
592+
onClick={() => setSelected(value)}
593+
transition={transition}
594+
className={`${
595+
selected ? "bg-white/10 text-white " : " hover:text-white"
596+
} relative flex items-center rounded-full px-4 py-2 text-sm font-medium text-neutral-400 transition-colors duration-300`}
597+
>
598+
{children}
599+
<AnimatePresence>
600+
{selected && (
601+
<motion.span
602+
variants={spanVariants}
603+
initial="initial"
604+
animate="animate"
605+
exit="exit"
606+
transition={transition}
607+
className="overflow-hidden"
608+
>
609+
{text}
610+
</motion.span>
611+
)}
612+
</AnimatePresence>
613+
</motion.button>
614+
)
615+
}
616+
617+
const memoryTabs = [
618+
{ title: "Graph", value: "graph", icon: <IconShare3 size={16} /> },
619+
{ title: "List", value: "list", icon: <IconLayoutGrid size={16} /> }
620+
]
621+
562622
export default function MemoriesPage() {
563623
const [view, setView] = useState("graph")
564624
const [memories, setMemories] = useState([])
@@ -724,29 +784,18 @@ export default function MemoriesPage() {
724784
}
725785

726786
const ViewSwitcher = () => (
727-
<div className="flex items-center gap-2 p-1 bg-neutral-800/50 rounded-full">
728-
<button
729-
onClick={() => setView("graph")}
730-
className={cn(
731-
"px-3 py-1.5 rounded-full text-sm font-medium flex items-center gap-2",
732-
view === "graph"
733-
? "bg-white text-black"
734-
: "text-neutral-400 hover:text-white"
735-
)}
736-
>
737-
<IconShare3 size={16} /> Graph
738-
</button>
739-
<button
740-
onClick={() => setView("list")}
741-
className={cn(
742-
"px-3 py-1.5 rounded-full text-sm font-medium flex items-center gap-2",
743-
view === "list"
744-
? "bg-white text-black"
745-
: "text-neutral-400 hover:text-white"
746-
)}
747-
>
748-
<IconLayoutGrid size={16} /> List
749-
</button>
787+
<div className="flex flex-wrap items-center gap-2">
788+
{memoryTabs.map((tab) => (
789+
<Tab
790+
key={tab.value}
791+
text={tab.title}
792+
selected={view === tab.value}
793+
setSelected={setView}
794+
value={tab.value}
795+
>
796+
{tab.icon}
797+
</Tab>
798+
))}
750799
</div>
751800
)
752801

@@ -822,36 +871,30 @@ export default function MemoriesPage() {
822871
</div>
823872
<div className="absolute -top-[250px] left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-orange/10 rounded-full blur-3xl -z-10" />
824873

825-
<header className="flex flex-col md:flex-row md:items-center justify-between p-4 pt-20 md:pt-4 sm:p-6 bg-transparent shrink-0 z-10 border-b border-neutral-800/80">
826-
<div className="flex-1">
827-
<h1 className="text-3xl lg:text-4xl font-bold text-white flex items-center gap-3">
828-
Memories
829-
</h1>
830-
<p className="text-neutral-400 mt-1">
831-
A collection of facts and information I've learned
832-
about you.
833-
</p>
834-
</div>
835-
<div className="flex items-center gap-4 mt-4 md:mt-0">
874+
<header className="flex flex-wrap items-center justify-between gap-4 p-6 pt-20 md:pt-6 bg-transparent shrink-0 z-10 border-b border-neutral-800/80">
875+
<h1 className="text-2xl md:text-3xl font-bold text-white">
876+
Memories
877+
</h1>
878+
<div className="flex items-center gap-2 sm:gap-4">
836879
{!isLoading && (
837-
<div className="text-center p-2 rounded-lg bg-neutral-900/30">
838-
<p className="text-3xl font-bold text-brand-orange">
880+
<div className="text-center">
881+
<p className="text-xl sm:text-2xl font-bold text-brand-orange">
839882
{memories.length}
840883
</p>
841-
<p className="text-xs text-neutral-400">
842-
Memories Saved
884+
<p className="text-[10px] sm:text-xs text-neutral-400 -mt-1">
885+
Memories
843886
</p>
844887
</div>
845888
)}
846-
<div className="w-full md:w-auto flex justify-center items-center gap-2">
847-
<ViewSwitcher />
848-
<button
849-
onClick={() => setIsInfoPanelOpen(true)}
850-
className="p-2 rounded-full bg-neutral-800/50 hover:bg-neutral-700/80 text-white"
851-
>
852-
<IconInfoCircle size={20} />
853-
</button>
854-
</div>
889+
<div className="w-px h-8 bg-neutral-700 hidden sm:block"></div>
890+
<ViewSwitcher />
891+
<button
892+
onClick={() => setIsInfoPanelOpen(true)}
893+
className="p-2 rounded-full bg-neutral-800/50 hover:bg-neutral-700/80 text-white"
894+
aria-label="About memories"
895+
>
896+
<IconInfoCircle size={20} />
897+
</button>
855898
</div>
856899
</header>
857900
<main className="flex-1 relative overflow-hidden">

0 commit comments

Comments
 (0)