Skip to content

Conversation

@Tatsu723
Copy link
Contributor

言われていた通り、StyledMarkdownをインポートし、{response}をStyledMarkdownで囲みました。
出力結果は以下の通りです。
スクリーンショット 2025-08-22 084600

加えて、画像のように、chatbubbleの色をsecondary-contentにしました。
(他の色でも試しましたが、最終的にこれが一番良いと感じました。)

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Aug 22, 2025

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
my-code 18138d3 Commit Preview URL

Branch Preview URL
Aug 22 2025, 09:27 AM

@na-trium-144
Copy link
Contributor

質問の枠もsecondaryの色に統一すると良い気がしました
34行目の border-primary の部分ですね

それと送信ボタンの色もprimaryでいいのかが気になりましたが、secondaryにしてしまうとちょっと目立たなさすぎるかもしれない
それか3番目の色としてaccent(緑色っぽいやつ)を使う?

image

@na-trium-144
Copy link
Contributor

回答の文章中のコードブロックの背景が白すぎて目立つのもちょっと気になりますかね?
markdown.tsx の下の方で見た目を定義しているところがあって、

<code
  className="bg-base-200 border border-base-300 px-1 py-0.5 rounded text-sm "
  {...props}
/>

bg-base-200 を例えば bg-base-200/60 (不透明度60%) とかにすると背景色と混ざっていい感じになるかも?

@na-trium-144
Copy link
Contributor

このPRとは直接関係ないので別のPRとしてやってもいいけど、質問ボックスの見た目について

  • 質問ボックスの影がでかすぎるような (shadow-xlshadow-md とか) tailwindCSSのshadow
  • 「AIに質問」という見出しはわざわざ必要ない気がしました
    • textareaのplaceholderにある「質問を入力してください」で十分なのでは
  • 「AIに質問」の見出しがなければ、テキスト入力のボックスのサイズを外側の質問のボックス(<form>)と同じにしてしまってもよいと思いました
    • formタグの p-6 を消せばtextarea外側のスペースがなくなります
    • textareaの枠(border)が要らないので、textarea-ghost にします
      • それでもクリック時には枠(outline)が表示されてしまうので、focus:outline-none で消します (tailwindcssのoutline-style)
    • あとはcontrolsのdivのposition: relative, top: 22pxや送信ボタンのmarginTop: 10pxを消せばボタンの位置が揃うと思います
      • controlsの上側とかにスペースを空けるのはtopではなくmarginTopでやりましょう。tailwindcssのmarginも使えます
image

@Tatsu723
Copy link
Contributor Author

上2つは修正しました。
下の質問ボックスの見た目の調整については別ブランチでこれから行います。

@Tatsu723 Tatsu723 merged commit c54e04d into main Aug 22, 2025
3 checks passed
@Tatsu723 Tatsu723 deleted the markdown branch August 25, 2025 09:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants