LM Studio Integration:

- Added LM Studio provider with OpenAI-compatible API support - Dynamic model discovery via /v1/models endpoint - Support for both chat and embeddings models - Docker-compatible networking configuration - Thinking Model Panel: Added collapsible UI panel for model's chain of thought -Parses responses with tags to separate reasoning -Maintains backward compatibility with regular responses -Styled consistently with app theme for light/dark modes -Preserves all existing message functionality (sources, markdown, etc.) These improvements enhance the app's compatibility with local LLMs and provide better visibility into model reasoning processes while maintaining existing functionality.
2025-06-04 08:58:31 +00:00 · 2025-02-16 02:16:37 +04:00
parent 9668056554
commit 5220abae05
5 changed files with 117 additions and 82 deletions
--- a/sample.config.toml
+++ b/sample.config.toml
@ -15,12 +15,16 @@ API_KEY = ""
 [MODELS.GEMINI]
 API_KEY = ""

-[MODELS.CUSTOM_OPENAI]
-API_KEY = ""
-API_URL = ""
-
 [MODELS.OLLAMA]
 API_URL = "" # Ollama API URL - http://host.docker.internal:11434

+[MODELS.LMSTUDIO]
+API_URL = "" # LM STUDIO API URL - http://host.docker.internal:1234/v1
+
+[MODELS.CUSTOM_OPENAI]
+API_KEY = ""
+API_URL = ""
+MODEL_NAME = ""
+
 [API_ENDPOINTS]
 SEARXNG = "http://localhost:32768" # SearxNG API URL
--- a/src/config.ts
+++ b/src/config.ts
@ -26,15 +26,16 @@ interface Config {
    OLLAMA: {
      API_URL: string;
    };
+    LMSTUDIO: { 
+      API_URL: string;
+    };
    CUSTOM_OPENAI: {
      API_URL: string;
      API_KEY: string;
      MODEL_NAME: string;
    };
  };
-  API_ENDPOINTS: {  
-    OLLAMA: string;
-    LMSTUDIO: string;
+  API_ENDPOINTS: {
    SEARXNG: string;
  };
 }
@ -55,20 +56,24 @@ export const getSimilarityMeasure = () =>

 export const getKeepAlive = () => loadConfig().GENERAL.KEEP_ALIVE;

+export const getOpenaiApiKey = () => loadConfig().MODELS.OPENAI.API_KEY;
 export const getOpenaiApiKey = () => loadConfig().MODELS.OPENAI.API_KEY;

+export const getGroqApiKey = () => loadConfig().MODELS.GROQ.API_KEY;
 export const getGroqApiKey = () => loadConfig().MODELS.GROQ.API_KEY;

+export const getAnthropicApiKey = () => loadConfig().MODELS.ANTHROPIC.API_KEY;
 export const getAnthropicApiKey = () => loadConfig().MODELS.ANTHROPIC.API_KEY;

+export const getGeminiApiKey = () => loadConfig().MODELS.GEMINI.API_KEY;
 export const getGeminiApiKey = () => loadConfig().MODELS.GEMINI.API_KEY;

 export const getSearxngApiEndpoint = () =>
  process.env.SEARXNG_API_URL || loadConfig().API_ENDPOINTS.SEARXNG;

-export const getOllamaApiEndpoint = () => loadConfig().API_ENDPOINTS.OLLAMA;
+export const getOllamaApiEndpoint = () => loadConfig().MODELS.OLLAMA.API_URL;

-export const getLMStudioApiEndpoint = () => loadConfig().API_ENDPOINTS.LMSTUDIO;
+export const getLMStudioApiEndpoint = () => loadConfig().MODELS.LMSTUDIO.API_URL;

 export const getCustomOpenaiApiKey = () =>
  loadConfig().MODELS.CUSTOM_OPENAI.API_KEY;
