Lexy

components/lexy/Claim.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useAccount, useContractWrite } from 'wagmi'
+import { Button } from '../../styles/elements'
+
+// create a react component called Claim that renders a button that when clicked calls the claim function
+export default function Claim() {
+  const { data: account } = useAccount()
+  const { isLoading: isClaimPending, writeAsync } = useContractWrite(
+    {
+      addressOrName: '',
+      contractInterface: '',
+    },
+    'claim',
+  )
+
+  const claim = async () => {
+    // claim function calls the claim function in the KaliToken contract on polygon using wagmi's useContractWrite hook
+    if (!account) return
+  }
+  return (
+    <Button
+      variant="cta"
+      onClick={claim}
+      css={{
+        fontFamily: 'Screen',
+        width: '100%',
+        height: '1.7rem',
+      }}
+      disabled={!account || isClaimPending}
+    >
+      Claim
+    </Button>
+  )
+}

components/lexy/Counter.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import Claim from './Claim'
+import { useAccount } from 'wagmi'
+import { Flex, Box, Button } from '../../styles/elements'
+
+// a counter component that receieve a count prop
+export default function Counter({ count }) {
+  const { data: account } = useAccount()
+  const claim = async () => {
+    if (!account) return
+  }
+
+  return (
+    <Flex
+      css={{
+        border: '1px solid $gray6',
+        borderRadius: '20px',
+        padding: '1rem',
+        fontSize: '1.5rem',
+        fontWeight: '800',
+        background: '$gray3',
+        color: '$gray11',
+        flexDirection: 'column',
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+        height: '6.5rem',
+      }}
+    >
+      {count} KALI
+      <Claim />
+    </Flex>
+  )
+}

components/lexy/Send.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { styled } from '../../styles/stitches.config'
+import { Flex, Text, Button } from '../../styles/elements'
+import { Form, Input } from '../../styles/form-elements'
+import { PaperPlaneIcon } from '@radix-ui/react-icons'
+
+const Icon = styled(PaperPlaneIcon, {
+  transform: 'rotate(330deg)',
+})
+
+export default function Send({ loading, submit, question, setQuestion }) {
+  return (
+    <Form>
+      <Input
+        type="text"
+        name="question"
+        placeholder="Type your question here..."
+        value={question}
+        onChange={(e) => setQuestion(e.target.value)}
+        css={{
+          fontFamily: 'Regular',
+          borderRadius: '10px',
+        }}
+      />
+      <Button onClick={submit} variant="cta" disabled={loading}>
+        {loading ? (
+          'Sending...'
+        ) : (
+          <Flex
+            css={{
+              gap: '8px',
+            }}
+          >
+            <Text>Ask</Text>
+            <Icon />
+          </Flex>
+        )}
+      </Button>
+    </Form>
+  )
+}

components/lexy/Text.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Text as TextBox, Flex } from '../../styles/elements'
+import { Avatar, AvatarImage, AvatarFallback } from '../../styles/Avatar'
+import { getRandomEmoji } from '../../utils'
+import { AddressZero } from '@ethersproject/constants'
+
+export default function Text({ text }) {
+  return (
+    <Flex
+      gap="sm"
+      dir="col"
+      css={{
+        fontFamily: 'Regular',
+        lineHeight: 1,
+        color: '$gray12',
+        background: `${text?.name == 'Lexy' ? '$violet5' : '$gray5'}`,
+        padding: '10px',
+        borderRadius: '20px',
+      }}
+    >
+      <Avatar>
+        <AvatarImage
+          src={text?.name == 'Lexy' ? '/img/lexy.jpeg' : '/img/preview.png'}
+          alt={`${text?.name == 'Lexy' ? 'Lexy' : 'Human'} icon`}
+        />
+        <AvatarFallback>{getRandomEmoji(AddressZero)}</AvatarFallback>
+      </Avatar>
+      {text &&
+        text?.text.split('/n').map((line, index) => (
+          <TextBox as="p" key={index}>
+            {line}
+          </TextBox>
+        ))}
+    </Flex>
+  )
+}

components/lexy/Texts.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Flex } from '../../styles/elements'
+import Text from './Text'
+
+export default function Texts({ texts }) {
+  console.log('texts', texts)
+  return (
+    <Flex
+      dir="col"
+      css={{
+        gap: '10px',
+      }}
+    >
+      {texts.map((text, index) => (
+        <Text key={index} text={text} />
+      ))}
+    </Flex>
+  )
+}

components/lexy/Vote.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { TiThumbsDown, TiThumbsUp } from 'react-icons/ti'
+import { Flex } from '../../styles/elements'
+
+// create a new component that is passed down vote props for voting with thumbs up or thumbs down and update vote to true or false accordingly
+export default function Vote({ text }) {
+  const vote = (bool) => {}
+  return (
+    <Flex gap="sm">
+      <TiThumbsUp />
+      <TiThumbsDown />
+    </Flex>
+  )
+}

components/lexy/index.js

