issues
search
chingu-voyages
/
v49-tier2-team-18
Add-project-description-here | Voyage-49 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs
1
stars
1
forks
source link
19 display openai response
#49
Closed
BrianSlaby
closed
5 months ago
BrianSlaby
commented
5 months ago
Added ResponseDisplay.jsx, which renders the response from the AI API.
colorRecs state variable is an array for holding the recommended colors from the AI response.
extractRecommendedColors is a function that uses regex to extract hex codes from the AI response and set the colorRecs state.
TO-DO
: I plan on ideally adding regex for hsva, hsla, and rgb formats as well. Will need to play nice with color picker.
useEffect calls extractRecommendedColors when aiResponse changes (i.e., when the response is added to state).
formatResponseText function handles line breaks in the API response and makes sure response renders correctly.
Added ColorDisplay.jsx, which visually displays all relevant colors
The selected color (which is currently handled by my testColor state variable in App.jsx) renders when chosen.
colorRecs array mapped over to display swatches and color codes of everything.
styling is in ResponseDisplay.css; since this component will only be used in the ResponseDisplay component they are all in the same folder.
Added ResponseDisplay.jsx, which renders the response from the AI API.
Added ColorDisplay.jsx, which visually displays all relevant colors