Photo by Kenny Eliason on Unsplash

REACT UI MECHANICS

React ile AI Uygulamaların Geliştirimi — 5(Kullanışlılığı Arttırma)

React UI Mekaniklerinde bu blog yazi serisinde AI uygulamalarını ve ChatGPT , Gemini gibi Web ortamlarını nasıl geliştirebileceğimizi analiz edip , bu konuda örnekler geliştirip bunların mantıklarını anlatıyor olacağım.

Bu seriye ait blog yazıları;

• React ile AI Uygulamaların Geliştirimi — 1 (Örnek Uygulamaların Analizi)
• React ile AI Uygulamaların Geliştirimi — 2 (Menu & Page & Routing)
• React ile AI Uygulamaların Geliştirimi — 3(Server Sync and OpenAI SDK),
• React ile AI Uygulamaların Geliştirimi — 4(Sayfanın Geliştirilmesi),

5nci blog yazımızda mevcut uygulamayı nasıl daha kullanışlı hale getirebileceğim üzerinde çalışacağım. Uygulamayı incelediğimde iki konuda ki eksikliği farkettim.

Birinci konu Enter tuşu ile kullanıcı gönderebilme yani keyboard üzerinden kısayol tuşu , 2ncisi de AI (Yapay Zeka) dan gelen mesajları kod parçalarını formatlayarak göstermek.

Demo: https://onurdayibasi.dev/menu-app/ai-chat

https://onurdayibasi.dev/menu-app/ai-chat

1. Enter Shortcut

İlk önce Enter için bir CustomHook yazıyoruz. Burada önemli olan Keyboard parmağınız kalkmadan tekrar event göndermemesi. Aksi halde re-rendering tekrarlayıp post işlemini Infinite Loop sokuyor.

import React from 'react';

function useKeyPressOne(callback, targetKey) {
  const [isPressed, setIsPressed] = React.useState(false);

  React.useEffect(() => {
    const downHandler = (event) => {
      if (event.key === targetKey && !isPressed) {
        setIsPressed(true);
        callback();
      }
    };

    const upHandler = (event) => {
      if (event.key === targetKey) {
        setIsPressed(false);
      }
    };

    window.addEventListener('keydown', downHandler);
    window.addEventListener('keyup', upHandler);

    return () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
    };
  }, [callback, targetKey, isPressed]);
}

export default useKeyPressOne;

Sonrasında bunu uygulamamıza bağlıyoruz.

  useKeyPressOne(() => {
    if (!loading) {
      handlePost(`${restApiUri}/chat/1`, {content: value});
    }
  }, 'Enter');

2. AI Response Formatter

2nci kısımda yapmamız gereken AI dan gelen kod parçalarını formatlayıp göstermek . Bunun için bir TextWityCodeParser bileşeni yazıyoruz.

const TextWithCodeParser = ({text}) => {
  const codeBlockRegex = /```jsx([\s\S]*?)```/g;

  const parts = [];
  let lastIndex = 0;
  let match;

  while ((match = codeBlockRegex.exec(text)) !== null) {
    if (match.index > lastIndex) {
      parts.push({
        type: 'text',
        content: text.slice(lastIndex, match.index),
      });
    }
    parts.push({
      type: 'code',
      content: match[1].trim(),
    });
    lastIndex = codeBlockRegex.lastIndex;
  }

  if (lastIndex < text.length) {
    parts.push({
      type: 'text',
      content: text.slice(lastIndex),
    });
  }

  const processTextWithBackticks = (text) => {
    const regex = /`([^`]*)`/g;
    const parts = text.split(regex); 

    return parts.map((part, index) =>
      index % 2 === 1 ? ( 
        <code key={index} style={{background: '#f5f5f5', padding: '0 4px', borderRadius: '4px'}}>
          {part}
        </code>
      ) : (
        part 
      ),
    );
  };

  return (
    <div>
      {parts.map((part, index) =>
        part.type === 'text' ? (
          <Typography.Paragraph key={index}>{processTextWithBackticks(part.content)}</Typography.Paragraph>
        ) : (
          <SyntaxHighlighter
            key={index}
            language="jsx"
            style={darcula}
            customStyle={{maxWidth: '632px', overflowX: 'auto', margin: '0 auto'}}
          >
            {part.content}
          </SyntaxHighlighter>
        ),
      )}
    </div>
  );
};

Bundan sonra yapmamız gereken AI dan gelen cevabı bu bileşen içerisinde göstermek.

    <TextWithCodeParser text={response.content} />

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.