fix spacing settings

This commit is contained in:
Mathew Pareles 2025-01-12 19:22:27 -08:00
parent 6386fc95ee
commit 0d9f441967
2 changed files with 17 additions and 17 deletions

View file

@ -84,7 +84,7 @@ export const CodeSpan = ({ children, className }: { children: React.ReactNode, c
</code>
}
const RenderToken = ({ token, nested = false }: { token: Token | string, nested?: boolean }): JSX.Element => {
const RenderToken = ({ token, nested = false, noSpace = false }: { token: Token | string, nested?: boolean, noSpace?: boolean }): JSX.Element => {
// deal with built-in tokens first (assume marked token)
const t = token as MarkedToken
@ -116,7 +116,7 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
if (t.type === "table") {
return (
<div className="my-4 overflow-x-auto">
<div className={`${noSpace ? '' : 'my-4'} overflow-x-auto`}>
<table className="min-w-full border border-void-bg-2">
<thead>
<tr className="bg-void-bg-1">
@ -156,7 +156,7 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
}
if (t.type === "blockquote") {
return <blockquote className="pl-4 border-l-4 border-void-bg-2 italic my-4">{t.text}</blockquote>
return <blockquote className={`pl-4 border-l-4 border-void-bg-2 italic ${noSpace ? '' : 'my-4'}`}>{t.text}</blockquote>
}
if (t.type === "list") {
@ -164,10 +164,10 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
return (
<ListTag
start={t.start ? t.start : undefined}
className={`list-inside pl-2 my-4 ${t.ordered ? "list-decimal" : "list-disc"}`}
className={`list-inside pl-2 ${noSpace ? '' : 'my-4'} ${t.ordered ? "list-decimal" : "list-disc"}`}
>
{t.items.map((item, index) => (
<li key={index} className="mb-4">
<li key={index} className={`${noSpace ? '' : 'mb-4'}`}>
{item.task && (
<input type="checkbox" checked={item.checked} readOnly className="mr-2 form-checkbox" />
)}
@ -188,12 +188,12 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
</>
if (nested)
return contents
return <p className="my-4 leading-snug">{contents}</p>
return <p className={`${noSpace ? '' : 'my-4'} leading`}>{contents}</p>
}
if (t.type === "html") {
return (
<pre className="bg-void-bg-2 p-4 rounded-lg my-4 font-mono text-sm">
<pre className={`bg-4oid-bg-2 p-4 rounded-lg ${noSpace ? '' : 'my-4'} font-mono text-sm`}>
{`<html>`}
{t.raw}
{`</html>`}
@ -227,7 +227,7 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
src={t.href}
alt={t.text}
title={t.title ?? undefined}
className="max-w-full h-auto rounded my-4"
className={`max4w-full h-auto rounded ${noSpace ? '' : 'my-4'}`}
/>
}
@ -266,12 +266,12 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
)
}
export const ChatMarkdownRender = ({ string, nested = false }: { string: string, nested?: boolean }) => {
export const ChatMarkdownRender = ({ string, nested = false, noSpace }: { string: string, nested?: boolean, noSpace?: boolean }) => {
const tokens = marked.lexer(string); // https://marked.js.org/using_pro#renderer
return (
<>
{tokens.map((token, index) => (
<RenderToken key={index} token={token} nested={nested} />
<RenderToken key={index} token={token} nested={nested} noSpace={noSpace} />
))}
</>
)

View file

@ -10,12 +10,12 @@ import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
import { VoidButton, VoidCheckBox, VoidCustomSelectBox, VoidInputBox, VoidSwitch } from '../util/inputs.js'
import { useAccessor, useIsDark, useRefreshModelListener, useRefreshModelState, useSettingsState } from '../util/services.js'
import { X, RefreshCw, Loader2, Check, MoveRight } from 'lucide-react'
import { ChatMarkdownRender, CodeSpan } from '../markdown/ChatMarkdownRender.js'
import { useScrollbarStyles } from '../util/useScrollbarStyles.js'
import { isWindows, isLinux, isMacintosh } from '../../../../../../../base/common/platform.js'
import { URI } from '../../../../../../../base/common/uri.js'
import { env } from '../../../../../../../base/common/process.js'
import { WarningBox } from './ModelDropdown.js'
import { ChatMarkdownRender } from '../markdown/ChatMarkdownRender.js'
const SubtleButton = ({ onClick, text, icon, disabled }: { onClick: () => void, text: string, icon: React.ReactNode, disabled: boolean }) => {
@ -301,7 +301,7 @@ const ProviderSetting = ({ providerName, settingName }: { providerName: Provider
multiline={false}
/>
{subTextMd === undefined ? null : <div className='py-1 px-3 opacity-50 text-sm'>
<ChatMarkdownRender string={subTextMd} />
<ChatMarkdownRender noSpace string={subTextMd} />
</div>}
</div>
@ -411,11 +411,11 @@ export const FeaturesTab = () => {
{/* <h3 className={`mb-2`}>{`Void can access any model that you host locally. We automatically detect your local models by default.`}</h3> */}
<h3 className={`text-void-fg-3 mb-2`}>{`Void can access any model that you host locally. We automatically detect your local models by default.`}</h3>
<div className='pl-4 opacity-50'>
<span className={`text-sm mb-2`}><ChatMarkdownRender string={`1. Download [Ollama](https://ollama.com/download).`} /></span>
<span className={`text-sm mb-2`}><ChatMarkdownRender string={`2. Open your terminal.`} /></span>
<span className={`text-sm mb-2 select-text`}><ChatMarkdownRender string={`3. Run \`ollama run llama3.1\`. This installs Meta's llama3.1 model which is best for chat and inline edits. Requires 5GB of memory.`} /></span>
<span className={`text-sm mb-2 select-text`}><ChatMarkdownRender string={`4. Run \`ollama run qwen2.5-coder:1.5b\`. This installs a faster autocomplete model. Requires 1GB of memory.`} /></span>
<span className={`text-sm mb-2`}><ChatMarkdownRender string={`Void automatically detects locally running models and enables them.`} /></span>
<span className={`text-sm mb-2`}><ChatMarkdownRender noSpace string={`1. Download [Ollama](https://ollama.com/download).`} /></span>
<span className={`text-sm mb-2`}><ChatMarkdownRender noSpace string={`2. Open your terminal.`} /></span>
<span className={`text-sm mb-2 select-text`}><ChatMarkdownRender noSpace string={`3. Run \`ollama run llama3.1\`. This installs Meta's llama3.1 model which is best for chat and inline edits. Requires 5GB of memory.`} /></span>
<span className={`text-sm mb-2 select-text`}><ChatMarkdownRender noSpace string={`4. Run \`ollama run qwen2.5-coder:1.5b\`. This installs a faster autocomplete model. Requires 1GB of memory.`} /></span>
<span className={`text-sm mb-2`}><ChatMarkdownRender noSpace string={`Void automatically detects locally running models and enables them.`} /></span>
{/* TODO we should create UI for downloading models without user going into terminal */}
</div>