Merge pull request #132 from ollama4j/docs-updates

Updated docs

docs/docs/apis-generate/chat.md

@@ -3,6 +3,7 @@ sidebar_position: 7
 ---
 
 import CodeEmbed from '@site/src/components/CodeEmbed';
+import TypewriterTextarea from '@site/src/components/TypewriterTextarea';
 
 # Chat
 
@@ -52,7 +53,7 @@ You will get a response similar to:
 
 <CodeEmbed src="https://raw.githubusercontent.com/ollama4j/ollama4j-examples/refs/heads/main/src/main/java/io/github/ollama4j/examples/ChatStreamingWithTokenConcatenationExample.java" />
 
-::::tip[LLM Response]
+<!-- ::::tip[LLM Response]
 >
 > The
 >
@@ -68,7 +69,15 @@ You will get a response similar to:
 >
 > The capital of France is Paris.
 >
-::::
+:::: -->
+
+<TypewriterTextarea
+    textContent='The capital of France is Paris.'
+    typingSpeed={30}
+    pauseBetweenSentences={1200}
+    height='55px'
+    width='100%'
+/>
 
 ### Using a simple Console Output Stream Handler
 

docs/docs/apis-generate/generate.md

@@ -3,6 +3,7 @@ sidebar_position: 1
 ---
 
 import CodeEmbed from '@site/src/components/CodeEmbed';
+import TypewriterTextarea from '@site/src/components/TypewriterTextarea';
 
 # Generate (Sync)
 
@@ -25,14 +26,14 @@ You will get a response similar to:
 > I am a large language model created by Alibaba Cloud. My purpose is to assist users in generating text, answering
 > questions, and completing tasks. I aim to be user-friendly and easy to understand for everyone who interacts with me.
 ::::
->
+
 ### Try asking a question, receiving the answer streamed
 
 <CodeEmbed src="https://raw.githubusercontent.com/ollama4j/ollama4j-examples/refs/heads/main/src/main/java/io/github/ollama4j/examples/GenerateStreamingWithTokenConcatenation.java" />
 
 You will get a response similar to:
 
-::::tip[LLM Response]
+<!-- ::::tip[LLM Response]
 > The
 >
 > The capital
@@ -46,7 +47,15 @@ You will get a response similar to:
 > The capital of France is Paris
 >
 > The capital of France is Paris.
-::::
+:::: -->
+
+<TypewriterTextarea
+    textContent='The capital of France is Paris.'
+    typingSpeed={30}
+    pauseBetweenSentences={1200}
+    height='55px'
+    width='100%'
+/>
 
 ## Generate structured output
 

docs/src/components/TypewriterTextarea/index.js

@@ -0,0 +1,66 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+const TypewriterTextarea = ({ textContent, typingSpeed = 50, pauseBetweenSentences = 1000, height = '200px', width = '100%' }) => {
+  const [text, setText] = useState('');
+  const [sentenceIndex, setSentenceIndex] = useState(0);
+  const [charIndex, setCharIndex] = useState(0);
+  const sentences = textContent ? textContent.split('\n') : [];
+  const isTyping = useRef(false);
+
+  useEffect(() => {
+    if (!textContent) return;
+
+    if (!isTyping.current) {
+      isTyping.current = true;
+    }
+
+    if (sentenceIndex >= sentences.length) {
+      // Reset to start from the beginning
+      setSentenceIndex(0);
+      setCharIndex(0);
+      setText('');
+      return;
+    }
+
+    const currentSentence = sentences[sentenceIndex];
+
+    if (charIndex < currentSentence.length) {
+      const timeout = setTimeout(() => {
+        setText((prevText) => prevText + currentSentence[charIndex]);
+        setCharIndex((prevCharIndex) => prevCharIndex + 1);
+      }, typingSpeed);
+
+      return () => clearTimeout(timeout);
+    } else {
+      // Wait a bit, then go to the next sentence
+      const timeout = setTimeout(() => {
+        setSentenceIndex((prev) => prev + 1);
+        setCharIndex(0);
+      }, pauseBetweenSentences);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [charIndex, sentenceIndex, sentences, typingSpeed, pauseBetweenSentences, textContent]);
+
+  return (
+    <textarea
+      value={text}
+      readOnly
+      rows={10}
+      cols={5}
+      style={{
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: height,
+        padding: '1rem',
+        fontFamily: 'monospace',
+        fontSize: '1rem',
+        backgroundColor: '#f4f4f4',
+        border: '1px solid #ccc',
+        resize: 'none',
+        whiteSpace: 'pre-wrap',
+      }}
+    />
+  );
+};
+
+export default TypewriterTextarea;

docs/src/pages/index.js

@@ -8,7 +8,7 @@ import Heading from '@theme/Heading';
 import styles from './index.module.css';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import LatestRelease from '@site/src/components/LatestRelease';
-
+import TypewriterTextarea from '@site/src/components/TypewriterTextarea';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
@@ -25,9 +25,18 @@ function HomepageHeader() {
           style={{ maxWidth: '20vh' }}
         />
         <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
+        <div style={{ marginTop: '2rem' }}>
-          <Link className="button button--secondary button--lg" to="/intro">
+          <TypewriterTextarea
-            Getting Started
+            textContent='Hello there! I’m a handy little Java library that helps you talk to an Ollama server — nice and easy.'
+            typingSpeed={30}
+            pauseBetweenSentences={1200}
+            height='70px'
+            width='50%'
+          />
+        </div>
+        <div className={styles.buttons} >
+          <Link className="button button--secondary button--lg" to="/intro" style={{ marginTop:'2rem' }}>
+            Get Started
           </Link>
         </div>
         <div style={{ marginTop: '3rem' }}>