現在把我們本地測試好的程式碼打包好

npm run build

重新上傳至S3上

佈署完測試後結果看起來前後端是完成串接了!!

畫面調整

上面的畫面看起來有點醜，所以我加了畫面的渲染的commponent：

1. AI等待回應時的打字動畫

import React from 'react'

interface TypingAnimationProps {
  className?: string
}

const TypingAnimation: React.FC<TypingAnimationProps> = ({ className }) => {
  return (
    <div className={`flex items-center space-x-1 ${className}`}>
      <div className="flex space-x-1">
        <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
        <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
        <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
      </div>
      <span className="text-gray-500 text-sm ml-2">正在輸入...</span>
    </div>
  )
}

export default TypingAnimation

1. AI回覆的markdown渲染

import React from 'react'
import ReactMarkdown from 'react-markdown'

interface MarkdownMessageProps {
  content: string
  className?: string
}

const MarkdownMessage: React.FC<MarkdownMessageProps> = ({ content, className }) => {
  return (
    <div className={`prose prose-sm max-w-none ${className}`}>
      <ReactMarkdown
        components={{
        p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
        h1: ({ children }) => <h1 className="text-lg font-bold mb-2">{children}</h1>,
        h2: ({ children }) => <h2 className="text-base font-bold mb-2">{children}</h2>,
        h3: ({ children }) => <h3 className="text-sm font-bold mb-2">{children}</h3>,
        ul: ({ children }) => <ul className="list-disc pl-4 mb-2">{children}</ul>,
        ol: ({ children }) => <ol className="list-decimal pl-4 mb-2">{children}</ol>,
        li: ({ children }) => <li className="mb-1">{children}</li>,
        blockquote: ({ children }) => <blockquote className="border-l-2 border-gray-300 pl-4 italic mb-2">{children}</blockquote>,
        code: ({ inline, children, ...props }: any) =>
          inline ? (
            <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono" {...props}>
              {children}
            </code>
          ) : (
            <code className="block bg-gray-100 p-2 rounded text-sm font-mono whitespace-pre-wrap mb-2" {...props}>
              {children}
            </code>
          ),
        strong: ({ children }) => <strong className="font-bold">{children}</strong>,
        em: ({ children }) => <em className="italic">{children}</em>,
        a: ({ children, ...props }) => (
          <a className="text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer" {...props}>
            {children}
          </a>
        ),
        }}
      >
        {content}
      </ReactMarkdown>
    </div>
  )
}

export default MarkdownMessage

結果展示

1. 等待回覆效果

1. markdown渲染

快取問題

佈署的過程中有時候可能會遇到快取問題，可能要等到一定的時間才會清快取，CloudFront有支援當你檔案異動時直接清楚快取的方式，設定完成即可!