Added new GPTs for Black Friday

gpts/gpt-in-my-team.md

@@ -0,0 +1,320 @@
+
+[![GPT in my team](https://flow-prompt-covers.s3.us-west-1.amazonaws.com/icon/minimalist/mini_11.png)]()
+# GPT in my team 
+I hired a GPT software engineer in my team to help me code. It accelerates the project. Here is one small frontend code ticket I asked GPT to finish.
+
+# Prompt
+
+```
+Hi GPT, can you help me to use baseweb ui to write a chat input box? The box contains a multi-line input area, below the text area there are 3 buttons, 2 on the left: one insert emoji button, and one insert image button; 1 one the right: send message button. The text area will automatically expand vertically when there are multiple lines, until it reach 96px height. After that it will use vertical scroll
+```
+
+## Conversation
+
+**ASSISTANT**: Sure, here's an example implementation of a chat input box using BaseWeb UI:
+
+
+
+```jsx
+
+import * as React from 'react';
+
+import { Input, Button, ButtonGroup } from 'baseui';
+
+
+
+function ChatInputBox() {
+
+  const [message, setMessage] = React.useState('');
+
+  const textAreaRef = React.useRef(null);
+
+
+
+  // This function will resize the text area to fit its content up to a maximum of 96px.
+
+  function handleTextAreaChange(event) {
+
+    const target = event.target;
+
+    target.style.height = 'auto';
+
+    target.style.height = `${Math.min(target.scrollHeight, 96)}px`;
+
+    setMessage(target.value);
+
+  }
+
+
+
+  function handleInsertEmojiClick() {
+
+    // TODO: Implement emoji insertion logic.
+
+  }
+
+
+
+  function handleInsertImageClick() {
+
+    // TODO: Implement image insertion logic.
+
+  }
+
+
+
+  function handleSendMessageClick() {
+
+    // TODO: Implement message sending logic.
+
+  }
+
+
+
+  return (
+
+    <React.Fragment>
+
+      <Input
+
+        value={message}
+
+        onChange={handleTextAreaChange}
+
+        multiline
+
+        placeholder="Type your message..."
+
+        overrides={{
+
+          Input: {
+
+            style: {
+
+              minHeight: '48px',
+
+              maxHeight: '96px',
+
+              overflowY: 'auto',
+
+              resize: 'none',
+
+            },
+
+          },
+
+        }}
+
+        inputRef={textAreaRef}
+
+      />
+
+      <ButtonGroup>
+
+        <Button onClick={handleInsertEmojiClick}>😀</Button>
+
+        <Button onClick={handleInsertImageClick}>📷</Button>
+
+      </ButtonGroup>
+
+      <Button onClick={handleSendMessageClick}>Send</Button>
+
+    </React.Fragment>
+
+  );
+
+}
+
+```
+
+
+
+In this implementation, we're using the `Input` component from BaseWeb with the `multiline` prop to create a multi-line input area. We're also setting the `minHeight` and `maxHeight` styles to 48px and 96px respectively, and adding a `resize: none` style to prevent the user from resizing the text area. We're also using the `overrides` prop to customize the `Input` component's style.
+
+
+
+To automatically resize the text area as the user types, we're using the `handleTextAreaChange` function to set the `height` style of the text area based on its content's height up to a maximum of 96px. We're also using the `inputRef` prop to get a reference to the text area so that we can use it in this function.
+
+
+
+Finally, we're using the `ButtonGroup` component from BaseWeb to group the emoji and image insertion buttons together, and we're using the `Button` component for all three buttons. We're also defining placeholder functions for handling the emoji insertion, image insertion, and message sending logic.
+**USER**: Please change to use SVG drawing for the insert emoji button and insert image button
+**ASSISTANT**: Sure, here's an updated version of the code that uses SVG icons for the insert emoji and insert image buttons:
+
+
+
+```jsx
+
+import * as React from 'react';
+
+import { Input, Button } from 'baseui';
+
+
+
+// SVG icon components for the emoji and image buttons.
+
+function EmojiIcon(props) {
+
+  return (
+
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+
+      <path d="M12 1.5c-6.35 0-11.5 5.15-11.5 11.5s5.15 11.5 11.5 11.5 11.5-5.15 11.5-11.5S18.35 1.5 12 1.5zm6.932 8.747a.498.498 0 000-.706 1.077 1.077 0 00-1.522 0l-2.409 2.41-2.408-2.41a1.077 1.077 0 00-1.522 0 .498.498 0 000 .706L13.57 12l-2.408 2.407a.498.498 0 000 .706 1.077 1.077 0 001.522 0l2.408-2.409 2.409 2.41a1.077 1.077 0 001.522 0 .498.498 0 000-.706L14.43 12l2.503-2.753z" />
+
+    </svg>
+
+  );
+
+}
+
+
+
+function ImageIcon(props) {
+
+  return (
+
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+
+      <path d="M20.25 3h-16.5C2.56 3 2 3.56 2 4.25v15.5c0 .69.56 1.25 1.25 1.25h16.5c.69 0 1.25-.56 1.25-1.25V4.25c0-.69-.56-1.25-1.25-1.25zM12 6a4 4 0 00-4 4c0 2.21 1.79 4 4 4s4-1.79 4-4a4 4 0 00-4-4zm6 13H6v-1.5c0-1.38 2.54-2.5 6-2.5s6 1.12 6 2.5V19z" />
+
+    </svg>
+
+  );
+
+}
+
+
+
+function ChatInputBox() {
+
+  const [message, setMessage] = React.useState('');
+
+  const textAreaRef = React.useRef(null);
+
+
+
+  // This function will resize the text area to fit its content up to a maximum of 96px.
+
+  function handleTextAreaChange(event) {
+
+    const target = event.target;
+
+    target.style.height = 'auto';
+
+    target.style.height = `${Math.min(target.scrollHeight, 96)}px`;
+
+    setMessage(target.value);
+
+  }
+
+
+
+  function handleInsertEmojiClick() {
+
+    // TODO: Implement emoji insertion logic.
+
+  }
+
+
+
+  function handleInsertImageClick() {
+
+    // TODO: Implement image insertion logic.
+
+  }
+
+
+
+  function handleSendMessageClick() {
+
+    // TODO: Implement message sending logic.
+
+  }
+
+
+
+  return (
+
+    <>
+
+      <Input
+
+        value={message}
+
+        onChange={handleTextAreaChange}
+
+        multiline
+
+        placeholder="Type your message..."
+
+        overrides={{
+
+          Input: {
+
+            style: {
+
+              minHeight: '48px',
+
+              maxHeight: '96px',
+
+              overflowY: 'auto',
+
+              resize: 'none',
+
+            },
+
+          },
+
+        }}
+
+        inputRef={textAreaRef}
+
+      />
+
+      <Button
+
+        onClick={handleInsertEmojiClick}
+
+        startEnhancer={<EmojiIcon />}
+
+        kind="secondary"
+
+      >
+
+        Insert Emoji
+
+      </Button>
+
+      <Button
+
+        onClick={handleInsertImageClick}
+
+        startEnhancer={<ImageIcon />}
+
+        kind="secondary"
+
+      >
+
+        Insert Image
+
+      </Button>
+
+      <Button onClick={handleSendMessageClick}>Send</Button>
+
+    </>
+
+  );
+
+}
+
+```
+
+
+
+In this updated version of the code, we're defining two new components, `EmojiIcon` and `ImageIcon`, that render SVG icons for the emoji and image buttons respectively. We're using these components as the `startEnhancer` prop of the `Button` components to display the icons.
+
+
+
+We've also changed the `kind` prop of the emoji
+
+