(
43 | undefined
44 | );
45 |
46 | // Ground the Copilot with domain-specific knowledge for this use-case: marketing campaigns.
47 | useCopilotReadable({ description: "Guideline", value: GUIDELINE });
48 | useCopilotReadable({ description: "Script", value: SCRIPT_SUGGESTION });
49 |
50 | // Provide the Copilot with the current date.
51 | useCopilotReadable({
52 | description: "Current Date",
53 | value: new Date().toDateString(),
54 | });
55 |
56 | // Provide this component's Copilot with the ability to update the current campaign.
57 | //
58 | // This implementation uses a single large function with optional parameters to update the current campaign.
59 | // But you can also use multiple smaller actions to update different parts of the campaign - even one for each field.
60 | // Up to you.
61 | //
62 | // (In the near future we will provide CopilotForm types, which unify useCopilotReadable and useCopilotAction for a given form's values.
63 | // Feel free to ask about this on our Discord: https://discord.gg/t89H6TzmKm).
64 | useCopilotAction({
65 | name: "updateCurrentCampaign",
66 | description:
67 | "Edit an existing campaign or create a new one. To update only a part of a campaign, provide the id of the campaign to edit and the new values only.",
68 | parameters: [
69 | {
70 | name: "id",
71 | description:
72 | "The id of the campaign to edit. If empty, a new campaign will be created",
73 | type: "string",
74 | },
75 | {
76 | name: "title",
77 | description: "The title of the campaign",
78 | type: "string",
79 | required: false,
80 | },
81 | {
82 | name: "keywords",
83 | description: "Search keywords for the campaign",
84 | type: "string",
85 | required: false,
86 | },
87 | {
88 | name: "url",
89 | description:
90 | "The URL to link the ad to. Most of the time, the user will provide this value, leave it empty unless asked by the user.",
91 | type: "string",
92 | required: false,
93 | },
94 | {
95 | name: "headline",
96 | description:
97 | "The headline displayed in the ad. This should be a 5-10 words",
98 | type: "string",
99 | required: false,
100 | },
101 | {
102 | name: "description",
103 | description:
104 | "The description displayed in the ad. This should be a short text",
105 | type: "string",
106 | required: false,
107 | },
108 |
109 | {
110 | name: "budget",
111 | description: "The budget of the campaign",
112 | type: "number",
113 | required: false,
114 | },
115 | {
116 | name: "objective",
117 | description: "The objective of the campaign",
118 | type: "string",
119 | enum: [
120 | "brand-awareness",
121 | "lead-generation",
122 | "sales-conversion",
123 | "website-traffic",
124 | "engagement",
125 | ],
126 | },
127 |
128 | {
129 | name: "bidStrategy",
130 | description: "The bid strategy of the campaign",
131 | type: "string",
132 | enum: ["manual-cpc", "cpa", "cpm"],
133 | required: false,
134 | },
135 | {
136 | name: "bidAmount",
137 | description: "The bid amount of the campaign",
138 | type: "number",
139 | required: false,
140 | },
141 | {
142 | name: "segment",
143 | description: "The segment of the campaign",
144 | type: "string",
145 | required: false,
146 | enum: segments,
147 | },
148 | ],
149 | handler: (campaign) => {
150 | const newValue = _.assign(
151 | _.cloneDeep(currentCampaign),
152 | _.omitBy(campaign, _.isUndefined)
153 | ) as Campaign;
154 |
155 | setCurrentCampaign(newValue);
156 | },
157 | render: (props) => {
158 | if (props.status === "complete") {
159 | return "Campaign updated successfully";
160 | } else {
161 | return "Updating campaign";
162 | }
163 | },
164 | });
165 |
166 | // Provide this component's Copilot with the ability to retrieve historical cost data for certain keywords.
167 | // Will be called automatically when needed by the Copilot.
168 | useCopilotAction({
169 | name: "retrieveHistoricalData",
170 | description: "Retrieve historical data for certain keywords",
171 | parameters: [
172 | {
173 | name: "keywords",
174 | description: "The keywords to retrieve data for",
175 | type: "string",
176 | },
177 | {
178 | name: "type",
179 | description: "The type of data to retrieve for the keywords.",
180 | type: "string",
181 | enum: ["CPM", "CPA", "CPC"],
182 | },
183 | ],
184 | handler: async ({ type }) => {
185 | // fake an API call that retrieves historical data for cost for certain keywords based on campaign type (CPM, CPA, CPC)
186 | await new Promise((resolve) => setTimeout(resolve, 2000));
187 |
188 | function getRandomValue(min: number, max: number) {
189 | return (Math.random() * (max - min) + min).toFixed(2);
190 | }
191 |
192 | if (type == "CPM") {
193 | return getRandomValue(0.5, 10);
194 | } else if (type == "CPA") {
195 | return getRandomValue(5, 100);
196 | } else if (type == "CPC") {
197 | return getRandomValue(0.2, 2);
198 | }
199 | },
200 | render: (props) => {
201 | // Custom in-chat component rendering. Different components can be rendered based on the status of the action.
202 | let label = "Retrieving historical data ...";
203 | if (props.args.type) {
204 | label = `Retrieving ${props.args.type} for keywords ...`;
205 | }
206 | if (props.status === "complete") {
207 | label = `Done retrieving ${props.args.type} for keywords.`;
208 | }
209 |
210 | const done = props.status === "complete";
211 | return (
212 |
213 |
214 |
215 |
216 |
217 | {label}
218 |
219 |
220 | {props.args.type &&
221 | `Historical ${props.args.type}: ${props.result || "..."}`}
222 |
223 |
224 |
225 |
232 | {
237 | if (campaign) {
238 | saveCampaign(campaign);
239 | }
240 | setCurrentCampaign(undefined);
241 | }}
242 | />
243 |
249 |
250 | );
251 | }
252 |
--------------------------------------------------------------------------------
/src/components/app/CampaignForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { Campaign } from "@/lib/types";
3 | import { Button } from "@/components/ui/button";
4 | import { Label } from "@/components/ui/label";
5 | import { Input } from "@/components/ui/input";
6 | import clsx from "clsx";
7 | import {
8 | Select,
9 | SelectContent,
10 | SelectItem,
11 | SelectTrigger,
12 | SelectValue,
13 | } from "@/components/ui/select";
14 | import { useCopilotReadable } from "@copilotkit/react-core";
15 |
16 | interface CampaignFormProps {
17 | currentCampaign?: Campaign;
18 | setCurrentCampaign: (campaign?: Campaign) => void;
19 | segments: string[];
20 | saveCampaign: (campaign?: Campaign) => void;
21 | }
22 |
23 | export function CampaignForm({
24 | currentCampaign,
25 | setCurrentCampaign,
26 | saveCampaign,
27 | segments,
28 | }: CampaignFormProps) {
29 | useCopilotReadable({
30 | description: "Current Campaign",
31 | value: currentCampaign,
32 | });
33 |
34 | if (!currentCampaign) return null;
35 | return (
36 |
43 |
44 |
45 | {currentCampaign.id == "" ? "New" : "Edit"} Campaign
46 |
47 |
48 |
49 |
Campaign Information
50 |
51 |
58 |
72 |
73 |
74 | [s, s]))}
81 | />
82 |
83 |
84 |
85 |
Budget & Bidding
86 |
87 |
94 |
95 |
96 |
108 |
115 |
116 |
117 |
118 |
Ad Copy
119 |
120 |
127 |
134 |
135 |
136 |
143 |
150 |
151 |
152 |
153 |
154 |
161 |
162 |
163 |
164 |
185 |
188 |
194 | setCampaign({
195 | ...campaign,
196 | [id]: e.target.value,
197 | })
198 | }
199 | value={(campaign as any)[id] || ""}
200 | />
201 |
202 | );
203 | }
204 |
205 | interface DropdownProps {
206 | id: string;
207 | label: string;
208 | className?: string;
209 | campaign: Campaign;
210 | setCampaign: (campaign: Campaign) => void;
211 | items: { [key: string]: string };
212 | }
213 |
214 | function Dropdown({
215 | id,
216 | label,
217 | className,
218 | campaign,
219 | setCampaign,
220 | items,
221 | }: DropdownProps) {
222 | return (
223 |
224 |
227 |
242 |
243 | );
244 | }
245 |
--------------------------------------------------------------------------------
/src/components/app/MainNav.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | export function MainNav({
6 | className,
7 | ...props
8 | }: React.HTMLAttributes) {
9 | return (
10 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/app/UserNav.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
2 | import { Button } from "@/components/ui/button";
3 | import {
4 | DropdownMenu,
5 | DropdownMenuContent,
6 | DropdownMenuGroup,
7 | DropdownMenuItem,
8 | DropdownMenuLabel,
9 | DropdownMenuSeparator,
10 | DropdownMenuShortcut,
11 | DropdownMenuTrigger,
12 | } from "@/components/ui/dropdown-menu";
13 | import { Input } from "@/components/ui/input";
14 |
15 | export function UserNav() {
16 | return (
17 | <>
18 |
19 |
24 |
25 |
26 |
27 |
28 |
33 |
34 |
35 |
36 |
37 |
Markus Ecker
38 |
39 | markus@copilotkit.ai
40 |
41 |
15 | {campaigns.map((campaign) => (
16 |
setCurrentCampaign(campaign)}
20 | />
21 | ))}
22 | {
47 | onClick(campaign);
48 | }}
49 | >
50 |
51 |
52 | {titleInitials}
53 |
54 |
55 |
56 |
{campaign.title}
57 |
61 | {budget}
62 |
63 |
64 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
Dashboard
51 |
52 |
60 |
61 |
76 |
77 |
78 |
79 |
80 | Overview
81 |
82 | Analytics
83 |
84 |
85 | Reports
86 |
87 |
88 | Notifications
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | Total Cost
97 |
98 |
110 |
111 |
112 | $45,231.89
113 |
114 | +20.1% from last month
115 |
116 |
117 |
118 |
119 |
120 |
121 | Impressions
122 |
123 |
137 |
138 |
139 | 38M
140 |
141 | +36.2% from last month
142 |
143 |
144 |
145 |
146 |
147 |
148 | Clicks
149 |
150 |
162 |
163 |
164 | 2.8M
165 |
166 | +40.8% from last month
167 |
168 |
169 |
170 |
171 |
172 |
173 | Conversions
174 |
175 |
188 |
189 |
190 | 199K
191 |
192 | +31.2% from last month
193 |
194 |
195 |
196 |
198 |
199 |
200 | Spendings Overview
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 | Active Campaigns
209 |
210 | You have {campaigns.length} active campaign
211 | {campaigns.length != 1 && "s"}.
212 |
213 |
214 |
215 |
219 |
220 |
221 |
224 |
225 |
38 |
39 |
40 |
41 | Edit Customer Segments
42 |
43 |
46 |
47 |
48 |
49 | setNewSegment(e.target.value)}
54 | placeholder="Enter a new segment"
55 | />
56 |
57 |
58 |
59 |
60 | {segments.map((segment, index) => (
61 | -
62 | {segment}{" "}
63 |
66 |
67 | ))}
68 |
69 |
70 |
71 |
45 |
46 |
54 |
55 | ))
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef,
61 | React.ComponentPropsWithoutRef
62 | >(({ className, ...props }, ref) => (
63 |
68 | ))
69 |
70 | CommandList.displayName = CommandPrimitive.List.displayName
71 |
72 | const CommandEmpty = React.forwardRef<
73 | React.ElementRef,
74 | React.ComponentPropsWithoutRef
75 | >((props, ref) => (
76 |
81 | ))
82 |
83 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
84 |
85 | const CommandGroup = React.forwardRef<
86 | React.ElementRef,
87 | React.ComponentPropsWithoutRef
88 | >(({ className, ...props }, ref) => (
89 |
97 | ))
98 |
99 | CommandGroup.displayName = CommandPrimitive.Group.displayName
100 |
101 | const CommandSeparator = React.forwardRef<
102 | React.ElementRef,
103 | React.ComponentPropsWithoutRef
104 | >(({ className, ...props }, ref) => (
105 |
110 | ))
111 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
112 |
113 | const CommandItem = React.forwardRef<
114 | React.ElementRef,
115 | React.ComponentPropsWithoutRef
116 | >(({ className, ...props }, ref) => (
117 |
125 | ))
126 |
127 | CommandItem.displayName = CommandPrimitive.Item.displayName
128 |
129 | const CommandShortcut = ({
130 | className,
131 | ...props
132 | }: React.HTMLAttributes) => {
133 | return (
134 |
141 | )
142 | }
143 | CommandShortcut.displayName = "CommandShortcut"
144 |
145 | export {
146 | Command,
147 | CommandDialog,
148 | CommandInput,
149 | CommandList,
150 | CommandEmpty,
151 | CommandGroup,
152 | CommandItem,
153 | CommandShortcut,
154 | CommandSeparator,
155 | }
156 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as DialogPrimitive from "@radix-ui/react-dialog";
5 | import { Cross2Icon } from "@radix-ui/react-icons";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const Dialog = DialogPrimitive.Root;
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger;
12 |
13 | const DialogPortal = DialogPrimitive.Portal;
14 |
15 | const DialogClose = DialogPrimitive.Close;
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 |
29 | ));
30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
31 |
32 | const DialogContent = React.forwardRef<
33 | React.ElementRef,
34 | React.ComponentPropsWithoutRef
35 | >(({ className, children, ...props }, ref) => (
36 |
37 |
38 |
46 | {children}
47 |
48 |
49 | Close
50 |
51 |
52 |
53 | ));
54 | DialogContent.displayName = DialogPrimitive.Content.displayName;
55 |
56 | const DialogHeader = ({
57 | className,
58 | ...props
59 | }: React.HTMLAttributes) => (
60 |
67 | );
68 | DialogHeader.displayName = "DialogHeader";
69 |
70 | const DialogFooter = ({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) => (
74 |
81 | );
82 | DialogFooter.displayName = "DialogFooter";
83 |
84 | const DialogTitle = React.forwardRef<
85 | React.ElementRef,
86 | React.ComponentPropsWithoutRef
87 | >(({ className, ...props }, ref) => (
88 |
96 | ));
97 | DialogTitle.displayName = DialogPrimitive.Title.displayName;
98 |
99 | const DialogDescription = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ));
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName;
110 |
111 | export {
112 | Dialog,
113 | DialogPortal,
114 | DialogOverlay,
115 | DialogTrigger,
116 | DialogClose,
117 | DialogContent,
118 | DialogHeader,
119 | DialogFooter,
120 | DialogTitle,
121 | DialogDescription,
122 | };
123 |
--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
5 | import {
6 | CheckIcon,
7 | ChevronRightIcon,
8 | DotFilledIcon,
9 | } from "@radix-ui/react-icons"
10 |
11 | import { cn } from "@/lib/utils"
12 |
13 | const DropdownMenu = DropdownMenuPrimitive.Root
14 |
15 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
16 |
17 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
18 |
19 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
20 |
21 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
22 |
23 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
24 |
25 | const DropdownMenuSubTrigger = React.forwardRef<
26 | React.ElementRef,
27 | React.ComponentPropsWithoutRef & {
28 | inset?: boolean
29 | }
30 | >(({ className, inset, children, ...props }, ref) => (
31 |
40 | {children}
41 |
42 |
43 | ))
44 | DropdownMenuSubTrigger.displayName =
45 | DropdownMenuPrimitive.SubTrigger.displayName
46 |
47 | const DropdownMenuSubContent = React.forwardRef<
48 | React.ElementRef,
49 | React.ComponentPropsWithoutRef
50 | >(({ className, ...props }, ref) => (
51 |
59 | ))
60 | DropdownMenuSubContent.displayName =
61 | DropdownMenuPrimitive.SubContent.displayName
62 |
63 | const DropdownMenuContent = React.forwardRef<
64 | React.ElementRef,
65 | React.ComponentPropsWithoutRef
66 | >(({ className, sideOffset = 4, ...props }, ref) => (
67 |
68 |
78 |
79 | ))
80 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
81 |
82 | const DropdownMenuItem = React.forwardRef<
83 | React.ElementRef,
84 | React.ComponentPropsWithoutRef & {
85 | inset?: boolean
86 | }
87 | >(({ className, inset, ...props }, ref) => (
88 |
97 | ))
98 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
99 |
100 | const DropdownMenuCheckboxItem = React.forwardRef<
101 | React.ElementRef,
102 | React.ComponentPropsWithoutRef
103 | >(({ className, children, checked, ...props }, ref) => (
104 |
113 |
114 |
115 |
116 |
117 |
118 | {children}
119 |
120 | ))
121 | DropdownMenuCheckboxItem.displayName =
122 | DropdownMenuPrimitive.CheckboxItem.displayName
123 |
124 | const DropdownMenuRadioItem = React.forwardRef<
125 | React.ElementRef,
126 | React.ComponentPropsWithoutRef
127 | >(({ className, children, ...props }, ref) => (
128 |
136 |
137 |
138 |
139 |
140 |
141 | {children}
142 |
143 | ))
144 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
145 |
146 | const DropdownMenuLabel = React.forwardRef<
147 | React.ElementRef,
148 | React.ComponentPropsWithoutRef & {
149 | inset?: boolean
150 | }
151 | >(({ className, inset, ...props }, ref) => (
152 |
161 | ))
162 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
163 |
164 | const DropdownMenuSeparator = React.forwardRef<
165 | React.ElementRef,
166 | React.ComponentPropsWithoutRef
167 | >(({ className, ...props }, ref) => (
168 |
173 | ))
174 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
175 |
176 | const DropdownMenuShortcut = ({
177 | className,
178 | ...props
179 | }: React.HTMLAttributes) => {
180 | return (
181 |
185 | )
186 | }
187 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
188 |
189 | export {
190 | DropdownMenu,
191 | DropdownMenuTrigger,
192 | DropdownMenuContent,
193 | DropdownMenuItem,
194 | DropdownMenuCheckboxItem,
195 | DropdownMenuRadioItem,
196 | DropdownMenuLabel,
197 | DropdownMenuSeparator,
198 | DropdownMenuShortcut,
199 | DropdownMenuGroup,
200 | DropdownMenuPortal,
201 | DropdownMenuSub,
202 | DropdownMenuSubContent,
203 | DropdownMenuSubTrigger,
204 | DropdownMenuRadioGroup,
205 | }
206 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 |
20 | )
21 | }
22 | )
23 | Input.displayName = "Input"
24 |
25 | export { Input }
26 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 |
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 |
26 | export { Label }
27 |
--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Popover = PopoverPrimitive.Root
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 |
12 | const PopoverAnchor = PopoverPrimitive.Anchor
13 |
14 | const PopoverContent = React.forwardRef<
15 | React.ElementRef,
16 | React.ComponentPropsWithoutRef
17 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
18 |
19 |
29 |
30 | ))
31 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
32 |
33 | export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
34 |
--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import {
5 | CaretSortIcon,
6 | CheckIcon,
7 | ChevronDownIcon,
8 | ChevronUpIcon,
9 | } from "@radix-ui/react-icons"
10 | import * as SelectPrimitive from "@radix-ui/react-select"
11 |
12 | import { cn } from "@/lib/utils"
13 |
14 | const Select = SelectPrimitive.Root
15 |
16 | const SelectGroup = SelectPrimitive.Group
17 |
18 | const SelectValue = SelectPrimitive.Value
19 |
20 | const SelectTrigger = React.forwardRef<
21 | React.ElementRef,
22 | React.ComponentPropsWithoutRef
23 | >(({ className, children, ...props }, ref) => (
24 | span]:line-clamp-1",
28 | className
29 | )}
30 | {...props}
31 | >
32 | {children}
33 |
34 |
35 |
36 |
37 | ))
38 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
39 |
40 | const SelectScrollUpButton = React.forwardRef<
41 | React.ElementRef,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
52 |
53 |
54 | ))
55 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
56 |
57 | const SelectScrollDownButton = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, ...props }, ref) => (
61 |
69 |
70 |
71 | ))
72 | SelectScrollDownButton.displayName =
73 | SelectPrimitive.ScrollDownButton.displayName
74 |
75 | const SelectContent = React.forwardRef<
76 | React.ElementRef,
77 | React.ComponentPropsWithoutRef
78 | >(({ className, children, position = "popper", ...props }, ref) => (
79 |
80 |
91 |
92 |
99 | {children}
100 |
101 |
102 |
103 |
104 | ))
105 | SelectContent.displayName = SelectPrimitive.Content.displayName
106 |
107 | const SelectLabel = React.forwardRef<
108 | React.ElementRef,
109 | React.ComponentPropsWithoutRef
110 | >(({ className, ...props }, ref) => (
111 |
116 | ))
117 | SelectLabel.displayName = SelectPrimitive.Label.displayName
118 |
119 | const SelectItem = React.forwardRef<
120 | React.ElementRef,
121 | React.ComponentPropsWithoutRef
122 | >(({ className, children, ...props }, ref) => (
123 |
131 |
132 |
133 |
134 |
135 |
136 | {children}
137 |
138 | ))
139 | SelectItem.displayName = SelectPrimitive.Item.displayName
140 |
141 | const SelectSeparator = React.forwardRef<
142 | React.ElementRef,
143 | React.ComponentPropsWithoutRef
144 | >(({ className, ...props }, ref) => (
145 |
150 | ))
151 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
152 |
153 | export {
154 | Select,
155 | SelectGroup,
156 | SelectValue,
157 | SelectTrigger,
158 | SelectContent,
159 | SelectLabel,
160 | SelectItem,
161 | SelectSeparator,
162 | SelectScrollUpButton,
163 | SelectScrollDownButton,
164 | }
165 |
--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Tabs = TabsPrimitive.Root
9 |
10 | const TabsList = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 |
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 |
25 | const TabsTrigger = React.forwardRef<
26 | React.ElementRef,
27 | React.ComponentPropsWithoutRef
28 | >(({ className, ...props }, ref) => (
29 |
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 |
40 | const TabsContent = React.forwardRef<
41 | React.ElementRef,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 |
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 |
--------------------------------------------------------------------------------
/src/lib/data.ts:
--------------------------------------------------------------------------------
1 | import { Campaign } from "./types";
2 |
3 | export let DEFAULT_CAMPAIGNS: Campaign[] = [
4 | {
5 | id: "1",
6 | title: "CopilotKit",
7 | url: "https://www.copilotkit.ai",
8 | headline: "Copilot Kit - The Open-Source Copilot Framework",
9 | description:
10 | "Build, deploy, and operate fully custom AI Copilots. In-app AI chatbots, AI agents, AI Textareas and more.",
11 | budget: 10000,
12 | keywords: "AI, chatbot, open-source, copilot, framework",
13 | },
14 | {
15 | id: "2",
16 | title: "EcoHome Essentials",
17 | url: "https://www.ecohomeessentials.com",
18 | headline: "Sustainable Living Made Easy",
19 | description:
20 | "Discover our eco-friendly products that make sustainable living effortless. Shop now for green alternatives!",
21 | budget: 7500,
22 | keywords: "eco-friendly, sustainable, green products, home essentials",
23 | },
24 | {
25 | id: "3",
26 | title: "TechGear Solutions",
27 | url: "https://www.techgearsolutions.com",
28 | headline: "Innovative Tech for the Modern World",
29 | description:
30 | "Find the latest gadgets and tech solutions. Upgrade your life with smart technology today!",
31 | budget: 12000,
32 | keywords: "tech, gadgets, innovative, modern, electronics",
33 | },
34 | {
35 | id: "4",
36 | title: "Global Travels",
37 | url: "https://www.globaltravels.com",
38 | headline: "Travel the World with Confidence",
39 | description:
40 | "Experience bespoke travel packages tailored to your dreams. Luxury, adventure, relaxation—your journey starts here.",
41 | budget: 20000,
42 | keywords: "travel, luxury, adventure, tours, global",
43 | },
44 | {
45 | id: "5",
46 | title: "FreshFit Meals",
47 | url: "https://www.freshfitmeals.com",
48 | headline: "Healthy Eating, Simplified",
49 | description:
50 | "Nutritious, delicious meals delivered to your door. Eating well has never been easier or tastier.",
51 | budget: 5000,
52 | keywords: "healthy, meals, nutrition, delivery, fit",
53 | },
54 | ];
55 |
--------------------------------------------------------------------------------
/src/lib/guideline.ts:
--------------------------------------------------------------------------------
1 | export const GUIDELINE: string = `
2 | # Ad Campaign Guidelines Document
3 |
4 | ## Campaign Objectives
5 |
6 | - **Brand Awareness**: Choose when introducing a new product or reaching a new market. The focus is on maximizing exposure.
7 | - **Lead Generation**: Suitable for building a customer database, often for services or B2B products.
8 | - **Sales Conversion**: Prioritize when the primary goal is to drive immediate online sales.
9 | - **Website Traffic**: Select to increase the number of visitors to a particular website or page.
10 | - **Engagement**: Ideal for content-driven campaigns aimed at interaction (likes, comments, shares).
11 |
12 | ## Bid Strategies
13 |
14 | - **Manual CPC (Cost Per Click)**: Use when you want control over the bid amounts for clicks.
15 | - **CPA (Cost Per Acquisition)**: Best for campaigns focused on conversions like sales or sign-ups.
16 | - **CPM (Cost Per Thousand Impressions)**: Recommended for brand awareness campaigns where impressions are more valuable than clicks.
17 |
18 | ## Scenario-Specific Actions
19 |
20 | ### Scenario: Launching a New Product
21 | - **Objective:** Brand Awareness
22 | - **Bid Strategy:** CPM
23 | - **Calculations:**
24 | - Determine your target reach and average industry CPM rates.
25 |
26 | ### Scenario: Maximizing Online Sales During a Holiday
27 | - **Objective:** Sales Conversion
28 | - **Bid Strategy:** CPA
29 | - **Calculations:**
30 | - Estimate the number of sales you aim
31 |
32 | ### Scenario: Growing the Subscriber List
33 | - **Objective:** Lead Generation
34 | - **Bid Strategy:** CPA or Manual CPC
35 | - **Calculations:**
36 | - Decide on Bid Amount based on historical data and the competitive landscape.
37 |
38 | ### Scenario: Increasing Blog Readership
39 | - **Objective:** Website Traffic
40 | - **Bid Strategy:** Manual CPC
41 | - **Calculations:**
42 | - Set a Bid Amount slightly higher than the average CPC to remain competitive.
43 |
44 | ### Scenario: Engaging the Community with Content
45 | - **Objective:** Engagement
46 | - **Bid Strategy:** CPM or Manual CPC (if specific interactions are more valuable)
47 | - **Calculations:**
48 | - Determine Bid Amount based on whether you're paying per interaction (CPC) or per impression (CPM).
49 |
50 | ## Prohibited content
51 |
52 | THE FOLLOWING CONTENT IS PROHIBITED FROM ADVERTISING ON OUR PLATFORM.
53 | DO NOT CREATE CAMPAIGNS THAT PROMOTE OR SELL THE FOLLOWING, INSTEAD INFORM THE USER OF THE VIOLATION.
54 |
55 | ### Counterfeit goods
56 | Campaign manager prohibits the sale or promotion for sale of counterfeit goods. Counterfeit goods contain a trademark or logo that is identical to or substantially indistinguishable from the trademark of another. They mimic the brand features of the product in an attempt to pass themselves off as a genuine product of the brand owner. This policy applies to the content of your ad and your website or app.
57 |
58 | ### Dangerous products or services
59 | We want to help keep people safe both online and offline, so we don't allow the promotion of some products or services that cause damage, harm, or injury.
60 | Examples of dangerous content: Recreational drugs (chemical or herbal); psychoactive substances; equipment to facilitate drug use; weapons, ammunition, explosive materials and fireworks; instructions for making explosives or other harmful products; tobacco products
61 |
62 | ### Enabling dishonest behavior
63 | We value honesty and fairness, so we don't allow the promotion of products or services that are designed to enable dishonest behavior.
64 | Examples of products or services that enable dishonest behavior: Hacking software or instructions; services designed to artificially inflate ad or website traffic; fake documents; academic cheating services
65 |
66 | ### Inappropriate content
67 | We value diversity and respect for others, and we strive to avoid offending users, so we don't allow ads or destinations that display shocking content or promote hatred, intolerance, discrimination, or violence.
68 |
69 | Examples of inappropriate or offensive content: bullying or intimidation of an individual or group, racial discrimination, hate group paraphernalia, graphic crime scene or accident images, cruelty to animals, murder, self-harm, extortion or blackmail, sale or trade of endangered species, ads using profane language
70 | `;
71 |
--------------------------------------------------------------------------------
/src/lib/script.ts:
--------------------------------------------------------------------------------
1 | export const SCRIPT_SUGGESTION = `
2 | WHENEVER THE USER WANTS TO CREATE A NEW CAMPAIGN, THE ASSISTANT MUST ASK A SERIES OF QUESTIONS ONE BY ONE TO GATHER THE NECESSARY INFORMATION TO SET UP THE CAMPAIGN SUCCESSFULLY.
3 |
4 | ONCE YOU HAVE THE REQUIRED INFORMATION, USE YOUR BEST GUESS FOR THE REST OF THE FIELDS.
5 |
6 | **Assistant:** “To begin with, could you please share the main goal of your advertising campaign? Are you looking to enhance brand recognition, generate leads, boost sales, increase traffic to your website, or engage with your audience in a more meaningful way?”
7 |
8 | - This will determine the **Campaign Objective** and guide the choice in **Bid Strategy**.
9 |
10 | **Assistant:** “What budget have you allocated for this campaign, and do you have a specific time frame in mind for how long you'd like the campaign to run?”
11 |
12 | - The answer will help the agent set the **Total Budget**, and possibly even influence the **Bid Amount**.
13 |
14 | **Assistant:** “Could you describe your ideal customer? What are their interests, demographics, and online behaviors?”
15 |
16 | - Understanding the target audience will assist in selecting appropriate **Keywords**, crafting the **Headline** and **Description** for the ad copy, and further refine the **Campaign Objective** and **Bid Strategy**.
17 | - The user has defined their own list of **Segments** that can be used to further target the audience. It's important to set the right segment for the campaign if it can be inferred from the user's response.
18 |
19 |
20 | WHEN FILLING THE FORM, ALSO RETRIEVE THE CORRECT CPC, CPM OR CPA FROM HISTORICAL DATA TO SET THE BID AMOUNT.
21 | `;
22 |
--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | export interface Campaign {
2 | id: string;
3 | objective?:
4 | | "brand-awareness"
5 | | "lead-generation"
6 | | "sales-conversion"
7 | | "website-traffic"
8 | | "engagement";
9 | title: string;
10 | keywords: string;
11 | url: string;
12 | headline: string;
13 | description: string;
14 | budget: number;
15 | bidStrategy?: "manual-cpc" | "cpa" | "cpm";
16 | bidAmount?: number;
17 | segment?: string;
18 | }
19 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | export function randomId() {
9 | return Math.random().toString(36).substring(2, 15);
10 | }
11 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss"
2 |
3 | const config = {
4 | darkMode: ["class"],
5 | content: [
6 | './pages/**/*.{ts,tsx}',
7 | './components/**/*.{ts,tsx}',
8 | './app/**/*.{ts,tsx}',
9 | './src/**/*.{ts,tsx}',
10 | ],
11 | prefix: "",
12 | theme: {
13 | container: {
14 | center: true,
15 | padding: "2rem",
16 | screens: {
17 | "2xl": "1400px",
18 | },
19 | },
20 | extend: {
21 | colors: {
22 | border: "hsl(var(--border))",
23 | input: "hsl(var(--input))",
24 | ring: "hsl(var(--ring))",
25 | background: "hsl(var(--background))",
26 | foreground: "hsl(var(--foreground))",
27 | primary: {
28 | DEFAULT: "hsl(var(--primary))",
29 | foreground: "hsl(var(--primary-foreground))",
30 | },
31 | secondary: {
32 | DEFAULT: "hsl(var(--secondary))",
33 | foreground: "hsl(var(--secondary-foreground))",
34 | },
35 | destructive: {
36 | DEFAULT: "hsl(var(--destructive))",
37 | foreground: "hsl(var(--destructive-foreground))",
38 | },
39 | muted: {
40 | DEFAULT: "hsl(var(--muted))",
41 | foreground: "hsl(var(--muted-foreground))",
42 | },
43 | accent: {
44 | DEFAULT: "hsl(var(--accent))",
45 | foreground: "hsl(var(--accent-foreground))",
46 | },
47 | popover: {
48 | DEFAULT: "hsl(var(--popover))",
49 | foreground: "hsl(var(--popover-foreground))",
50 | },
51 | card: {
52 | DEFAULT: "hsl(var(--card))",
53 | foreground: "hsl(var(--card-foreground))",
54 | },
55 | },
56 | borderRadius: {
57 | lg: "var(--radius)",
58 | md: "calc(var(--radius) - 2px)",
59 | sm: "calc(var(--radius) - 4px)",
60 | },
61 | keyframes: {
62 | "accordion-down": {
63 | from: { height: "0" },
64 | to: { height: "var(--radix-accordion-content-height)" },
65 | },
66 | "accordion-up": {
67 | from: { height: "var(--radix-accordion-content-height)" },
68 | to: { height: "0" },
69 | },
70 | },
71 | animation: {
72 | "accordion-down": "accordion-down 0.2s ease-out",
73 | "accordion-up": "accordion-up 0.2s ease-out",
74 | },
75 | },
76 | },
77 | plugins: [require("tailwindcss-animate")],
78 | } satisfies Config
79 |
80 | export default config
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------