modifications to the convo view
This commit is contained in:
Arjun Patel
@@ -290,256 +290,257 @@ export default function ViewConvo(props: { conversationId: string }) {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="flex flex-col items-stretch mt-5 space-y-10">
|
<div className="flex flex-col items-stretch mt-5 space-y-10">
|
||||||
{/* convo name and action buttons on top */}
|
{/* header */}
|
||||||
<div className="flex-1 flex flex-col overflow-auto">
|
<span className="flex flex-row justify-between items-center">
|
||||||
{/* header */}
|
<span className="flex flex-col">
|
||||||
<span className="flex flex-row justify-between items-center mb-5">
|
<span className="flex flex-row items-center group">
|
||||||
<span className="flex flex-col">
|
<span
|
||||||
<span className="flex flex-row items-center group">
|
className="text-lg tracking-widest font-semibold
|
||||||
<span
|
|
||||||
className="text-lg tracking-widest font-semibold
|
|
||||||
text-slate-500 uppercase mr-2"
|
text-slate-500 uppercase mr-2"
|
||||||
>
|
>
|
||||||
{convo?.name}
|
{convo?.name}
|
||||||
</span>
|
|
||||||
|
|
||||||
<span
|
|
||||||
onClick={handleAdminEdit}
|
|
||||||
className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 group-hover:visible invisible"
|
|
||||||
>
|
|
||||||
<FaEdit className="ml-auto text-md text-slate-400" />
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span className="flex flex-row items-center space-x-2 hover:cursor-pointer group">
|
<span
|
||||||
{convo?.activeMembers && (
|
onClick={handleAdminEdit}
|
||||||
<MasterAvatarGroupWithUserFetch
|
className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 group-hover:visible invisible"
|
||||||
listOfUserIds={convo.activeMembers}
|
>
|
||||||
showCurrUser={true}
|
<FaEdit className="ml-auto text-md text-slate-400" />
|
||||||
maxUserCount={10}
|
|
||||||
size={UserAvatarSizes.small}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<span className="text-xs text-slate-300 hover:decoration-slate-400 group-hover:underline ">
|
|
||||||
{convo?.activeMembers.length} members
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span className="flex flex-row items-center space-x-3">
|
<span className="flex flex-row items-center space-x-2 hover:cursor-pointer group">
|
||||||
{userConvoAssoc?.state && (
|
{convo?.activeMembers && (
|
||||||
<ConversationMemberStateIcon
|
<MasterAvatarGroupWithUserFetch
|
||||||
convoUserAssocState={userConvoAssoc.state}
|
listOfUserIds={convo.activeMembers}
|
||||||
|
showCurrUser={true}
|
||||||
|
maxUserCount={10}
|
||||||
|
size={UserAvatarSizes.small}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{userConvoAssoc?.state != ConversationMemberState.default && (
|
<span className="text-xs text-slate-300 hover:decoration-slate-400 group-hover:underline ">
|
||||||
<button
|
{convo?.activeMembers.length} members
|
||||||
onClick={() =>
|
</span>
|
||||||
handleOrganizeConversation(ConversationMemberState.default)
|
|
||||||
}
|
|
||||||
className="rounded-lg p-2 border flex flex-row items-center space-x-2
|
|
||||||
text-slate-400 text-xs hover:bg-slate-50"
|
|
||||||
>
|
|
||||||
<FaStream />
|
|
||||||
<span>Inbox</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{userConvoAssoc?.state != ConversationMemberState.later && (
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
handleOrganizeConversation(ConversationMemberState.later)
|
|
||||||
}
|
|
||||||
className="rounded-lg p-2 border flex flex-row items-center space-x-2
|
|
||||||
text-slate-400 text-xs hover:bg-slate-50"
|
|
||||||
>
|
|
||||||
<FaRegClock />
|
|
||||||
<span>Later</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{userConvoAssoc?.state != ConversationMemberState.priority && (
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
handleOrganizeConversation(ConversationMemberState.priority)
|
|
||||||
}
|
|
||||||
className="rounded-lg p-2 border flex flex-row items-center space-x-2
|
|
||||||
text-slate-400 text-xs hover:bg-slate-50"
|
|
||||||
>
|
|
||||||
<FaRocket />
|
|
||||||
<span>Priority</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{userConvoAssoc?.state != ConversationMemberState.done && (
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
handleOrganizeConversation(ConversationMemberState.done)
|
|
||||||
}
|
|
||||||
className="rounded-lg p-2 border flex flex-row items-center space-x-2
|
|
||||||
text-slate-400 text-xs hover:bg-slate-50"
|
|
||||||
>
|
|
||||||
<FaCheck />
|
|
||||||
<span>Done</span>
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{!editTldrMode ? (
|
<span className="flex flex-row items-center space-x-3">
|
||||||
<>
|
{userConvoAssoc?.state && (
|
||||||
<span
|
<ConversationMemberStateIcon
|
||||||
onClick={() => setEditTldrMode(true)}
|
convoUserAssocState={userConvoAssoc.state}
|
||||||
className="flex flex-row group items-center"
|
|
||||||
>
|
|
||||||
<span className="max-w-md text-md text-slate-400 uppercase cursor-pointer whitespace-pre-line">
|
|
||||||
tldr;
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className="p-2 ml-2 rounded-full hover:cursor-pointer hover:bg-slate-200 group-hover:visible invisible">
|
|
||||||
<FaEdit className="ml-auto text-md text-slate-400" />
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className="max-w-md text-lg text-slate-600 cursor-pointer whitespace-pre-line">
|
|
||||||
{convo?.tldr}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<span className="flex flex-row items-center space-x-2">
|
|
||||||
<textarea
|
|
||||||
autoFocus
|
|
||||||
className="p-2 my-2 flex-1 rounded-md placeholder:text-slate-300 focus:outline-none"
|
|
||||||
placeholder="update with a new tldr"
|
|
||||||
value={newTldr}
|
|
||||||
onChange={(e) => setNewTldr(e.target.value)}
|
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{userConvoAssoc?.state != ConversationMemberState.default && (
|
||||||
<button
|
<button
|
||||||
onClick={() => setEditTldrMode(false)}
|
onClick={() =>
|
||||||
className="rounded-lg p-2 border border-orange-500 flex flex-row items-center space-x-2
|
handleOrganizeConversation(ConversationMemberState.default)
|
||||||
text-xs hover:bg-orange-500 hover:text-white mx-2 text-orange-500"
|
}
|
||||||
|
className="rounded-lg p-2 border flex flex-row items-center space-x-2
|
||||||
|
text-slate-400 text-xs hover:bg-slate-50"
|
||||||
>
|
>
|
||||||
<span>Cancel</span>
|
<FaStream />
|
||||||
|
<span>Inbox</span>
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{userConvoAssoc?.state != ConversationMemberState.later && (
|
||||||
<button
|
<button
|
||||||
disabled={isSubmitting}
|
onClick={() =>
|
||||||
onClick={saveNewTldr}
|
handleOrganizeConversation(ConversationMemberState.later)
|
||||||
className="rounded-lg p-2 border border-teal-500 flex flex-row items-center space-x-2
|
}
|
||||||
text-xs bg-teal-500 hover:font-semibold mx-2 text-white"
|
className="rounded-lg p-2 border flex flex-row items-center space-x-2
|
||||||
|
text-slate-400 text-xs hover:bg-slate-50"
|
||||||
>
|
>
|
||||||
<span>Save</span>
|
<FaRegClock />
|
||||||
|
<span>Later</span>
|
||||||
</button>
|
</button>
|
||||||
</span>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
{/* have one row, but just translate it along y downward to put it in it's own place */}
|
{userConvoAssoc?.state != ConversationMemberState.priority && (
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
handleOrganizeConversation(ConversationMemberState.priority)
|
||||||
|
}
|
||||||
|
className="rounded-lg p-2 border flex flex-row items-center space-x-2
|
||||||
|
text-slate-400 text-xs hover:bg-slate-50"
|
||||||
|
>
|
||||||
|
<FaRocket />
|
||||||
|
<span>Priority</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
<span
|
{userConvoAssoc?.state != ConversationMemberState.done && (
|
||||||
className="flex flex-row flex-nowrap pb-[10rem] py-[5rem]
|
<button
|
||||||
overflow-auto min-h-max shadow-xl bg-slate-50 rounded mt-5"
|
onClick={() =>
|
||||||
>
|
handleOrganizeConversation(ConversationMemberState.done)
|
||||||
{audioClips?.length > 0 ? (
|
}
|
||||||
audioClips.reverse().map((audClip, index) => {
|
className="rounded-lg p-2 border flex flex-row items-center space-x-2
|
||||||
const restAudioClips = audioClips.slice(index);
|
text-slate-400 text-xs hover:bg-slate-50"
|
||||||
return (
|
>
|
||||||
<TimelineAudioClip
|
<FaCheck />
|
||||||
key={audClip.id}
|
<span>Done</span>
|
||||||
index={index}
|
</button>
|
||||||
audioClip={audClip}
|
)}
|
||||||
convoId={props.conversationId}
|
</span>
|
||||||
audioClipsToPlay={restAudioClips}
|
</span>
|
||||||
/>
|
|
||||||
);
|
<div className="flex flex-row items-start space-x-5">
|
||||||
})
|
<div className="flex-1 flex flex-col overflow-auto">
|
||||||
|
{!editTldrMode ? (
|
||||||
|
<>
|
||||||
|
<span
|
||||||
|
onClick={() => setEditTldrMode(true)}
|
||||||
|
className="flex flex-row group items-center"
|
||||||
|
>
|
||||||
|
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase mb-2">
|
||||||
|
TLDR;
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span className="p-2 ml-2 rounded-full hover:cursor-pointer hover:bg-slate-200 group-hover:visible invisible">
|
||||||
|
<FaEdit className="ml-auto text-md text-slate-400" />
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span className="max-w-md text-lg text-slate-600 cursor-pointer whitespace-pre-line">
|
||||||
|
{convo?.tldr}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
<span className="text-slate-300 mx-auto my-auto text-center">
|
<span className="flex flex-row items-center space-x-2">
|
||||||
Please get this conversation started <br></br> by pressing and
|
<textarea
|
||||||
holding{" "}
|
autoFocus
|
||||||
<span className="text-orange-500 font-semibold">R.</span>
|
className="p-2 my-2 flex-1 rounded-md placeholder:text-slate-300 focus:outline-none"
|
||||||
|
placeholder="update with a new tldr"
|
||||||
|
value={newTldr}
|
||||||
|
onChange={(e) => setNewTldr(e.target.value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setEditTldrMode(false)}
|
||||||
|
className="rounded-lg p-2 border border-orange-500 flex flex-row items-center space-x-2
|
||||||
|
text-xs hover:bg-orange-500 hover:text-white mx-2 text-orange-500"
|
||||||
|
>
|
||||||
|
<span>Cancel</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
disabled={isSubmitting}
|
||||||
|
onClick={saveNewTldr}
|
||||||
|
className="rounded-lg p-2 border border-teal-500 flex flex-row items-center space-x-2
|
||||||
|
text-xs bg-teal-500 hover:font-semibold mx-2 text-white"
|
||||||
|
>
|
||||||
|
<span>Save</span>
|
||||||
|
</button>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<span ref={endOfTimeline}></span>
|
{/* have one row, but just translate it along y downward to put it in it's own place */}
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* stuff for recording and playing action */}
|
<span
|
||||||
<span className="mx-auto flex flex-row py-10 space-x-5">
|
className="flex flex-row flex-nowrap pb-[10rem] py-[5rem]
|
||||||
<Tooltip title={"Press and hold R to send a voice clip."}>
|
overflow-auto min-h-max shadow-xl bg-slate-50 rounded mt-5"
|
||||||
<span
|
>
|
||||||
className={`ml-auto shadow-lg flex flex-row items-center p-5
|
{audioClips?.length > 0 ? (
|
||||||
|
audioClips.reverse().map((audClip, index) => {
|
||||||
|
const restAudioClips = audioClips.slice(index);
|
||||||
|
return (
|
||||||
|
<TimelineAudioClip
|
||||||
|
key={audClip.id}
|
||||||
|
index={index}
|
||||||
|
audioClip={audClip}
|
||||||
|
convoId={props.conversationId}
|
||||||
|
audioClipsToPlay={restAudioClips}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<span className="text-slate-300 mx-auto my-auto text-center">
|
||||||
|
Please get this conversation started <br></br> by pressing and
|
||||||
|
holding{" "}
|
||||||
|
<span className="text-orange-500 font-semibold">R.</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<span ref={endOfTimeline}></span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* stuff for recording and playing action */}
|
||||||
|
<span className="mx-auto flex flex-row py-10 space-x-5">
|
||||||
|
<Tooltip title={"Press and hold R to send a voice clip."}>
|
||||||
|
<span
|
||||||
|
className={`ml-auto shadow-lg flex flex-row items-center p-5
|
||||||
justify-center rounded-lg font-bold hover:cursor-pointer ${
|
justify-center rounded-lg font-bold hover:cursor-pointer ${
|
||||||
isRecording
|
isRecording
|
||||||
? "bg-orange-700 text-white"
|
? "bg-orange-700 text-white"
|
||||||
: "bg-slate-50 text-orange-700"
|
: "bg-slate-50 text-orange-700"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<FaMicrophone className="text-xl " />
|
<FaMicrophone className="text-xl " />
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
||||||
<Tooltip title={"SPACE to play last conversation chunk."}>
|
<Tooltip title={"SPACE to play last conversation chunk."}>
|
||||||
<span
|
<span
|
||||||
className={`shadow-lg flex flex-row items-center p-5 justify-center
|
className={`shadow-lg flex flex-row items-center p-5 justify-center
|
||||||
rounded-lg font-bold ${
|
rounded-lg font-bold ${
|
||||||
!audioQueueCurrentItem
|
!audioQueueCurrentItem
|
||||||
? "bg-slate-50 text-teal-600"
|
? "bg-slate-50 text-teal-600"
|
||||||
: " bg-teal-600 text-white"
|
: " bg-teal-600 text-white"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<FaPlay className="text-xl" />
|
<FaPlay className="text-xl" />
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* drawer items */}
|
|
||||||
<div className="flex-1 flex flex-col">
|
|
||||||
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase mb-2">
|
|
||||||
Shared
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* row of cards drawer items */}
|
|
||||||
<span className="flex flex-row items-stretch gap-5 overflow-auto w-full pb-10">
|
|
||||||
{testDrawerItems.map((link) => (
|
|
||||||
<span
|
|
||||||
key={link.linkName}
|
|
||||||
className="group flex flex-row items-center border rounded
|
|
||||||
p-2 hover:bg-slate-50 transition-all shrink-0 w-[15rem] bg-slate-50 text-ellipsis"
|
|
||||||
>
|
|
||||||
{/* <span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer"></span> */}
|
|
||||||
|
|
||||||
<LinkIcon
|
|
||||||
linkType={link.linkType}
|
|
||||||
className="text-3xl shrink-0"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span className="flex flex-col ml-2">
|
|
||||||
<span className="text-slate-400 text-sm">
|
|
||||||
{link.linkName}
|
|
||||||
</span>
|
|
||||||
<span className="text-slate-300 text-xs">
|
|
||||||
{link.relativeSentTime}
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<span className="flex flex-row ml-auto space-x-1 group-hover:visible invisible">
|
{/* drawer items */}
|
||||||
<Tooltip title={"Add to personal drawer."}>
|
<div className="flex flex-col">
|
||||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
|
<span className="text-md tracking-widest font-semibold text-slate-300 uppercase mb-2">
|
||||||
<FaImages className="text-xl text-slate-400" />
|
Shared
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* row of cards drawer items */}
|
||||||
|
<span className="flex flex-col items-stretch overflow-auto w-full pb-10">
|
||||||
|
{testDrawerItems.map((link) => (
|
||||||
|
<span
|
||||||
|
key={link.linkName}
|
||||||
|
className="group flex flex-row items-center border-t
|
||||||
|
p-2 hover:bg-slate-50 transition-all shrink-0 w-[15rem] text-ellipsis"
|
||||||
|
>
|
||||||
|
{/* <span className="rounded-lg bg-slate-200 p-2 hover:cursor-pointer"></span> */}
|
||||||
|
|
||||||
|
<LinkIcon
|
||||||
|
linkType={link.linkType}
|
||||||
|
className="text-3xl shrink-0"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span className="flex flex-col ml-2">
|
||||||
|
<span className="text-slate-400 text-sm">
|
||||||
|
{link.linkName}
|
||||||
</span>
|
</span>
|
||||||
</Tooltip>
|
<span className="text-slate-300 text-xs">
|
||||||
|
{link.relativeSentTime}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
|
<span className="flex flex-row ml-auto space-x-1 group-hover:visible invisible">
|
||||||
<FaExternalLinkAlt className="text-lg text-slate-400" />
|
<Tooltip title={"Add to personal drawer."}>
|
||||||
|
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
|
||||||
|
<FaImages className="text-xl text-slate-400" />
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200 ">
|
||||||
|
<FaExternalLinkAlt className="text-lg text-slate-400" />
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
))}
|
||||||
))}
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user