A small snippet to do a basic chatgpt integration in Freescout

chatgpt-freescout-css.css

.chatgpt-button-container {
	clear: both;
	position: relative;
}

.chatgpt-button-container.loading {
	cursor: wait;
	opacity: 0.5;
}

#draftMessage {
	margin: 10px 0 20px 0;
	border: 1px solid #c1cbd4;
	height: 300px;
	width: 100%;
	display: none;
}

#draftMessage.show {
	display: block;
}

chatgpt-freescout-js.js

(async function() {
    const OPENAI_API_KEY = 'sk-proj-XXXXX';  // Replace with your actual OpenAI API key

    // Function to make API requests to OpenAI
    async function callOpenAI(prompt) {
        try {
            const response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${OPENAI_API_KEY}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    model: 'gpt-4-turbo',  // Use 'gpt-4-turbo' or 'gpt-3.5-turbo'
                    messages: [
                        { "role": "system", "content": "A friendly but professional support agent" },
                        { "role": "user", "content": prompt }
                    ],
                    max_tokens: 200,
                    temperature: 0.7
                })
            });

            if (!response.ok) {
                throw new Error(`OpenAI API request failed: ${response.statusText}`);
            }

            const data = await response.json();
            return data.choices[0].message.content.trim();
        } catch (error) {
            console.error('Error calling OpenAI API:', error);
            return 'Error generating response. Please try again later.';
        }
    }

    // Function to generate a draft response
    async function generateDraft() {
        const ticketContent = document.querySelector('.thread-content').textContent;

        const prompt = `Generate a reply to this support ticket: "${ticketContent}". You don't need to add a signature.`;
        document.querySelector('.chatgpt-button-container').classList.add('loading');
        const draft = await callOpenAI(prompt);

        document.querySelector('#draftMessage').value = draft;
        document.querySelector('#draftMessage').classList.add('show');
        document.querySelector('.chatgpt-button-container').classList.remove('loading');
    }

    // Function to rephrase a response
    async function rephraseResponse() {
        const userResponse = document.querySelector('.note-editable').textContent;  // Update selector for the response text area
        const ticketContent = document.querySelector('.thread-content').textContent;

        const prompt = `Rephrase this reply i wrote: "${userResponse}". I replied to this question: "${ticketContent}". You don't need to add a signature.`;
        document.querySelector('.chatgpt-button-container').classList.add('loading');
        const rephrasedResponse = await callOpenAI(prompt);

        document.querySelector('#draftMessage').value = rephrasedResponse;
        document.querySelector('#draftMessage').classList.add('show');
        document.querySelector('.chatgpt-button-container').classList.remove('loading');

    }

    // Adding buttons to the UI
    function addButtons() {
        
        const buttonContainer = document.createElement('div');
        buttonContainer.classList.add('chatgpt-button-container');

        const generateDraftButton = document.createElement('button');
        generateDraftButton.textContent = 'Generate reply';
        generateDraftButton.style.marginRight = '10px';
        generateDraftButton.onclick = generateDraft;

        const rephraseButton = document.createElement('button');
        rephraseButton.textContent = 'Rephrase answer';
        rephraseButton.onclick = rephraseResponse;

        buttonContainer.appendChild(generateDraftButton);
        buttonContainer.appendChild(rephraseButton);

        const draftMessage = document.createElement('textarea');
        draftMessage.id = 'draftMessage';
        buttonContainer.appendChild(draftMessage);

        // Insert buttons above or below the response textarea
        const responseArea = document.querySelector('.form-group.cc-toggler');  // Update selector to your response text area
        responseArea.appendChild(buttonContainer);
    }

    // Initialize buttons once the page has fully loaded
    window.addEventListener('load', addButtons);
})();