Merge pull request #4 from malgamves/updates

Updates: Frontend Code, API Token

.gitignore

@@ -0,0 +1,115 @@
+############################
+# OS X
+############################
+
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+.Spotlight-V100
+.Trashes
+._*
+
+
+############################
+# Linux
+############################
+
+*~
+
+
+############################
+# Windows
+############################
+
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+*.cab
+*.msi
+*.msm
+*.msp
+
+
+############################
+# Packages
+############################
+
+*.7z
+*.csv
+*.dat
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.seed
+*.so
+*.swo
+*.swp
+*.swn
+*.swm
+*.out
+*.pid
+
+
+############################
+# Logs and databases
+############################
+
+.tmp
+*.log
+*.sql
+*.sqlite
+*.sqlite3
+
+
+############################
+# Misc.
+############################
+
+*#
+ssl
+.idea
+nbproject
+public/uploads/*
+!public/uploads/.gitkeep
+
+############################
+# Node.js
+############################
+
+lib-cov
+lcov.info
+pids
+logs
+results
+node_modules
+.node_history
+
+############################
+# Tests
+############################
+
+testApp
+coverage
+
+############################
+# Strapi
+############################
+
+.env
+license.txt
+exports
+*.cache
+dist
+build
+.strapi-updater.json

admin/src/components/Input/index.js

@@ -2,10 +2,9 @@ import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { Textarea } from '@strapi/design-system';
-import { TwoColsLayout } from '@strapi/design-system';
+import { auth } from '@strapi/helper-plugin'
 
 
 export default function Index({
@@ -18,17 +17,16 @@ export default function Index({
   attribute,
 }) {
   const { formatMessage } = useIntl();
-  const [content, setContent] = useState('');
   const [prompt, setPrompt] = useState('');
   const [err, setErr] = useState(''); 
 
-  const aiClick = async () => {
+  const generateText = async () => {
     try {
-      const response = await fetch('https://api.openai.com/v1/completions', {
+      const response = await fetch(`/ai-text-generation/generate-text`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${accessToken}` //functionality to be added
+          'Authorization': `Bearer ${auth.getToken()}` 
         },
         body: JSON.stringify({
           'model': 'text-davinci-001',
@@ -46,7 +44,9 @@ export default function Index({
       }
 
       const result = await response.json();
-      onChange({ target: { name, value: result.choices[0].text, type: attribute.type } })
+      const parsedResult = result.choices[0].text.replace(/(?:\r\n|\r|\n)/g, '');
+
+      onChange({ target: { name, value: parsedResult, type: attribute.type } })
     } catch (err) {
       setErr(err.message);
     }
@@ -58,31 +58,32 @@ export default function Index({
   }
 
   return (
-    <Box>
-      <Stack spacing={1}>
-        <Stack spacing={1}>
-          <TextInput 
-          placeholder="Please write a prompt for content to generate" 
-          label="Prompt" name="Prompt" 
-          onChange={e => setPrompt(e.target.value)} value={prompt} />
+    <Stack spacing={1}>
+      <TextInput
+        placeholder="Please write a prompt for content to generate"
+        label="Prompt"
+        name="Prompt"
+        onChange={(e) => setPrompt(e.target.value)}
+        value={prompt}
+      />
+      <Stack padding={4} spacing={2}>
+        <Textarea
+          placeholder="Generated text"
+          label="Content"
+          name="content"
+          onChange={(e) =>
+            onChange({
+              target: { name, value: e.target.value, type: attribute.type },
+            })
+          }
+        >
+          {value}
+        </Textarea>
+        <Stack horizontal spacing={4}>
+          <Button onClick={() => generateText()}>Generate</Button>
+          <Button onClick={() => clearGeneratedText()}>Clear</Button>
         </Stack>
-        <Box as="p" padding={4}>
-          <Textarea 
-          placeholder="Generated text" 
-          label="Content" 
-          name="content" 
-          onChange={e => onChange({ target: { name, value: e.target.value, type: attribute.type } })}>
-            {value}
-          </Textarea>
-        </Box>
       </Stack>
-      <Box padding={4}>
-        <TwoColsLayout 
-        startCol={<Button onClick={aiClick}>Generate</Button>} 
-        endCol={<Button onClick={() => clearGeneratedText()}>Clear</Button>
-      } 
-        />
-      </Box>
-    </Box>
+    </Stack>
   )
 }

admin/src/components/PluginIcon/index.js

@@ -5,8 +5,28 @@
  */
 
 import React from 'react';
