GuillaumeDaviid

const listMsg = countMsg > 0 ?
        (msg.me.map((item, key) => <div className='chat_bot_content-msg'><h2 className='chat_bot-msg'>Moi :</h2><p className='chat_bot-msg' key={item.key}>{item}</p>
            <h2 className='chat_bot-msg'>Bot :</h2> {msg.bot[key]}</div>))
        : (<p></p>)

    return (
        <div>
            <h1 className='title'>Chat Bot</h1>
            <div className="chat_bot" id="chat_bot">
                <div className='chat_bot_content-msg' id='chat_bot_content-msg'>

GuillaumeDaviid

import postMessage from '../server/postMessage.js';

...

async function handleClick(e) {
        e.preventDefault();
        setCountMsg(countMsg + 1);
        const response = await postMessage(newMsg);
        setMsg({ 'me': msg.me.concat(newMsg), 'bot': msg.bot.concat(response.content[0].text) })
        setNewMsg('');

GuillaumeDaviid

"proxy": "https://api.anthropic.com",

GuillaumeDaviid

export default async function postMessage(message) {
    try {
        const response = await fetch('/v1/messages', {
            method: 'POST',
            headers: {
                'x-api-key': process.env.REACT_APP_API_KEY,
                "anthropic-version": "2023-06-01",
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({

GuillaumeDaviid

import Anthropic from '@anthropic-ai/sdk';

GuillaumeDaviid

npm install @anthropic-ai/sdk

GuillaumeDaviid

REACT_APP_API_KEY="your-api-key"

GuillaumeDaviid

color-mix(in lch, peru 40%, lightgoldenrod)
color-mix(in srgb, #34c9eb 20%, white)

GuillaumeDaviid

oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

GuillaumeDaviid

:nth-child(2 of .highlight)