Skip to content

Commit 90a9e4c

Browse files
mdmohsin7mdmohsin7
authored
shared convo ui and ux improvements (#3375)
2 parents 2ac4ef2 + ecf3182 commit 90a9e4c

File tree

7 files changed

+57
-64
lines changed

7 files changed

+57
-64
lines changed

‎web/frontend/src/components/memories/memory.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,8 @@ export default function Memory({ memory }: MemoryProps) {
2525
</h2>
2626
<div className="flex flex-wrap items-center gap-3 text-sm text-zinc-400 md:text-base">
2727
<time dateTime={new Date(memory.created_at).toISOString()}>
28-
{moment(memory.created_at).format('MMMM Do YYYY, h:mm:ss a')}
28+
{moment(memory.created_at).format('MMMM Do YYYY, h:mm a')}
2929
</time>
30-
<span className="inline-flex items-center gap-1.5 rounded-full bg-zinc-800 px-3 py-1 text-xs font-medium text-zinc-300 ring-1 ring-inset ring-zinc-800/50 md:text-sm">
31-
{memory.structured.emoji}{' '}
32-
{memory.structured.category.charAt(0).toUpperCase() +
33-
memory.structured.category.slice(1)}
34-
</span>
3530
</div>
3631
</div>
3732
</div>

‎web/frontend/src/components/memories/plugins/plugins.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,15 @@ interface PluginsProps {
1111
export default function Plugins({ apps }: PluginsProps) {
1212
return (
1313
<div className="h-auto">
14-
<h3 className="px-4 text-xl font-semibold md:px-12 md:text-2xl">App Summary</h3>
15-
<div className="mt-3 flex flex-col gap-8">
14+
<div className="flex flex-col gap-10">
1615
{apps.map((app, index) => {
1716
return (
1817
<div key={index}>
1918
<ErrorBoundary errorComponent={ErrorIdentifyPlugin}>
2019
<IdentifyPlugin pluginId={app.app_id} />
2120
</ErrorBoundary>
22-
<div className="bg-bg-color px-4 md:px-12">
23-
<Markdown className="prose text-white prose-headings:text-gray-200 prose-p:m-0 prose-p:mt-3 last:prose-p:mt-8 last:prose-p:rounded-lg last:prose-p:bg-zinc-900 last:prose-p:p-2 last:prose-p:px-4 last:prose-p:text-zinc-200 prose-strong:text-white prose-ul:text-gray-300 prose-li:text-gray-300 md:prose-p:text-lg md:last:prose-p:text-sm">
21+
<div>
22+
<Markdown className="prose prose-sm max-w-none text-zinc-300 prose-headings:text-zinc-100 prose-headings:font-semibold prose-p:leading-relaxed prose-p:text-zinc-300 prose-strong:text-zinc-100 prose-ul:text-zinc-300 prose-li:text-zinc-300 prose-li:marker:text-zinc-500 md:prose-base">
2423
{app.content}
2524
</Markdown>
2625
</div>

‎web/frontend/src/components/memories/side-panel/side-panel.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,8 @@ export default async function SidePanel({ previewId }: SidePanelProps) {
3232
{memory.structured.title || DEFAULT_TITLE_MEMORY}
3333
</h2>
3434
<p className="my-2 text-sm text-gray-500 md:text-base">
35-
{moment(memory.created_at).format('MMMM Do YYYY, h:mm:ss a')}
35+
{moment(memory.created_at).format('MMMM Do YYYY, h:mm a')}
3636
</p>
37-
<span className="rounded-full bg-gray-700 px-3 py-1.5 text-xs md:text-sm">
38-
{memory.structured.emoji}{' '}
39-
{memory.structured.category.charAt(0).toUpperCase() +
40-
memory.structured.category.slice(1)}
41-
</span>
4237
</div>
4338
<MemoryWithTabs memory={memory} />
4439
</div>

‎web/frontend/src/components/memories/summary/action-items.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@ interface ActionsItemsProps {
77

88
export default function ActionItems({ items }: ActionsItemsProps) {
99
return (
10-
<div className="px-4 md:px-12">
11-
<h3 className="text-xl font-semibold md:text-2xl">Action Items</h3>
12-
<ul className="mt-3 text-base md:text-lg">
10+
<div>
11+
<h3 className="mb-4 text-xl font-semibold text-white md:text-2xl">Action Items</h3>
12+
<ul className="space-y-4 text-base md:text-lg">
1313
{items.map((item, index) => (
14-
<li key={index} className="my-5 flex items-start gap-3 first:mt-0">
14+
<li key={index} className="flex items-start gap-3">
1515
{item.completed ? (
16-
<div className="mt-1">
17-
<CheckCircle className="min-w-min text-sm text-green-400" />
16+
<div className="mt-0.5">
17+
<CheckCircle className="h-5 w-5 text-green-400" />
1818
</div>
1919
) : (
20-
<div className="mt-1">
21-
<CheckCircle className="min-w-min text-sm text-zinc-600" />
20+
<div className="mt-0.5">
21+
<CheckCircle className="h-5 w-5 text-zinc-600" />
2222
</div>
2323
)}
24-
<p>{item.description}</p>
24+
<p className="flex-1 leading-relaxed text-zinc-300">{item.description}</p>
2525
</li>
2626
))}
2727
</ul>

‎web/frontend/src/components/memories/summary/sumary.tsx‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,11 @@ interface SummaryProps {
1010
export default function Summary({ memory }: SummaryProps) {
1111
return (
1212
<div className="flex flex-col gap-12">
13-
<div className="mt-8 px-6 md:mt-10 md:px-12">
14-
<div className="space-y-4">
15-
<h3 className="text-xl font-semibold tracking-tight text-white md:text-2xl">
16-
Overview
17-
</h3>
18-
{memory.structured.overview ? (
19-
<p className="text-base leading-relaxed text-zinc-300 md:text-lg">
20-
{memory.structured.overview}
21-
</p>
22-
) : (
23-
<div className="rounded-lg border border-dashed border-zinc-700/50 bg-zinc-900/50 p-4 text-center">
24-
<p className="text-sm text-zinc-500">
25-
No overview available for this memory.
26-
</p>
27-
</div>
28-
)}
13+
{memory.apps_results.length > 0 && (
14+
<div className="mt-8 px-6 md:mt-10 md:px-12">
15+
<Plugins apps={memory.apps_results} />
2916
</div>
30-
</div>
17+
)}
3118

3219
{memory?.structured?.action_items?.length > 0 && (
3320
<div className="px-6 md:px-12">
@@ -40,12 +27,6 @@ export default function Summary({ memory }: SummaryProps) {
4027
<MemoryEvents events={memory.structured.events} />
4128
</div>
4229
)}
43-
44-
{memory.apps_results.length > 0 && (
45-
<div className="px-6 md:px-12">
46-
<Plugins apps={memory.apps_results} />
47-
</div>
48-
)}
4930
</div>
5031
);
5132
}

‎web/frontend/src/components/plugins/identify-plugin.tsx‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { getCommunityPlugin } from '@/src/actions/plugins/get-community-plugins'
44
import { CommunityPlugin } from '@/src/types/plugins/plugins.types';
55
import Image from 'next/image';
66
import { Fragment, useEffect, useState, memo } from 'react';
7+
import { NavArrowRight } from 'iconoir-react';
78
import ErrorIdentifyPlugin from './error-identify-plugin';
89
import IdentifyPluginLoader from './identify-plugin-loader';
910
import { getPluginFromCache, setPluginInCache, hasPluginInCache } from './plugin-cache';
@@ -46,25 +47,46 @@ function IdentifyPlugin({ pluginId }: IdentifyPluginProps) {
4647
return <ErrorIdentifyPlugin />;
4748
}
4849

50+
const isPublic = !pluginCommunity.private;
51+
const pluginUrl = `https://h.omi.me/apps/${pluginId}`;
52+
53+
const content = (
54+
<>
55+
<Image
56+
className="h-10 w-10 min-w-[40px] rounded-lg object-cover"
57+
src={pluginCommunity?.image}
58+
alt={pluginCommunity?.name}
59+
width={50}
60+
height={50}
61+
/>
62+
<div className="flex-1">
63+
<h3 className="text-lg font-semibold text-white">
64+
{pluginCommunity?.name}
65+
</h3>
66+
<p className="line-clamp-1 text-sm text-zinc-400">
67+
{pluginCommunity.description}
68+
</p>
69+
</div>
70+
{isPublic && <NavArrowRight className="h-5 w-5 text-zinc-500" />}
71+
</>
72+
);
73+
4974
return (
5075
<Fragment>
51-
<div className="sticky top-[4rem] z-[50] mb-3 flex items-center gap-2 border-b border-solid border-zinc-900 bg-bg-color bg-opacity-90 px-4 py-3 shadow-sm backdrop-blur-sm md:px-12">
52-
<Image
53-
className="grid h-9 w-9 min-w-[36px] place-items-center rounded-full bg-zinc-700"
54-
src={pluginCommunity?.image}
55-
alt={pluginCommunity?.name}
56-
width={50}
57-
height={50}
58-
/>
59-
<div>
60-
<h3 className="text-base font-semibold md:text-base">
61-
{pluginCommunity?.name}
62-
</h3>
63-
<p className="line-clamp-1 text-sm text-gray-500 md:text-base">
64-
{pluginCommunity.description}
65-
</p>
76+
{isPublic ? (
77+
<a
78+
href={pluginUrl}
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
className="mb-4 flex items-center gap-3 transition-opacity hover:opacity-80"
82+
>
83+
{content}
84+
</a>
85+
) : (
86+
<div className="mb-4 flex items-center gap-3">
87+
{content}
6688
</div>
67-
</div>
89+
)}
6890
</Fragment>
6991
);
7092
}

‎web/frontend/src/types/plugins/plugins.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ export interface CommunityPlugin {
1111
capabilities: string[];
1212
memory_prompt: string;
1313
deleted: boolean;
14+
private: boolean;
1415
}

0 commit comments

Comments
 (0)