-import Puzzle from '@strapi/icons/Puzzle';
+import styled from 'styled-components';
+import { Icon } from '@strapi/design-system/Icon';
+import { Flex } from '@strapi/design-system/Flex';
+import Pencil from '@strapi/icons/Pencil';
 
-const PluginIcon = () => <Puzzle />;
 
-export default PluginIcon;
+const IconBox = styled(Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+
+const PluginIcon = () => {
+    return (
+        <IconBox justifyContent="center" alignItems="center" width={7} height={6} hasRadius aria-hidden>
+            <Icon as={Pencil} />
+        </IconBox>
+    );
+};
+
+export default PluginIcon;

admin/src/index.js

@@ -1,41 +1,14 @@
 import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
-import Initializer from './components/Initializer';
 import PluginIcon from './components/PluginIcon';
-import AITextIcon from './components/PluginIcon';
 
 
 const name = pluginPkg.strapi.name;
 
 export default { 
   register(app) {
-    // app.addMenuLink({
-    //   to: `/plugins/${pluginId}`,
-    //   icon: PluginIcon,
-    //   intlLabel: {
-    //     id: `${pluginId}.plugin.name`,
-    //     defaultMessage: name,
-    //   },
-    //   Component: async () => {
-    //     const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
-
-    //     return component;
-    //   },
-    //   permissions: [
-    //     // Uncomment to set the permissions of the plugin here
-    //     // {
-    //     //   action: '', // the action name should be plugin::plugin-name.actionType
-    //     //   subject: null,
-    //     // },
-    //   ],
-    // });
-    // app.registerPlugin({
-    //   id: pluginId,
-    //   initializer: Initializer,
-    //   isReady: false,
-    //   name,
-    // });
+
     app.customFields.register({
       name: "text-ai",
       pluginId: "ai-text-generation", // the custom field is created by a color-picker plugin
@@ -48,7 +21,7 @@ export default {
         id: "ai-text-generation.text-ai.description",
         defaultMessage: "Let AI do your writing!",
       },
-      icon: AITextIcon, // don't forget to create/import your icon component 
+      icon: PluginIcon, // don't forget to create/import your icon component 
       components: {
         Input: async () => import(/* webpackChunkName: "input-component" */ "./components/Input"),
       },
@@ -61,15 +34,10 @@ export default {
           {
             sectionTitle: { // Add a "Format" settings section
               id: 'ai-text-generation.text-ai.api.details',
-              defaultMessage: 'API Details',
+              defaultMessage: 'Text Details',
             },
             items: [ // Add settings items to the section
               {
-                /*
-                  Add a "Color format" dropdown
-                  to choose between 2 different format options
-                  for the color value: hexadecimal or RGBA
-                */
                 intlLabel: {
                   id: 'ai-text-generation.text-ai.key',
                   defaultMessage: 'Key',

package.json

@@ -8,7 +8,9 @@
     "kind": "plugin",
     "displayName": "AI Text Generation"
   },
-  "dependencies": {},
+  "dependencies": {
+    "axios": "^1.2.2"
+  },
   "author": {
     "name": "A Strapi developer"
   },

server/controllers/ai-controller.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = ({ strapi }) => ({
+  async generate(ctx) {
+    ctx.body = await strapi
+      .plugin('ai-text-generation')
+      .service('openAi')
+      .generateText(ctx.request.body.prompt);
+  },
+});

server/controllers/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const myController = require('./my-controller');
+const aiController = require('./ai-controller');
 
 module.exports = {
-  myController,
+  aiController,
 };