-
Notifications
You must be signed in to change notification settings - Fork 117
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extension: post a conversation (#8217)
- Loading branch information
Showing
15 changed files
with
434 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
front/extension/app/src/components/conversation/ConversationContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
import { ReachedLimitPopup } from "@app/extension/app/src/components/conversation/ReachedLimitPopup"; | ||
import { AssistantInputBar } from "@app/extension/app/src/components/input_bar/InputBar"; | ||
import { InputBarContext } from "@app/extension/app/src/components/input_bar/InputBarContext"; | ||
import { useSubmitFunction } from "@app/extension/app/src/components/utils/useSubmitFunction"; | ||
import { | ||
postConversation, | ||
postMessage, | ||
} from "@app/extension/app/src/lib/conversation"; | ||
import type { MentionType, WorkspaceType } from "@dust-tt/types"; | ||
import { useCallback, useContext, useEffect, useState } from "react"; | ||
|
||
interface ConversationContainerProps { | ||
conversationId: string | null; | ||
owner: WorkspaceType; | ||
} | ||
|
||
export function ConversationContainer({ | ||
conversationId, | ||
owner, | ||
}: ConversationContainerProps) { | ||
const [activeConversationId, setActiveConversationId] = | ||
useState(conversationId); | ||
const [planLimitReached, setPlanLimitReached] = useState(false); | ||
|
||
const { animate, setAnimate } = useContext(InputBarContext); | ||
|
||
// TODO use notification once they are in Sparkle. | ||
// const sendNotification = useContext(SendNotificationsContext); | ||
const sendNotification = console.log; | ||
|
||
useEffect(() => { | ||
if (animate) { | ||
setTimeout(() => setAnimate(false), 500); | ||
} | ||
}); | ||
|
||
const handlePostMessage = async (input: string, mentions: MentionType[]) => { | ||
if (!activeConversationId) { | ||
return null; | ||
} | ||
const messageData = { input, mentions, contentFragments: [] }; | ||
const result = await postMessage({ | ||
owner, | ||
conversationId: activeConversationId, | ||
messageData, | ||
}); | ||
|
||
if (result.isErr()) { | ||
if (result.error.type === "plan_limit_reached_error") { | ||
setPlanLimitReached(true); | ||
} else { | ||
sendNotification({ | ||
title: result.error.title, | ||
description: result.error.message, | ||
type: "error", | ||
}); | ||
} | ||
} else { | ||
// TODO (Ext): Handle the message being posted. | ||
} | ||
}; | ||
|
||
const { submit: handlePostConversation } = useSubmitFunction( | ||
useCallback( | ||
async (input: string, mentions: MentionType[]) => { | ||
const conversationRes = await postConversation({ | ||
owner, | ||
messageData: { | ||
input, | ||
mentions, | ||
}, | ||
}); | ||
if (conversationRes.isErr()) { | ||
if (conversationRes.error.type === "plan_limit_reached_error") { | ||
setPlanLimitReached(true); | ||
} else { | ||
sendNotification({ | ||
title: conversationRes.error.title, | ||
description: conversationRes.error.message, | ||
type: "error", | ||
}); | ||
} | ||
} else { | ||
setActiveConversationId(conversationRes.value.sId); | ||
// Probably here we want to navigate to /conversations/id | ||
// navigate(`/conversations/${conversationRes.value.sId}`); | ||
} | ||
}, | ||
[owner, sendNotification, setActiveConversationId] | ||
) | ||
); | ||
|
||
return ( | ||
<> | ||
{activeConversationId && <p>Congrats you just posted a conversation</p>} | ||
<AssistantInputBar | ||
owner={owner} | ||
onSubmit={ | ||
activeConversationId ? handlePostMessage : handlePostConversation | ||
} | ||
stickyMentions={[]} //TODO(Ext) do we need this. | ||
/> | ||
<ReachedLimitPopup | ||
isOpened={planLimitReached} | ||
onClose={() => setPlanLimitReached(false)} | ||
isTrialing={false} // TODO(Ext): Properly handle this from loading the subscription. | ||
/> | ||
</> | ||
); | ||
} |
54 changes: 54 additions & 0 deletions
54
front/extension/app/src/components/conversation/ReachedLimitPopup.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { Dialog, Page } from "@dust-tt/sparkle"; | ||
|
||
export function ReachedLimitPopup({ | ||
isOpened, | ||
onClose, | ||
isTrialing, | ||
}: { | ||
isOpened: boolean; | ||
onClose: () => void; | ||
isTrialing: boolean; | ||
}) { | ||
// TODO(ext): put a link to subscription page. | ||
if (isTrialing) { | ||
return ( | ||
<Dialog | ||
title="Fair usage limit reached" | ||
isOpen={isOpened} | ||
onValidate={onClose} | ||
onCancel={onClose} | ||
validateLabel="Ok" | ||
> | ||
<Page.P> | ||
We limit usage of Dust during the trial. You've reached your limit for | ||
today. | ||
</Page.P> | ||
<p className="text-sm font-normal text-element-800"> | ||
Come back tomorrow for a fresh start or{" "} | ||
<span className="font-bold"> | ||
end your trial and start paying now (using our website). | ||
</span> | ||
</p> | ||
</Dialog> | ||
); | ||
} | ||
|
||
// TODO(ext): put a link to fair use policy (modal). | ||
return ( | ||
<Dialog | ||
title="Message quota exceeded" | ||
isOpen={isOpened} | ||
onValidate={onClose} | ||
onCancel={onClose} | ||
validateLabel="Ok" | ||
> | ||
<p className="text-sm font-normal text-element-800"> | ||
We've paused messaging for your workspace due to our fair usage policy. | ||
Your workspace has reached its shared limit of 100 messages per user for | ||
the past 24 hours. This total limit is collectively shared by all users | ||
in the workspace. Check our Fair Use policy on our website to learn | ||
more. | ||
</p> | ||
</Dialog> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.