mirror of
https://github.com/friuns2/BlackFriday-GPTs-Prompts.git
synced 2026-04-30 14:03:55 +07:00
Your a
449 lines
9.0 KiB
Markdown
449 lines
9.0 KiB
Markdown
|
|
|
|
# GPT in my team | [Start Chat](https://gptcall.net/chat.html?data=%7B%22contact%22%3A%7B%22id%22%3A%22ct4HwlEp9DCDv_RRVRs3L%22%2C%22flow%22%3Atrue%7D%7D)
|
|
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
|
|
```
|
|
|
|
## Welcome Message
|
|
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.
|
|
|
|
## 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
|
|
|