@ -80,10 +85,6 @@ export const getCustomOpenaiModelName = () =>
  loadConfig().MODELS.CUSTOM_OPENAI.MODEL_NAME;

 const mergeConfigs = (current: any, update: any): any => {
-  if (update === null || update === undefined) {
-    return current;
-  }
-
  if (typeof current !== 'object' || current === null) {
    return update;
  }
--- a/src/routes/config.ts
+++ b/src/routes/config.ts
@ -14,6 +14,9 @@ import {
  getCustomOpenaiApiUrl,
  getCustomOpenaiApiKey,
  getCustomOpenaiModelName,
+  getCustomOpenaiApiUrl,
+  getCustomOpenaiApiKey,
+  getCustomOpenaiModelName,
 } from '../config';
 import logger from '../utils/logger';

@ -61,7 +64,7 @@ router.get('/', async (_, res) => {
    config['geminiApiKey'] = getGeminiApiKey();
    config['customOpenaiApiUrl'] = getCustomOpenaiApiUrl();
    config['customOpenaiApiKey'] = getCustomOpenaiApiKey();
-    config['customOpenaiModelName'] = getCustomOpenaiModelName();
+    config['customOpenaiModelName'] = getCustomOpenaiModelName()

    res.status(200).json(config);
  } catch (err: any) {
@ -90,6 +93,9 @@ router.post('/', async (req, res) => {
      OLLAMA: {
        API_URL: config.ollamaApiUrl,
      },
+      LMSTUDIO: {
+        API_URL: config.lmStudioApiUrl,
+      },
      CUSTOM_OPENAI: {
        API_URL: config.customOpenaiApiUrl,
        API_KEY: config.customOpenaiApiKey,
--- a/ui/components/MessageBox.tsx
+++ b/ui/components/MessageBox.tsx
@ -49,27 +49,37 @@ const MessageBox = ({

  useEffect(() => {
    const regex = /\[(\d+)\]/g;
+    const thinkRegex = /<think>(.*?)(?:<\/think>|$)(.*)/s;

-    // First check for thinking content
-    const match = message.content.match(/<think>(.*?)<\/think>(.*)/s);
+    // Check for thinking content, including partial tags
+    const match = message.content.match(thinkRegex);
    if (match) {
      const [_, thinkingContent, answerContent] = match;
-      setThinking(thinkingContent.trim());
-      setAnswer(answerContent.trim());
-
-      // Process the answer part for sources if needed
-      if (message.role === 'assistant' && message?.sources && message.sources.length > 0) {
-        setParsedMessage(
-          answerContent.trim().replace(
-            regex,
-            (_, number) =>
-              `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
-          ),
-        );
-      } else {
-        setParsedMessage(answerContent.trim());
+      
+      // Set thinking content even if </think> hasn't appeared yet
+      if (thinkingContent) {
+        setThinking(thinkingContent.trim());
+        setIsThinkingExpanded(true); // Auto-expand when thinking starts
+      }
+
+      // Only set answer content if we have it (after </think>)
+      if (answerContent) {
+        setAnswer(answerContent.trim());
+        
+        // Process the answer part for sources if needed
+        if (message.role === 'assistant' && message?.sources && message.sources.length > 0) {
+          setParsedMessage(
+            answerContent.trim().replace(
+              regex,
+              (_, number) =>
+                `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
+            ),
+          );
+        } else {
+          setParsedMessage(answerContent.trim());
+        }
+        setSpeechMessage(answerContent.trim().replace(regex, ''));
      }
-      setSpeechMessage(answerContent.trim().replace(regex, ''));
    } else {
      // No thinking content - process as before
      if (message.role === 'assistant' && message?.sources && message.sources.length > 0) {
@ -105,37 +115,6 @@ const MessageBox = ({
            ref={dividerRef}
            className="flex flex-col space-y-6 w-full lg:w-9/12"
          >
-            {thinking && (
-              <div className="flex flex-col space-y-2 mb-4">
-                <button 
-                  onClick={() => setIsThinkingExpanded(!isThinkingExpanded)}
-                  className="flex flex-row items-center space-x-2 group text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white transition duration-200"
-                >
-                  <Brain size={20} />
-                  <h3 className="font-medium text-xl">View Thinking</h3>
-                  <ChevronDown 
-                    size={16}
-                    className={cn(
-                      "transition-transform duration-200",
-                      isThinkingExpanded ? "rotate-180" : ""
-                    )} 
-                  />
-                </button>
-                
-                {isThinkingExpanded && (
-                  <div className="rounded-lg bg-light-secondary/50 dark:bg-dark-secondary/50 p-4">
-                    <Markdown
-                      className={cn(
-                        'prose dark:prose-invert text-sm leading-relaxed',
-                        'max-w-none break-words'
-                      )}
-                    >
-                      {thinking}
-                    </Markdown>
-                  </div>
-                )}
-              </div>
-            )}
            {message.sources && message.sources.length > 0 && (
              <div className="flex flex-col space-y-2">
                <div className="flex flex-row items-center space-x-2">
@ -147,27 +126,71 @@ const MessageBox = ({
                <MessageSources sources={message.sources} />
              </div>
            )}
-            <div className="flex flex-col space-y-2">
-              <div className="flex flex-row items-center space-x-2">
-                <Disc3
-                  className={cn(
-                    'text-black dark:text-white',
-                    isLast && loading ? 'animate-spin' : 'animate-none',
+            <div className="flex flex-col space-y-4">
+              {thinking && (
+                <div className="flex flex-col space-y-2 mb-4">
+                  <button 
+                    onClick={() => setIsThinkingExpanded(!isThinkingExpanded)}
+                    className="flex flex-row items-center space-x-2 group text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white transition duration-200"
+                  >
+                    <Brain size={20} />
+                    <h3 className="font-medium text-xl">Reasoning</h3>
+                    <ChevronDown 
+                      size={16}
+                      className={cn(
+                        "transition-transform duration-200",
+                        isThinkingExpanded ? "rotate-180" : ""
+                      )} 
+                    />
+                  </button>
+                  
+                  {isThinkingExpanded && (
+                    <div className="rounded-lg bg-light-secondary/50 dark:bg-dark-secondary/50 p-4">
+                      {thinking.split('\n\n').map((paragraph, index) => {
+                        if (!paragraph.trim()) return null;
+                        
+                        const content = paragraph.replace(/^[•\-\d.]\s*/, '');
+                        
+                        return (
+                          <div key={index} className="mb-2 last:mb-0">
+                            <details className="group [&_summary::-webkit-details-marker]:hidden">
+                              <summary className="flex items-center cursor-pointer list-none text-sm text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white">
+                                <span className="arrow mr-2 inline-block transition-transform duration-200 group-open:rotate-90 group-open:self-start group-open:mt-1">▸</span>
+                                <p className="relative whitespace-normal line-clamp-1 group-open:line-clamp-none after:content-['...'] after:inline group-open:after:hidden transition-all duration-200 text-ellipsis overflow-hidden group-open:overflow-visible">
+                                  {content}
+                                </p>
+                              </summary>
+                            </details>
+                          </div>
+                        );
+                      })}
+                    </div>
                  )}
-                  size={20}
-                />
-                <h3 className="text-black dark:text-white font-medium text-xl">
-                  Answer
-                </h3>
+                </div>
+              )}
+
+              <div className="flex flex-col space-y-2">
+                <div className="flex flex-row items-center space-x-2">
+                  <Disc3
+                    className={cn(
+                      'text-black dark:text-white',
+                      isLast && loading ? 'animate-spin' : 'animate-none',
+                    )}
+                    size={20}
+                  />
+                  <h3 className="text-black dark:text-white font-medium text-xl">
+                    Answer
+                  </h3>
+                </div>
+                <Markdown
+                  className={cn(
+                    'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
+                    'max-w-none break-words text-black dark:text-white',
+                  )}
+                >
+                  {parsedMessage}
+                </Markdown>
              </div>
-              <Markdown
-                className={cn(
-                  'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
-                  'max-w-none break-words text-black dark:text-white',
-                )}
-              >
-                {parsedMessage}
-              </Markdown>
              {loading && isLast ? null : (
                <div className="flex flex-row items-center justify-between w-full text-black dark:text-white py-4 -mx-2">
                  <div className="flex flex-row items-center space-x-1">
@ -254,4 +277,4 @@ const MessageBox = ({
  );
 };

-export default MessageBox;
+export default MessageBox;
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@ -1,5 +1,6 @@
 {
  "compilerOptions": {
+    "target": "es2018",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,