Skip to content

Commit

Permalink
prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@nsbradford
nsbradford committed Sep 1, 2023
1 parent 065daed commit c863cfb
Show file tree
Hide file tree
Showing 7 changed files with 183 additions and 160 deletions.
12 changes: 6 additions & 6 deletions src/components/chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ export function MessageUI(message: ChatMessage) {
return (
<div
className={`my-2 p-3 rounded-lg ${
message.role === 'assistant'
? 'bg-gray-100'
: 'bg-white'
message.role === 'assistant' ? 'bg-gray-100' : 'bg-white'
}`}
>
<div className="flex items-start">
Expand All @@ -26,7 +24,7 @@ export function MessageUI(message: ChatMessage) {
</div>
</div>
);
};
}

function parseMessageJson(message: ChatMessage) {
let content;
Expand All @@ -40,8 +38,10 @@ function parseMessageJson(message: ChatMessage) {
content = parsed;
} else if ('text' in parsed && typeof parsed.text === 'string') {
content = parsed.text;
} else if ('user_message' in parsed &&
typeof parsed.user_message === 'string') {
} else if (
'user_message' in parsed &&
typeof parsed.user_message === 'string'
) {
content = parsed.user_message;
} else if ('action' in parsed && parsed.action === 'exit') {
content = 'Your response was successfully submitted.';
Expand Down
4 changes: 3 additions & 1 deletion src/components/home/modes/DashboardMode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@ export default function DashboardMode(props: DashboardModeProps) {
</span>
</div>
<p className="mt-1 truncate text-xs leading-5 text-gray-500">
{f.description ? f.description.slice(0, 128) + '...' : f.raw_instructions.slice(0, 128) + '...'}
{f.description
? f.description.slice(0, 128) + '...'
: f.raw_instructions.slice(0, 128) + '...'}
</p>
</div>
</div>
Expand Down
44 changes: 30 additions & 14 deletions src/components/home/modes/NewFormMode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,21 +50,26 @@ export default function NewFormMode(props: NewFormModeProps) {
const conversationThread: ChatMessage[] = [
{
role: 'user',
content: 'Here is a short text description of what I want to create a survey form about: ' + formTopic + '\n' + 'What should the title of this survey form be?',
}
content:
'Here is a short text description of what I want to create a survey form about: ' +
formTopic +
'\n' +
'What should the title of this survey form be?',
},
];
const titleResponse = await callLLM(PROMPT_BUILD, conversationThread);
if (!titleResponse) {
console.error('No response from LLM');
setStep(1);
return;
};
}
setTitle(removeStartAndEndQuotes(titleResponse.content) || '');

conversationThread.push(titleResponse);
conversationThread.push({
role: 'user',
content: 'Create a short description of this survey form. This description will be given to a person who is in charge of administering the form data collection. This person will use this description to understand what the form is about, so that they can collect the correct information from respondents. Don\'t include information that is not relevant to the form, or state that this is a form. This survey administrator already knows that, instead they care about information relation the forms content. For example, if you want to collect a respondent\'s name and age, you can write: "This form is to collect the names and ages of people attending a birthday party."',
content:
'Create a short description of this survey form. This description will be given to a person who is in charge of administering the form data collection. This person will use this description to understand what the form is about, so that they can collect the correct information from respondents. Don\'t include information that is not relevant to the form, or state that this is a form. This survey administrator already knows that, instead they care about information relation the forms content. For example, if you want to collect a respondent\'s name and age, you can write: "This form is to collect the names and ages of people attending a birthday party."',
});
const descriptionResponse = await callLLM(PROMPT_BUILD, conversationThread);
if (!descriptionResponse) {
Expand All @@ -77,29 +82,39 @@ export default function NewFormMode(props: NewFormModeProps) {
conversationThread.push(descriptionResponse);
conversationThread.push({
role: 'user',
content: 'Write any guidance that will help respondents fill out this form, such as conditional information to collect or how to answer questions. The survey administrator will reference this guidence when deciding which follow up questions to ask or how to interpret the answers. For example, if you want to collect a RSVP for a birthday party, including the number of guests attending, you may write "Please include the number of guests attending the birthday party, but only if the RSVP is yes." because it doesn\'t make sense to ask for the number of guests if the respondent is not attending.',
content:
'Write any guidance that will help respondents fill out this form, such as conditional information to collect or how to answer questions. The survey administrator will reference this guidence when deciding which follow up questions to ask or how to interpret the answers. For example, if you want to collect a RSVP for a birthday party, including the number of guests attending, you may write "Please include the number of guests attending the birthday party, but only if the RSVP is yes." because it doesn\'t make sense to ask for the number of guests if the respondent is not attending.',
});

const fieldsGuidanceResponse = await callLLM(PROMPT_BUILD, conversationThread);
const fieldsGuidanceResponse = await callLLM(
PROMPT_BUILD,
conversationThread
);
if (!fieldsGuidanceResponse) {
console.error('No response from LLM');
setStep(1);
return;
};
setFieldsGuidance(removeStartAndEndQuotes(fieldsGuidanceResponse.content) || '');
}
setFieldsGuidance(
removeStartAndEndQuotes(fieldsGuidanceResponse.content) || ''
);

conversationThread.push(fieldsGuidanceResponse);
conversationThread.push({
role: 'user',
content: 'Now return a JSON object that will serve as a template for the form responses. This object should have keys that are strings and values that are strings. The keys are the names of the fields that the survey administrator should attempt to obtain. They values should be descriptions of those fields, including any formatting information or non-obvious ways to validate the provided information. For example, if you want to collect a respondent\'s name and age, you can write: {"name": "name of the respondent", "age": "age of the respondent"}',
content:
'Now return a JSON object that will serve as a template for the form responses. This object should have keys that are strings and values that are strings. The keys are the names of the fields that the survey administrator should attempt to obtain. They values should be descriptions of those fields, including any formatting information or non-obvious ways to validate the provided information. For example, if you want to collect a respondent\'s name and age, you can write: {"name": "name of the respondent", "age": "age of the respondent"}',
});

const fieldsSchemaResponse = await callLLM(PROMPT_BUILD, conversationThread);
const fieldsSchemaResponse = await callLLM(
PROMPT_BUILD,
conversationThread
);
if (!fieldsSchemaResponse) {
console.error('No response from LLM');
setStep(1);
return;
};
}
const fieldsSchema = fieldsSchemaResponse.content || '{}';
const fieldsSchemaJSON = JSON.parse(fieldsSchema);
setFieldsSchema(fieldsSchemaJSON);
Expand All @@ -108,7 +123,6 @@ export default function NewFormMode(props: NewFormModeProps) {

const renderStepContent = () => {
if (step === 1) {

return (
<div className="sm:col-span-4">
<label
Expand Down Expand Up @@ -151,7 +165,7 @@ export default function NewFormMode(props: NewFormModeProps) {
Title
</label>
<div className="mt-2">
<input
<input
type="text"
id="title"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
Expand Down Expand Up @@ -197,7 +211,9 @@ export default function NewFormMode(props: NewFormModeProps) {
<div>
<div className="mt-4">
Fields Schema:
<pre className="bg-gray-100 p-3 rounded">{JSON.stringify(fieldsSchema, null, 2)}</pre>
<pre className="bg-gray-100 p-3 rounded">
{JSON.stringify(fieldsSchema, null, 2)}
</pre>
</div>
</div>
</div>
Expand Down
11 changes: 8 additions & 3 deletions src/pages/forms/fill/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,15 @@ export function CreateFormInner(props: { formId: string }) {
}, []); // The empty array ensures this effect runs only once on mount
return form ? (
<InnerChat form={form} supabase={supabase} />
) :
<>{error ? ErrorBox(error) : <h1 className="text-3xl font-extrabold mb-6">Loading...</h1>}
) : (
<>
{error ? (
ErrorBox(error)
) : (
<h1 className="text-3xl font-extrabold mb-6">Loading...</h1>
)}
</>
;
);
}
export function InnerChat(props: {
form: Form;
Expand Down
90 changes: 45 additions & 45 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,11 @@ function SpecificsTextOnLeft(props: {
</div>
);
}
function SpecificsTextOnRight(props: { heading: string; content: string; children: React.ReactNode }) {
function SpecificsTextOnRight(props: {
heading: string;
content: string;
children: React.ReactNode;
}) {
return (
<div className="flex flex-wrap flex-col-reverse sm:flex-row mt-20">
<div className="w-full sm:w-1/2 p-2">{props.children}</div>
Expand All @@ -121,12 +125,9 @@ function SpecificsTextOnRight(props: { heading: string; content: string; childre
<h3 className="text-3xl text-gray-800 font-bold leading-none mb-3">
{props.heading}
</h3>
<p className="text-gray-600 pr-4">
{props.content}
</p>
<p className="text-gray-600 pr-4">{props.content}</p>
</div>
</div>

</div>
);
}
Expand All @@ -149,8 +150,7 @@ function Specifics() {
<div className="bg-white p-4 rounded-lg shadow-xl text-xs text-gray-400">
Waitlist for my startup: name, email address, company, job title,
and what technologies they currently use for marketing research.
If they&rsquo;re a software engineer, ask for their
GitHub.
If they&rsquo;re a software engineer, ask for their GitHub.
</div>
</div>
</SpecificsTextOnLeft>
Expand All @@ -162,7 +162,9 @@ function Specifics() {
<div className="bg-white p-4 rounded-lg shadow-xl text-xs text-gray-400">
<MessageUI
role={'assistant'}
content={'Thanks, Jane! Now, what is your company and job title?'}
content={
'Thanks, Jane! Now, what is your company and job title?'
}
/>
<MessageUI
role={'user'}
Expand All @@ -172,10 +174,7 @@ function Specifics() {
role={'assistant'}
content={`Very cool! What's your GitHub?`}
/>
<MessageUI
role={'user'}
content={`https://github.com/jd-70B`}
/>
<MessageUI role={'user'} content={`https://github.com/jd-70B`} />
<MessageUI
role={'assistant'}
content={`Thanks, I see your username is 'jd-70B'. Now, what technologies do you use when doing marketing research?`}
Expand All @@ -186,39 +185,40 @@ function Specifics() {
<SpecificsTextOnLeft
heading="Keep your data structured."
content="All your form responses remain structured according to the inferred schema for easy analysis."
><div className={`${sunsetGradient} p-6 rounded-xl shadow-xl`}>
<table className="text-xs min-w-full bg-white rounded-lg shadow-xl text-sm text-gray-400 border-collapse p-8">
<thead>
<tr className="text-left border-b">
<th className="py-2 px-2">Name</th>
<th className="py-2 px-2">Email</th>
<th className="py-2 px-2">Company</th>
<th className="py-2 px-2">Title</th>
<th className="py-2 px-2">Tech</th>
<th className="py-2 px-2">GitHub</th>
</tr>
</thead>
<tbody>
<tr>
<td className="py-2 px-2 border-b">Jane Doe</td>
<td className="py-2 px-2 border-b">[email protected]</td>
<td className="py-2 px-2 border-b">Tech Co.</td>
<td className="py-2 px-2 border-b">ML Engineer</td>
<td className="py-2 px-2 border-b">React, Node, Python</td>
<td className="py-2 px-2 border-b">jd-70B</td>
</tr>
<tr>
<td className="py-2 px-2 border-b">Bill Smith</td>
<td className="py-2 px-2 border-b">[email protected]</td>
<td className="py-2 px-2 border-b">Biz Corp.</td>
<td className="py-2 px-2 border-b">Marketing Manager</td>
<td className="py-2 px-2 border-b">Google Analytics</td>
<td className="py-2 px-2 border-b">-</td>
</tr>
</tbody>
</table>
</div>
</SpecificsTextOnLeft>
>
<div className={`${sunsetGradient} p-6 rounded-xl shadow-xl`}>
<table className="text-xs min-w-full bg-white rounded-lg shadow-xl text-sm text-gray-400 border-collapse p-8">
<thead>
<tr className="text-left border-b">
<th className="py-2 px-2">Name</th>
<th className="py-2 px-2">Email</th>
<th className="py-2 px-2">Company</th>
<th className="py-2 px-2">Title</th>
<th className="py-2 px-2">Tech</th>
<th className="py-2 px-2">GitHub</th>
</tr>
</thead>
<tbody>
<tr>
<td className="py-2 px-2 border-b">Jane Doe</td>
<td className="py-2 px-2 border-b">[email protected]</td>
<td className="py-2 px-2 border-b">Tech Co.</td>
<td className="py-2 px-2 border-b">ML Engineer</td>
<td className="py-2 px-2 border-b">React, Node, Python</td>
<td className="py-2 px-2 border-b">jd-70B</td>
</tr>
<tr>
<td className="py-2 px-2 border-b">Bill Smith</td>
<td className="py-2 px-2 border-b">[email protected]</td>
<td className="py-2 px-2 border-b">Biz Corp.</td>
<td className="py-2 px-2 border-b">Marketing Manager</td>
<td className="py-2 px-2 border-b">Google Analytics</td>
<td className="py-2 px-2 border-b">-</td>
</tr>
</tbody>
</table>
</div>
</SpecificsTextOnLeft>
<SpecificsTextOnRight
heading="Unlimited Power."
content="Custom validations. Complicated conditional logic. If you can think it, we can do it."
Expand Down
4 changes: 2 additions & 2 deletions src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,9 @@ export async function submitResponseToSupabase(
}
}

export const removeStartAndEndQuotes = (str: string | null) => {
export const removeStartAndEndQuotes = (str: string | null) => {
if (!str) {
return str;
}
return str.replace(/^"(.*)"$/, '$1');
};
};
Loading

0 comments on commit c863cfb

Please sign in to comment.