@@ -0,0 +1,78 @@
+import { useState } from 'react'
+import Send from './Send'
+import Texts from './Texts'
+import Counter from './Counter'
+import { Flex } from '../../styles/elements'
+
+export default function Lexy() {
+  const [texts, setTexts] = useState([
+    {
+      name: 'Lexy',
+      text: 'Hey! I am Lexy. I am a legal consulting chatbot. How can I help you?',
+    },
+  ])
+  const [question, setQuestion] = useState()
+  const [count, setCount] = useState(0)
+  const [loading, setLoading] = useState(false)
+
+  async function submit(e) {
+    e.preventDefault()
+    setLoading(true)
+    let textsArray = texts
+    let questionObj = {}
+    questionObj['name'] = 'Human'
+    questionObj['text'] = question
+    texts.push(questionObj)
+
+    const response = await fetch('/api/lexy', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ question: `${question} ->` }),
+    })
+    const data = await response.json()
+
+    console.log('data', data?.result)
+    let answerObj = {}
+    answerObj['name'] = 'Lexy'
+    answerObj['text'] = data.result
+
+    textsArray.push(answerObj)
+
+    setTexts(textsArray)
+    setQuestion('')
+    setCount(count++)
+    setLoading(false)
+  }
+
+  return (
+    <Flex
+      css={{
+        gap: '1rem',
+        position: 'absolute',
+        left: '10%',
+        right: '10%',
+        top: '6rem',
+        justifyContent: 'space-evenly',
+        flexDirection: 'row',
+        background: '$gray2',
+        padding: '1rem',
+        border: '1px solid $gray6',
+        borderRadius: '20px',
+      }}
+    >
+      <Flex
+        dir="col"
+        gap="md"
+        css={{
+          width: '75%',
+        }}
+      >
+        <Texts texts={texts} />
+        <Send submit={submit} question={question} setQuestion={setQuestion} loading={loading} />
+      </Flex>
+      <Counter count={count} />
+    </Flex>
+  )
+}

components/my-daos/DaoCard.js

@@ -5,7 +5,6 @@ import { Flex, Box } from '../../styles/elements'
 import { getDaoChain } from '../../utils'
 import { useNetwork } from 'wagmi'
 import { getRandomEmoji } from '../../utils/'
-import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar'
 
 const Name = styled('div', {
   fontFamily: 'Bold',

next.config.js

@@ -6,6 +6,7 @@ module.exports = {
   webpack: function (config, options) {
     config.experiments = {
       topLevelAwait: true,
+      layers: true,
     }
     return config
   },

package.json

@@ -39,6 +39,7 @@
     "moralis": "^1.8.0",
     "next": "12.1.0",
     "node": "^17.4.0",
+    "openai": "^3.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "^7.30.0",

pages/api/lexy.js

@@ -0,0 +1,22 @@
+import { Configuration, OpenAIApi } from 'openai'
+
+const configuration = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY,
+})
+const openai = new OpenAIApi(configuration)
+
+export default async function (req, res) {
+  const completion = await openai.createCompletion({
+    model: 'davinci:ft-kali-2022-06-20-00-41-12',
+    prompt: generatePrompt(req.body.question),
+    temperature: 0.1,
+    max_tokens: 2000, // max tokens to return
+    stop: [' END', ' ->'], // stop token
+  })
+
+  res.status(200).json({ result: completion.data.choices[0].text })
+}
+
+function generatePrompt(question) {
+  return `A conversation with a female lawyer chatbot named Lexy. She is intelligent, helpful and friendly. Who is your favourite Supreme Court judge? -> None of them END.  ${question}`
+}

pages/lexy.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Layout from '../components/layout'
+import Lexy from '../components/lexy/index'
+import NewDaoSquare from '../components/my-daos/NewDaoSquare'
+
+export default function LexyPage() {
+  return (
+    <Layout heading="Lexy">
+      <Lexy />
+      <NewDaoSquare />
+    </Layout>
+  )
+}

styles/form-elements/Input.js

@@ -91,6 +91,9 @@ const Input = styled('input', {
         },
       },
       textarea: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
         padding: '0.5rem',
         width: '97%',
         minHeight: '10vh',

yarn.lock

@@ -2821,7 +2821,7 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.2.tgz#dcf7fb6dea866166c3eab33d68208afe4d5f670c"
   integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==
 
-[email protected]:
+[email protected], axios@^0.26.0:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
   integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
@@ -4587,6 +4587,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -6123,6 +6132,14 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
+openai@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/openai/-/openai-3.0.0.tgz#0816f1d72ee37820c9ff14d93d597431489fec37"
+  integrity sha512-YNAPZKzBfE6MnR5Ro/z3uKbg7T3F3W1FoTCtYheKRdEjZeheMX49QYFeL990gBFAhuGziEZCUdhnNT+eIrxX/Q==
+  dependencies:
+    axios "^0.26.0"
+    form-data "^4.0.0"
+
 optionator@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"