Skip to content

Commit 9678c86

Browse files
MananTankMananTank
committed
More UI fixes
1 parent 9127fe7 commit 9678c86

File tree

10 files changed

+131
-123
lines changed

10 files changed

+131
-123
lines changed

‎apps/dashboard/src/@/api/support.ts‎

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,13 @@ import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
33
import type { SupportTicket } from "../../app/(app)/team/[team_slug]/(team)/~/support/types/tickets";
44
import { getAuthToken, getAuthTokenWalletAddress } from "./auth-token";
55

6-
interface CreateSupportTicketRequest {
6+
export async function createSupportTicket(params: {
77
message: string;
88
teamSlug: string;
99
teamId: string;
1010
title: string;
1111
conversationId?: string;
12-
}
13-
14-
interface SendMessageRequest {
15-
ticketId: string;
16-
teamSlug: string;
17-
teamId: string;
18-
message: string;
19-
}
20-
21-
export async function createSupportTicket(
22-
request: CreateSupportTicketRequest,
23-
): Promise<{ data: SupportTicket } | { error: string }> {
24-
if (!request.teamSlug) {
25-
return { error: "Team slug is required to create support ticket" };
26-
}
27-
12+
}): Promise<{ data: SupportTicket } | { error: string }> {
2813
const token = await getAuthToken();
2914
if (!token) {
3015
return { error: "No auth token available" };
@@ -35,19 +20,19 @@ export async function createSupportTicket(
3520
const walletAddress = await getAuthTokenWalletAddress();
3621

3722
// URL encode the team slug to handle special characters like #
38-
const encodedTeamSlug = encodeURIComponent(request.teamSlug);
23+
const encodedTeamSlug = encodeURIComponent(params.teamSlug);
3924
const apiUrl = `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${encodedTeamSlug}/support-conversations`;
4025

4126
// Build the payload for creating a conversation
4227
// If the message does not already include wallet address, prepend it
43-
let message = request.message;
28+
let message = params.message;
4429
if (!message.includes("Wallet address:")) {
4530
message = `Wallet address: ${String(walletAddress || "-")}\n${message}`;
4631
}
4732

4833
const payload = {
4934
markdown: message.trim(),
50-
title: request.title,
35+
title: params.title,
5136
};
5237

5338
const body = JSON.stringify(payload);
@@ -72,7 +57,7 @@ export async function createSupportTicket(
7257
const createdConversation: SupportTicket = await response.json();
7358

7459
// Escalate to SIWA feedback endpoint if conversationId is provided
75-
if (request.conversationId) {
60+
if (params.conversationId) {
7661
try {
7762
const siwaUrl = process.env.NEXT_PUBLIC_SIWA_URL;
7863
if (siwaUrl) {
@@ -81,10 +66,10 @@ export async function createSupportTicket(
8166
headers: {
8267
"Content-Type": "application/json",
8368
Authorization: `Bearer ${token}`,
84-
...(request.teamId ? { "x-team-id": request.teamId } : {}),
69+
...(params.teamId ? { "x-team-id": params.teamId } : {}),
8570
},
8671
body: JSON.stringify({
87-
conversationId: request.conversationId,
72+
conversationId: params.conversationId,
8873
feedbackRating: 9999,
8974
}),
9075
});
@@ -103,9 +88,12 @@ export async function createSupportTicket(
10388
}
10489
}
10590

106-
export async function sendMessageToTicket(
107-
request: SendMessageRequest,
108-
): Promise<{ success: true } | { error: string }> {
91+
export async function sendMessageToTicket(request: {
92+
ticketId: string;
93+
teamSlug: string;
94+
teamId: string;
95+
message: string;
96+
}): Promise<{ success: true } | { error: string }> {
10997
if (!request.ticketId || !request.teamSlug) {
11098
return { error: "Ticket ID and team slug are required" };
11199
}

‎apps/dashboard/src/@/components/chat/ChatBar.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,12 @@ export function ChatBar(props: {
116116
) : (
117117
<Button
118118
aria-label="Send"
119-
className="!h-auto w-auto border border-nebula-pink-foreground p-2 disabled:opacity-100"
119+
className="!h-auto w-auto p-2 disabled:opacity-100"
120120
disabled={message.trim() === "" || props.isConnectingWallet}
121121
onClick={() => {
122122
if (message.trim() === "") return;
123123
handleSubmit(message);
124124
}}
125-
variant="pink"
126125
>
127126
<ArrowUpIcon className="size-4" />
128127
</Button>

‎apps/dashboard/src/@/components/chat/CustomChatButton.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export function CustomChatButton(props: {
2222
label: string;
2323
examplePrompts: string[];
2424
authToken: string | undefined;
25-
team: Team; // changed from teamId
25+
team: Team;
2626
clientId: string | undefined;
2727
requireLogin?: boolean;
2828
}) {
@@ -55,14 +55,14 @@ export function CustomChatButton(props: {
5555
ref={ref}
5656
>
5757
{/* Header with close button */}
58-
<div className="flex items-center justify-between border-b px-4 py-2">
58+
<div className="flex items-center justify-between border-b px-4 py-4">
5959
<div className="flex items-center gap-2 font-semibold text-lg">
6060
<MessageCircleIcon className="size-5 text-muted-foreground" />
6161
{props.label}
6262
</div>
6363
<Button
6464
aria-label="Close chat"
65-
className="h-auto w-auto p-1 text-muted-foreground"
65+
className="h-auto w-auto p-1 text-muted-foreground rounded-full"
6666
onClick={closeModal}
6767
size="icon"
6868
variant="ghost"
@@ -83,7 +83,7 @@ export function CustomChatButton(props: {
8383
}))}
8484
networks={props.networks}
8585
requireLogin={props.requireLogin}
86-
team={props.team} // pass full team object
86+
team={props.team}
8787
/>
8888
)}
8989
</div>

‎apps/dashboard/src/@/components/chat/CustomChatContent.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import type { ThirdwebClient } from "thirdweb";
77
import { useActiveWalletConnectionStatus } from "thirdweb/react";
88
import type { Team } from "@/api/team";
99
import { Button } from "@/components/ui/button";
10-
import { NebulaIcon } from "@/icons/NebulaIcon";
10+
import { ThirdwebMiniLogo } from "../../../app/(app)/components/ThirdwebMiniLogo";
1111
import { ChatBar } from "./ChatBar";
1212
import type { UserMessage, UserMessageContent } from "./CustomChats";
1313
import { type CustomChatMessage, CustomChats } from "./CustomChats";
@@ -56,7 +56,6 @@ function CustomChatContentLoggedIn(props: {
5656
const [enableAutoScroll, setEnableAutoScroll] = useState(false);
5757
const connectionStatus = useActiveWalletConnectionStatus();
5858

59-
// Support form state
6059
const [showSupportForm, setShowSupportForm] = useState(false);
6160
const [productLabel, setProductLabel] = useState("");
6261

@@ -236,7 +235,6 @@ function CustomChatContentLoggedIn(props: {
236235
addSuccessMessage={handleAddSuccessMessage}
237236
/>
238237
)}
239-
{/* Removed floating support case button and form */}
240238
<ChatBar
241239
abortChatStream={() => {
242240
chatAbortController?.abort();
@@ -273,9 +271,12 @@ function LoggedOutStateChatContent() {
273271
return (
274272
<div className="flex grow flex-col items-center justify-center p-4">
275273
<div className="mb-4 flex justify-center">
276-
<div className="rounded-full border p-1">
277-
<div className="rounded-full border bg-card p-2">
278-
<NebulaIcon className="size-7 text-muted-foreground" />
274+
<div className="rounded-full border p-1 bg-muted/20">
275+
<div className="rounded-full border p-2 bg-inverted">
276+
<ThirdwebMiniLogo
277+
isMonoChrome
278+
className="size-7 text-inverted-foreground"
279+
/>
279280
</div>
280281
</div>
281282
</div>
@@ -311,9 +312,12 @@ function EmptyStateChatPageContent(props: {
311312
return (
312313
<div className="flex flex-1 flex-col items-center justify-center overflow-auto p-4 ">
313314
<div className="mb-4 flex justify-center">
314-
<div className="rounded-full border-[1.5px] border-nebula-pink-foreground/20 bg-[hsl(var(--nebula-pink-foreground)/5%)] p-1">
315-
<div className="rounded-full border-[1.5px] border-nebula-pink-foreground/40 bg-[hsl(var(--nebula-pink-foreground)/5%)] p-2">
316-
<NebulaIcon className="size-7 text-nebula-pink-foreground" />
315+
<div className="rounded-full border p-1 bg-muted/20">
316+
<div className="rounded-full border p-2 bg-inverted">
317+
<ThirdwebMiniLogo
318+
isMonoChrome
319+
className="size-7 text-inverted-foreground"
320+
/>
317321
</div>
318322
</div>
319323
</div>
@@ -324,11 +328,12 @@ function EmptyStateChatPageContent(props: {
324328
</h1>
325329

326330
<div className="h-6" />
327-
<div className="flex max-w-lg flex-col flex-wrap justify-center gap-2.5">
331+
<div className="flex max-w-lg flex-col items-center justify-center gap-2.5">
328332
{props.examplePrompts.map((prompt) => (
329333
<Button
330334
disabled={false}
331335
key={prompt.title}
336+
className="rounded-full bg-card w-fit"
332337
onClick={() =>
333338
props.sendMessage({
334339
content: [

0 commit comments

Comments
 (0)