Assistant's code output is often hard to follow due to the limited width of the assistant's output

MrMcyeet

Due to the limited width that the assistant's responses are shown in there is much dead space left on screen and when the assistant/ai/llm outputs code blocks, they are often wrapped in a way that makes them more difficult to follow than would otherwise needed.

Simple example

Attached above is an admittedly extreme and oversimplified example to demonstrate what exactly I mean.

Im no UI/UX designer, so I can't really suggest an exact layout, but a seemingly obvious way to remedy this would be somehow use some of the dead space and extend the width of assistant outputs. This would allow code outputted to be wrapped less often and thus more readable more of the time

Luis

MrMcyeet we're working on a completely new Assistant which has a different layout. This update should fix this issue upon its release. We will maintain the ticket's status as "planned" until then.

Siebjee

MrMcyeet

I have issues with it as well. And currently using the custom CSS below it somewhat mitigate it:

[data-path="/assistant"] #main {
  max-width: unset;
}

[data-path="/assistant"] .orb_chat_footer {
  max-width: unset;
} 

[data-path="/assistant"] .right-content-box {
  display: none;
}

[data-path="/assistant"] .center-content-box {
  max-width: unset;
}

[data-path="/assistant"] .nav_spacer {
  max-width: unset;
  min-width: unset;
}

Hope this helps you as well till the new version is out. (Credits to Seth from Kagi Staff on discord)

OldMan973471

Would absolutely love a wider layout! I have a 5k monitor and the AI box uses about 15% at best of the width of my monitor.

Not sure how difficult it would be to make that resizable but for coding and some results I get back that are pages long, I am someone who loves my margin space to be utilized. 😃

MrMcyeet

Luis interesting. Any insight available as to when this will be released?

slater

I created a Stylus extension to make the code wider. Works as of 2024-09-06

https://userstyles.world/style/18000/kagi-assistant-wider-code

@-moz-document url-prefix("https://kagi.com") {

    [data-path="/assistant"] .chat_bubble {
        width: 90vw;
    } 
    
    [data-path="/assistant"] .main-center-box > :first-child {
        margin-left: 0;
    }
}

somerabbit155

This is unfortunately still an issue on the new assistant. For some reason the width is set to 732px in the css even on large screens. Fixed with custom css:

.main-center-box>:first-child {
  width: 100%;
  max-width: 1200px;
}

This widens the whole chat box as well as all the code blocks inside.

Marno

Thanks for that @SomeRandomName, that works! Agree that this is still an issue, should we maybe open a new issue for this as this one is apparently marked 'done' so probably not getting a lot of attention?

Luis

I updated the status. We're exploring how to improve this.

Marno

See https://kagifeedback.org/d/4304-assistants-code-output-is-often-hard-to-follow-due-to-the-limited-width-of-the-assistants-output/10 which was closed but is not fixed. The custom CSS suggested by somerabbit155 greatly improves the layout, although I personally made it even wider.

At least for code, I think the responses should use more of the available space so you can more easily read the code & don't have to scroll all the time.

Mackou

Imo the assistant thread should be wider when full screen, sometimes its hard to read:

Something like this would be much better default:

Relevant CSS:

@media (min-width: 1000px) {
  .main-center-box > :first-child {
    width: 90% !important;
  }
}

I'm so glad we can set custom CSS and share it with the community. 🙂

N/a

azdanov

https://kagifeedback.org/d/5230-assistant-improvements/2 I mentioned something similar here

freezingDaniel

I also wanted to request the option to select the assistant width.

As for now I use uBlock or Tampermonkey. As a reference for anyone interested here are the filters/scripts I have used:

uBlock
Spares 169px from the right to not clip under the Kagi logo in the top right corner:
kagi.com##:matches-path(/assistant).main-center-box > :first-child:style(width: calc(100% - 169px) !important)

Doesn't care about the logo (default behaviour for small windows):
kagi.com##:matches-path(/assistant).main-center-box > :first-child:style(width: 100% !important)

Tampermonkey

// ==UserScript==
// @name         Resize Kagi Assistant to use full width
// @namespace    http://tampermonkey.net/
// @version      2024-12-04
// @description  Resize Kagi Assistant to use full width
// @author       freezingDaniel
// @match        https://kagi.com/assistant*
// @icon         https://kagi.com/favicon-assistant-32x32.png
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle('.main-center-box > :first-child { width: calc(100% - 169px) !important }');

Luis

We will allow users to change the Assistant's width in one of our upcoming releases -- stay tuned!