From 881ba95664164c87e7d45bf6b7ad770ebd0810c1 Mon Sep 17 00:00:00 2001
From: Andrei Canta <deiucanta@gmail.com>
Date: Sat, 18 Mar 2023 12:42:08 +0200
Subject: [PATCH] add characters, formats, styles and tones

---
 src/routes/ChatRoute.tsx |  84 ++++++++++++++++--
 src/utils/characters.ts  |  38 --------
 src/utils/constants.ts   | 183 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 262 insertions(+), 43 deletions(-)
 delete mode 100644 src/utils/characters.ts
 create mode 100644 src/utils/constants.ts

diff --git a/src/routes/ChatRoute.tsx b/src/routes/ChatRoute.tsx
index 257fd14..b33a6ea 100644
--- a/src/routes/ChatRoute.tsx
+++ b/src/routes/ChatRoute.tsx
@@ -5,6 +5,8 @@ import {
   Container,
   Flex,
   MediaQuery,
+  Select,
+  SimpleGrid,
   Skeleton,
   Stack,
   Textarea,
@@ -17,7 +19,12 @@ import { AiOutlineSend } from "react-icons/ai";
 import { MessageItem } from "../components/MessageItem";
 import { db } from "../db";
 import { useChatId } from "../hooks/useChatId";
-import { characters } from "../utils/characters";
+import {
+  writingCharacters,
+  writingFormats,
+  writingStyles,
+  writingTones,
+} from "../utils/constants";
 import { createChatCompletion } from "../utils/openai";
 
 export function ChatRoute() {
@@ -37,7 +44,23 @@ export function ChatRoute() {
     return db.chats.get(chatId);
   }, [chatId]);
 
-  const [character, setCharacter] = useState(0);
+  const [writingCharacter, setWritingCharacter] = useState<string | null>(null);
+  const [writingTone, setWritingTone] = useState<string | null>(null);
+  const [writingStyle, setWritingStyle] = useState<string | null>(null);
+  const [writingFormat, setWritingFormat] = useState<string | null>(null);
+
+  const getSystemMessage = () => {
+    const message: string[] = [];
+    if (writingCharacter) message.push(`You are ${writingCharacter}.`);
+    if (writingTone) message.push(`Respond in ${writingTone} tone.`);
+    if (writingStyle) message.push(`Respond in ${writingStyle} style.`);
+    if (writingFormat) message.push(writingFormat);
+    if (message.length === 0)
+      message.push(
+        "You are ChatGPT, a large language model trained by OpenAI."
+      );
+    return message.join(" ");
+  };
 
   const submit = async () => {
     if (submitting) return;
@@ -75,7 +98,7 @@ export function ChatRoute() {
       const result = await createChatCompletion(apiKey, [
         {
           role: "system",
-          content: `You are a ${characters[character].name}.${characters[character].description}`,
+          content: getSystemMessage(),
         },
         ...(messages ?? []).map((message) => ({
           role: message.role,
@@ -111,7 +134,7 @@ export function ChatRoute() {
         const createChatDscription = await createChatCompletion(apiKey, [
           {
             role: "system",
-            content: `You are a ${characters[character].name}.${characters[character].description}`,
+            content: getSystemMessage(),
           },
           ...(messages ?? []).map((message) => ({
             role: message.role,
@@ -194,10 +217,61 @@ export function ChatRoute() {
         })}
       >
         <Container>
+          {messages?.length === 0 && (
+            <SimpleGrid
+              mb="sm"
+              spacing="xs"
+              breakpoints={[
+                { minWidth: "sm", cols: 4 },
+                { maxWidth: "sm", cols: 2 },
+              ]}
+            >
+              <Select
+                value={writingCharacter}
+                onChange={setWritingCharacter}
+                data={writingCharacters}
+                placeholder="Character"
+                variant="filled"
+                searchable
+                clearable
+                sx={{ flex: 1 }}
+              />
+              <Select
+                value={writingTone}
+                onChange={setWritingTone}
+                data={writingTones}
+                placeholder="Tone"
+                variant="filled"
+                searchable
+                clearable
+                sx={{ flex: 1 }}
+              />
+              <Select
+                value={writingStyle}
+                onChange={setWritingStyle}
+                data={writingStyles}
+                placeholder="Style"
+                variant="filled"
+                searchable
+                clearable
+                sx={{ flex: 1 }}
+              />
+              <Select
+                value={writingFormat}
+                onChange={setWritingFormat}
+                data={writingFormats}
+                placeholder="Format"
+                variant="filled"
+                searchable
+                clearable
+                sx={{ flex: 1 }}
+              />
+            </SimpleGrid>
+          )}
           <Flex gap="sm">
             <Textarea
               key={chatId}
-              style={{ flex: 1 }}
+              sx={{ flex: 1 }}
               placeholder="Your message here..."
               autosize
               autoFocus
diff --git a/src/utils/characters.ts b/src/utils/characters.ts
deleted file mode 100644
index f77ef36..0000000
--- a/src/utils/characters.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-export const characters = [
-    {
-        name: "ChatGPT",
-        description: "You are ChatGPT, a large language model trained by OpenAI.",
-    },
-    {
-        name: "Standup Comedian",
-        description: "A standup comedian who can make you laugh with their jokes and humor.",
-    },
-    {
-        name: "Life Coach",
-        description: "A life coach who can help you set and achieve personal and professional goals.",
-    },
-    {
-        name: "Career Counselor",
-        description: "A career counselor who can help you with anything related to your career, from job searching to career planning.",
-    },
-    {
-        name: "Nutritionist",
-        description: "A nutritionist who can help you with your dietary needs by providing recipes, advice on healthy eating habits, and dietary recommendations.",
-    },
-    {
-        name: "Product Manager",
-        description: "A product manager who can oversee the development and marketing of a product, identify customer needs, and work with engineers and designers to create a product roadmap.",
-    },
-    {
-        name: "Personal Trainer",
-        description: "A personal trainer who can help you stay fit and improve your health by creating personalized fitness plans and providing workout routines.",
-    },
-    {
-        name: "Life Hacker",
-        description: "A life hacker who can provide useful tips and tricks to help you optimize your daily routines, save time, and increase productivity.",
-    },
-    {
-        name: "Travel Advisor",
-        description: "A travel advisor who can suggest travel destinations, provide recommendations on transportation and accommodations, and help you plan your itinerary based on your preferences and budget.",
-    },
-]
\ No newline at end of file
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
new file mode 100644
index 0000000..20ff4a4
--- /dev/null
+++ b/src/utils/constants.ts
@@ -0,0 +1,183 @@
+export const writingCharacters = [
+  {
+    label: "Standup Comedian",
+    value:
+      "A performer who entertains audiences by telling jokes and humorous stories.",
+  },
+  {
+    label: "Life Coach",
+    value:
+      "A professional who helps individuals identify and achieve their personal and professional goals.",
+  },
+  {
+    label: "Career Counselor",
+    value:
+      "A professional who helps individuals explore and choose careers, develop job search strategies, and improve job performance.",
+  },
+  {
+    label: "Nutritionist",
+    value:
+      "A health professional who specializes in the study of nutrition and its effects on the body.",
+  },
+  {
+    label: "Product Manager",
+    value:
+      "A professional who oversees the development and marketing of a company's products.",
+  },
+  {
+    label: "Personal Trainer",
+    value:
+      "A fitness professional who works with individuals to develop personalized exercise programs and improve their overall health and fitness.",
+  },
+  {
+    label: "Life Hacker",
+    value:
+      "A person who uses unconventional methods to solve problems and increase productivity in everyday life.",
+  },
+  {
+    label: "Travel Advisor",
+    value:
+      "A professional who helps individuals plan and book travel arrangements.",
+  },
+  {
+    label: "Mindfulness Coach",
+    value:
+      "A professional who helps individuals develop mindfulness practices to reduce stress and improve well-being.",
+  },
+  {
+    label: "Financial Advisor",
+    value:
+      "A professional who provides guidance and advice on financial planning, investment strategies, and retirement planning.",
+  },
+  {
+    label: "Language Tutor",
+    value:
+      "A teacher who helps individuals learn and improve their language skills.",
+  },
+  {
+    label: "Travel Guide",
+    value:
+      "A professional who leads tours and provides information about local attractions and culture.",
+  },
+  {
+    label: "Marketing Expert",
+    value:
+      "A professional who develops and implements marketing strategies to promote products and services.",
+  },
+  {
+    label: "Software Developer",
+    value:
+      "A professional who designs, develops, and maintains software applications and systems.",
+  },
+  {
+    label: "Dating Coach",
+    value:
+      "A professional who helps individuals improve their dating and relationship skills.",
+  },
+  {
+    label: "DIY Expert",
+    value:
+      "A person who is skilled at completing a wide range of do-it-yourself projects around the home.",
+  },
+  {
+    label: "Journalist",
+    value:
+      "A professional who investigates and reports on current events and news stories.",
+  },
+  {
+    label: "Tech Writer",
+    value:
+      "A professional who writes about technology and related topics for a variety of audiences.",
+  },
+  {
+    label: "Professional Chef",
+    value:
+      "A skilled culinary professional who prepares meals and manages kitchen operations.",
+  },
+  {
+    label: "Professional Salesperson",
+    value:
+      "A professional who sells products and services to businesses and consumers.",
+  },
+  {
+    label: "Startup Tech Lawyer",
+    value:
+      "A legal professional who specializes in providing legal advice and services to startup technology companies.",
+  },
+  {
+    label: "Graphic Designer",
+    value:
+      "A professional who designs visual materials such as logos, brochures, and websites.",
+  },
+  {
+    label: "Academic Researcher",
+    value:
+      "A professional who conducts research and produces scholarly work in a particular academic field.",
+  },
+  {
+    label: "Customer Support Agent",
+    value:
+      "A professional who provides assistance and support to customers who have questions or problems with a company's products or services.",
+  },
+  {
+    label: "HR Consultant",
+    value:
+      "A professional who provides guidance and advice to organizations on human resource management and strategy",
+  },
+];
+
+export const writingTones = [
+  "Assertive",
+  "Authoritative",
+  "Casual",
+  "Confident",
+  "Condescending",
+  "Conversational",
+  "Diplomatic",
+  "Direct",
+  "Eloquent",
+  "Formal",
+  "Friendly",
+  "Humorous",
+  "Informative",
+  "Inspiring",
+  "Intense",
+  "Irritable",
+  "Joking",
+  "Polite",
+  "Sarcastic",
+  "Sincere",
+  "Soothing",
+  "Stern",
+  "Sympathetic",
+  "Tactful",
+  "Witty",
+];
+
+export const writingStyles = [
+  "Academic",
+  "Analytical",
+  "Argumentative",
+  "Conversational",
+  "Creative",
+  "Critical",
+  "Descriptive",
+  "Explanatory",
+  "Informative",
+  "Instructive",
+  "Investigative",
+  "Journalistic",
+  "Metaphorical",
+  "Narrative",
+  "Persuasive",
+  "Poetic",
+  "Satirical",
+  "Technical",
+];
+
+export const writingFormats = [
+  { value: "Answer as concise as possible", label: "Concise" },
+  { value: "Think step-by-step", label: "Step-by-step" },
+  { value: "Answer in painstakingly detail", label: "Extreme Detail" },
+  { value: "Explain like I'm five", label: "Explain Like I'm Five" },
+];